您当前位置:首页 > 文章中心 > HTML5+CSS3 > kendo UI

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

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-11-07   阅读次数: 19735   查看权限: 游客查看

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

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

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

Configuration配置项

1、动画 animation
类型:Object
说明:配置打开或者关闭下拉日期控件的特效。如果设值为false,打开或者关闭列表时将无动画。
<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
类型:String
默认:en-US
说明:配置日历显示什么语言,kendoui配有几十种语言包,详细的参看js\cultures文件夹。
<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").kendoDatePicker({
        culture: "zh-CN" //指定为中文
    });
</script>
4、日期组 dates
类型:Array
说明:将用于在月视图模板下的日期集合。注意它不是自动显示在月视图下的,需要使用month.content来渲染。
<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
类型:String
说明:设置导航的深度级,可选以下值:
  1. "month":显示本月所有日期
  2. "year":显示本年所有月份
  3. "decade":显示这个区间的十个年头
  4. "century":显示本世纪的每个十年区间
<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").kendoDateTimePicker({
        depth: "year"
    });
</script>
6、脚部内容 footer
类型:String|Function
说明:设置日历脚部模板内容,设值为false时将隐藏脚部内容。
<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>
7、格式化 format
类型:String
默认:MM/dd/yyyy h:mm tt
说明:格式化日历使用value()方法返回的值。
<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").kendoDateTimePicker({
        format: "yyyy/MM/dd hh:mm tt"
    });
</script>
8、最大日期 max
类型:Date
默认:2099, 11, 31
说明:指定日历可显示的最大日期。
9、最小日期 min
类型:Date
默认:1900, 0, 1
说明:指定日历可显示的最小日期。
<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").kendoDateTimePicker({
        min: new Date(2011, 0, 1),
	max: new Date(2021, 0, 1)
    });
</script>
10、月视图 month
类型:Object
说明:月视图下每个格子的模板。
11、月视图内容 month.content
类型:String
说明:默认月视图下每个格子只显示对应的日期,而通过此属性可修改本月日期范围内每个格子的显示内容。
<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
类型:String
说明:指定不在max/min范围内的月视图下每个格子显示的内容,默认是为空。
<div id="datetimepicker"></div>
<script>
    $("#datetimepicker").kendoDateTimePicker({
        month: {
           empty: '-' //指定无效日期里显示 "-"
        }
    });
</script>
13、默认初始视图 start
类型:String
默认:month
说明:指定初始时显示的视图。可选值有"month"、 "year"、 "decade"、 "century"四种视图。
<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>
15、格式解析 parseFormats
类型:Array
说明:指定一系列值用于解析value方法获取的值或者用户直接输入的值。
<input id="datetimepicker" />
<script>
    $("#datetimepicker").kendoDatePicker({
        format: "yyyy/MM/dd hh:mm tt",
        parseFormats: ["MMMM yyyy","HH:mm"]//format的值也会自动加入此数组
    });
</script>
16、分钟间隔interval
类型:Number
默认:30  (分钟)
说明:指定小时分钟下拉列表之间的分钟间隔。
<input id="datetimepicker" />
<script>
$("#dateTimePicker").kendoDateTimePicker({
    interval: 15 //15分钟
});
</script>
17、时间格式化 timeFormat
类型:String
默认:h:mm tt
说明:指定小时分钟值的格式。
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    timeFormat: "HH:mm" //24小时制格式
});
</script>

 

以上配置可通过options获取:

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

Methods 方法

<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 快捷键

关闭了日期选择控件时

序号 快捷键 作用
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 选中本视图的最后一格

打开了时间选择控件时

序号 快捷键 作用
1 up + arrow 选择上一个可选时间
2 down + arrow 选择下一个可选时间

在线测试: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

    愤怒
95.24%(40)
4.76%(2)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐