日历
日历组件用来选择年月日,可以代替系统原生的日历组件,提供更统一的视觉和交互以及更好的兼容性。
日历组件需要初始化才能使用,最简单的方式是通过一下JS代码来初始化,绑定到一个input元素上:
{% highlight js %} $("#my-input").calendar(); {% endhighlight %}当你点击input元素后,会自动弹出一个JS生成的日历组件。当用户选择日期之后,input的值会被设置为用户选择的日期。
如果你不想写js,可以通过以下方式来自动初始化:
{% highlight html%} {% endhighlight %}参数
你可以在初始化的时候指定如下参数:
参数名 | 默认值 | 说明 |
---|---|---|
inputReadOnly | true | 是否在input上增加一个 readonly 属性使用户无法自己输入 |
dateFormat | 'yyyy-mm-dd' | 格式化日期 |
minDate | undefined | 最小可选日期,比如 2015-06-01 |
maxDate | undefined | 最大可选日期,比如 2015-08-01 |
onChange | function(p, values, displayValues){} | 当用户选择日期时触发 |
onOpen | function(p){} | 日历弹层打开时触发 |
onClose | function(p){} | 日历弹层关闭时触发 |
当用户选择完日期之后,会在 input 上触发 change
事件,你可以监听此事件。
如果你只同时选择日期和时间,请使用 日期时间选择器