日历

日历组件用来选择年月日,可以代替系统原生的日历组件,提供更统一的视觉和交互以及更好的兼容性。

日历组件需要初始化才能使用,最简单的方式是通过一下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 事件,你可以监听此事件。

如果你只同时选择日期和时间,请使用 日期时间选择器

内联日历

日历插件是非常智能的,如果在一个非 input 元素上初始化,它会自动变成内联形式。

{% highlight html%}
{% endhighlight %}