jquery UI datepicker时间控件的使用-白红宇

jquery UI datepicker时间控件的使用

阅读量：6900 次

发布时间：2019-06-27

本文共 2589 字，大约阅读时间需要 8 分钟。

参考：

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());    });