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

kendoUI系列教程之datepicker日期选择

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

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
说明:设置导航的深度级,可选以下值:
  1. "month":显示本月所有日期
  2. "year":显示本年所有月份
  3. "decade":显示这个区间的十个年头
  4. "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 选中本视图的最后一格

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

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

  • 感到高兴

    5

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
77.78%(7)
22.22%(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自动补齐