kendoUI系列教程之datepicker日期选择

【kendo UI】

下载

新闻

文章

kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之datepicker日期选择。

因datepicker是建立在Calendar基础上的，所以配置与方法几乎一样，使用例子：

<div id="email-settings">
    <div style="margin-top: -6px; margin-left: 180px">
        <input id="datepicker" value="10/10/2011" style="width:150px;" />
    </div>
    <div style="margin-top: 59px; margin-left: 180px">
        <input id="monthpicker" value="November 2011" style="width:150px" />
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#datepicker").kendoDatePicker();//默认配置
        $("#monthpicker").kendoDatePicker({
            start: "year",//开始视图
            depth: "year",//设置最小视图，也就是选择值时的视图
            format: "MMMM yyyy"//格式化返回值的格式
        });
    });
</script>

Configuration配置项

1、动画 animation

类型：Object

说明：配置打开或者关闭下拉日期控件的特效。如果设值为false，打开或者关闭列表时将无动画。

<script>
//关闭动画示例
$("#datepicker").kendoDatepicker({
  animation: false
});
//指定打开与关闭时的动画效果
$("#datepicker").kendoDatepicker({
  animation: {
   close: {
     effects: "fadeOut zoom:out",//关闭时动画特效类型，多个特效用空格隔开。
     duration: 300 //关闭时动画持续的时间，单位是毫秒。
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
});
</script>

2、aria-label值模板 ARIATemplate

类型：String
默认："Current focused date is #=kendo.toString(data.current, 'D')#"
说明：配置输入框aria-label返回值。data-* 这些自定义数据属性允许您创建属性来与在您自己的网站上运行的脚本共享数据。它们还未被一般软件使用或采纳。您可以指定任意多个自定义数据属性。

<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
    ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
});
</script>

3、语言 culture

类型：String
默认：en-US

说明：配置日历显示什么语言，kendoui配有几十种语言包，详细的参看js\cultures文件夹。

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatePicker({
        culture: "zh-CN" //指定为中文
    });
</script>

4、日期组 dates

类型：Array
说明：将用于在月视图模板下的日期集合。注意它不是自动显示在月视图下的，需要使用month.content来渲染。

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatePicker({
        value: new Date(2000, 10, 1),
        dates: [
            new Date(2000, 10, 10, 10, 0, 0),
            new Date(2000, 10, 10, 30, 0)
        ] //月视图模板可渲染这些日期
    });
</script>

5、导航深度 depth

类型：String
说明：设置导航的深度级，可选以下值：

"month"：显示本月所有日期
"year"：显示本年所有月份
"decade"：显示这个区间的十个年头
"century"：显示本世纪的每个十年区间

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        depth: "year"
    });
</script>

6、脚部内容 footer

类型：String|Function
说明：设置日历脚部模板内容，设值为false时将隐藏脚部内容。

<div id="datepicker"></div>
<script id="footer-template" type="text/x-kendo-template">
    Today - #: kendo.toString(data, "d") #
</script>
<script>
    $("#datepicker").kendoDatepicker({
        footer: kendo.template($("#footer-template").html())
    });
</script>
<!--或者-->
<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        footer: "Today - #: kendo.toString(data, 'd') #"
    });
</script>

7、格式化 format

类型：String
默认：MM/dd/yyyy

说明：格式化日历使用value()方法返回的值。

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        format: "yyyy/MM/dd"
    });
</script>

8、最大日期 max

类型：Date
默认：2099, 11, 31

说明：指定日历可显示的最大日期。

9、最小日期 min

类型：Date
默认：1900, 0, 1

说明：指定日历可显示的最小日期。

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        min: new Date(2011, 0, 1),
	max: new Date(2021, 0, 1)
    });
</script>

10、月视图 month

类型：Object
说明：月视图下每个格子的模板。

11、月视图内容 month.content

类型：String
说明：默认月视图下每个格子只显示对应的日期，而通过此属性可修改本月日期范围内每个格子的显示内容。

<div id="datepicker"></div>
<script id="cell-template" type="text/x-kendo-template">
    <div class="#= data.value < 10 ? 'exhibition' : 'party' #"></div>
    #= data.value #
</script>
<script>
    $("#datepicker").kendoDatepicker({
        month: {
           content: $("#cell-template").html()
        }
    });
</script>

12、月视图空格子内容 month.empty

类型：String
说明：指定不在max/min范围内的月视图下每个格子显示的内容，默认是为空。

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        month: {
           empty: '-' //指定无效日期里显示 "-"
        }
    });
</script>

13、默认初始视图 start

类型：String
默认：month
说明：指定初始时显示的视图。可选值有"month"、 "year"、 "decade"、 "century"四种视图。

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        start: "year"
    });
</script>

14、默认值 value

类型：Date
默认：null

说明：指定初始时日历选中的日期。

15、格式解析 parseFormats

类型：Array
说明：指定一系列值用于解析value方法获取的值或者用户直接输入的值。

<input id="datepicker" />
<script>
    $("#datepicker").kendoDatePicker({
        format: "yyyy/MM/dd",
        parseFormats: ["MMMM yyyy"]//format的值也会自动加入此数组
    });
</script>

以上配置可通过options获取：

<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
var options = datepicker.options;
<script>

Methods 方法

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker();
    var datepicker = $("#datepicker").data("kendoDatepicker");
    datepicker.enable(false); //设置是否可用。
    datepicker.readonly(true); //设置是否只读。
    var max = datepicker.max();//获取日历最大日期
    datepicker.max(new Date(2100, 0, 1));//设置日历最大日期
    var min = datepicker.min();//获取日历最小日期
    datepicker.min(new Date(1999, 0, 1));//设置日历最小日期
    var value = datepicker.value(); //获取日历日期。
    datepicker.value(new Date()); //设置日历日期。
    datepicker.destroy();//销毁日历，删除日历所有事件与方法
    datepicker.open(); //打开日期弹窗。
    datepicker.close(); //关闭日期弹窗。
</script>

Events 事件

<div id="datepicker"></div>
<script>
    $("#datepicker").kendoDatepicker({
        open: function() {
            e.preventDefault(); //禁止打开
        },
        close: function(e) {
            e.preventDefault(); //禁止关闭
        },
        change: function() {
            var value = this.value();//改变值时触发
        }
    });
    //这些事件都可使用bind绑定。
</script>

支持RTL显示。

Keyboard Navigation 快捷键

关闭了日期选择控件时

序号	快捷键	作用
1	alt + w	获取焦点。需要设置html5的accesskey属性
2	enter	触发change事件
3	esc	关闭日期控件弹窗
4	alt + down arrow	打开日期控件弹窗
5	alt + up arrow	关闭日期控件弹窗

打开了日期选择控件时

序号	快捷键	作用
1	enter	如果在月视图下将选择高亮日期，其他视图将向下翻视图。
2	left arrow	高亮前一天
3	right arrow	高亮后一天
4	up arrow	高亮同列上一个日期
5	down arrow	高亮同列下一个日期
6	ctrl + left arrow	向左切换视图
7	ctrl + right arrow	向右切换视图
8	ctrl + up arrow	向上切换视图
9	ctrl + down arrow	向下切换视图
10	home	选中本视图的第一格
11	end	选中本视图的最后一格