码迷,mamicode.com
首页 > Web开发 > 详细

jquery UI datepicker时间控件的使用

时间:2016-06-10 19:11:39      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

参考:

http://api.jqueryui.com/datepicker/#method-show 英文

http://www.helloweba.com/view-blog-168.html  中文

http://jqueryui.com/datepicker/

效果:

技术分享

常用场合:

  1.输入框

  2.div

使用方法:

1.限制日期

技术分享
$("#resultDiv").datepicker({
                onSelect: function (dateText, inst) {
                    //代码:选择日期后触发的事件
                },
                minDate: new Date(),//最小日期
                maxDate: new Date($("#DateLimit").val())//最大日期
            });
技术分享

 2.中文

技术分享
jQuery(function ($) {
        $.datepicker.regional[zh-CN‘] = {
            closeText: 关闭,
            prevText: <上月,
            nextText: 下月>,
            currentText: 今天,
            monthNames: [一月‘, 二月‘, 三月‘, 四月‘, 五月‘, 六月,
                七月‘, 八月‘, 九月‘, 十月‘, 十一月‘, 十二月],
            monthNamesShort: [‘, ‘, ‘, ‘, ‘, ,
                ‘, ‘, ‘, ‘, 十一‘, 十二],
            dayNames: [星期日‘, 星期一‘, 星期二‘, 星期三‘, 星期四‘, 星期五‘, 星期六],
            dayNamesShort: [周日‘, 周一‘, 周二‘, 周三‘, 周四‘, 周五‘, 周六],
            dayNamesMin: [‘, ‘, ‘, ‘, ‘, ‘, ],
            weekHeader: ,
            dateFormat: yy-mm-dd,
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: 
        };
        $.datepicker.setDefaults($.datepicker.regional[zh-CN]);
    });
技术分享

 3.时间段查询用法

技术分享
$(document).ready(function () {
         $(‘#SearchStartDT‘).datepicker({
            dateFormat: ‘yy-mm-dd‘,
            onSelect: function (startDate) {
                var $startDate = $("#SearchStartDT");
                var $endDate = $(‘#SearchEndDT‘);
                var endDate = $endDate.datepicker(‘getDate‘);
                if (endDate < startDate) {
                    $endDate.datepicker(‘setDate‘, startDate - 3600 * 1000 * 24);
                }
                $endDate.datepicker("option", "minDate", startDate);
            }
        });
        $(‘#SearchEndDT‘).datepicker({
            dateFormat: ‘yy-mm-dd‘,
            onSelect: function (endDate) {
                var $startDate = $("#SearchStartDT");
                var $endDate = $(‘#SearchEndDT‘);
                var startDate = $startDate.datepicker("getDate");
                if (endDate < startDate) {
                    $startDate.datepicker(‘setDate‘, startDate + 3600 * 1000 * 24);
                }
                $startDate.datepicker("option", "maxDate", endDate);
            }
        });
        $("#SearchStartDT").datepicker("option", "maxDate", new Date());
        $("#SearchEndDT").datepicker("option", "maxDate", new Date());
    });
技术分享

4.只显示月份

 多种解决方法:http://www.itstrike.cn/Question/c7c3214d-0a6b-4d89-8b4f-f7753763e927.html

 

jquery UI datepicker时间控件的使用

标签:

原文地址:http://www.cnblogs.com/huangyin1213/p/5574036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!