Commit e171f1c8 authored by Jefferyne's avatar Jefferyne

Track 1 files into repository.

- modified 前端组件/hlsDatePicker.md

Auto commit by GitBook Editor
parent e48f5518
# hlsDatePicker标签(时间控件) # hlsDatePicker标签(时间控件)
日期选择器(不包含时分秒) 日期选择器(不包含时分秒)
xml配置 xml配置
```xml ```xml
<!--基本用法--> <!--基本用法-->
<h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/> <h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/>
``` ```
### **主要属性** ### **主要属性**
属性名 | 类型 | 说明 | 属性名 | 类型 | 说明 |
-------- | -----| --- | -------- | -----| --- |
promptColspan | Integer | 描述字段所占列数 | promptColspan | Integer | 描述字段所占列数 |
promptClassName | String| 描述的样式名称 | promptClassName | String| 描述的样式名称 |
prompt | String| 描述 | prompt | String| 描述 |
colspan | Integer | datePicker所占列数 | colspan | Integer | datePicker所占列数 |
hlsClassName | String | 样式名称 | hlsClassName | String | 样式名称 |
animation | Boolean | 动画 | animation | Boolean | 动画 |
format| String | 格式化 | format| String | 格式化 |
max| String | 最大时间 | max| String | 最大时间 |
min| String | 最小时间 | min| String | 最小时间 |
value | String | 值 | value | String | 值 |
name | String | name属性 | name | String | name属性 |
bind | Function | 绑定数据 | bind | Function | 绑定数据 |
required | Boolean | 必输 | required | Boolean | 必输 |
change | Function | chang事件 | change | Function | chang事件 |
placeholder | String | 占位符 | placeholder | String | 占位符 |
timeFormat |String| 时间格式化 | timeFormat |String| 时间格式化 |
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker > **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例** ### **用法示例**
```javascript ```javascript
//注意是写在script标签内的 //注意是写在script标签内的
var viewModel = kendo.observable({ var viewModel = kendo.observable({
data:{}, data:{},
isEnabled:true isEnabled:true
}); });
function open(){ function open(){
//... //...
} }
function change(e){ function change(e){
//... //...
} }
``` ```
```xml ```xml
<h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value" <h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value"
style="width:200px;" style="width:200px;"
max="2016-6-6" max="2016-6-6"
placeholder="hlsDatePicker" placeholder="hlsDatePicker"
open="open" open="open"
required="true" required="true"
change="change" change="change"
prompt="日期选择器:" prompt="日期选择器:"
/> />
id:可写可不写; id:可写可不写;
bind:属性里面包含配置两个选项: bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。 (1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量; (2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值; max:可选择日期的上限值;
style可改变该控件的样式; style可改变该控件的样式;
open:点击控件调用的方法; open:点击控件调用的方法;
change:选择日期之后的事件; change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用; prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用;
``` ```
> **提示:** > **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**) > - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**" > - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment