kendoUI系列教程之datetimepicker日期时间选择

因datetimepicker是建立在datepicker基础上的多加了一个时间选择，使用例子：

<input id="datetimepicker" style="width:200px;" />
<script>
    $(document).ready(function () {
        $("#datetimepicker").kendoDateTimePicker({
            value:new Date()
        });
    });
</script>

Configuration配置项

1、动画 animation

<script>
//关闭动画示例
$("#datetimepicker").kendoDateTimePicker({
  animation: false
});
//指定打开与关闭时的动画效果
$("#datetimepicker").kendoDateTimePicker({
  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, 'G')#"
说明：配置输入框aria-label返回值。data-* 这些自定义数据属性允许您创建属性来与在您自己的网站上运行的脚本共享数据。它们还未被一般软件使用或采纳。您可以指定任意多个自定义数据属性。

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

3、语言 culture

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

<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").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

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

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

6、脚部内容 footer

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

<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").kendoDateTimePicker({
        format: "yyyy/MM/dd hh:mm tt"
    });
</script>

8、最大日期 max

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

10、月视图 month

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

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

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

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

14、默认值 value

类型：Date
默认：null

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(2011, 0, 1)
});
</script>

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

<input id="datetimepicker" />
<script>
$("#dateTimePicker").kendoDateTimePicker({
    interval: 15 //15分钟
});
</script>

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    timeFormat: "HH:mm" //24小时制格式
});
</script>

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

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

Events 事件

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

支持RTL显示。

Keyboard Navigation 快捷键

关闭了日期选择控件时

打开了日期选择控件时

打开了时间选择控件时

在线测试：http://demos.kendoui.com/web/datetimepicker/index.html

关键词: kendoui,html5,datetimepicker   编辑时间: 2013-11-07 16:43:03

• 

  7

  高兴
• 

  5

  支持
• 

  4

  搞笑
• 

  0

  不解
• 

  1

  谎言
• 

  0

  枪稿
• 

  0

  震惊
• 

  2

  无奈
• 

  0

  无聊
• 

  0

  反对
• 

  0

  愤怒