Jquery datepicker限制输入的小技巧

最新推荐文章于 2025-06-16 13:27:24 发布

原创最新推荐文章于 2025-06-16 13:27:24 发布 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#datepicker #javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用JQuery Datepicker插件实现日期区间选择的方法，包括中文本地化配置、限制终止日期不早于起始日期等功能。

PS：需要限制键盘输入的童鞋请看本文结尾部分

Jquery的datepicker是常用的网页日期选择控件，相对也很简单，但仍有一些问题会让萌新感到棘手，这里放一个我最近用到的写法，可能会解决一些问题。

首先是引用控件，以及中文本地化设置。然后客户的要求是，有起始日期和终止日期，既能通过键盘输入日期，又可以通过光标点击来选择，并且终止日期不能早于起始日期。

<script type="text/javascript">
    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,
            changeMonth: true,
            changeYear: true,
            yearSuffix: '年'
        };
        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
        $('.datepicker').bind('change', function () {
            $(this).datepicker('option', 'dateFormat', 'yy/mm/dd');
        });
        $('.datestart').bind('change', function () {
            $('.datefinish').datepicker('option', 'minDate', this.value);
        });
    });
</script>

这样，在需要选择从几月几号到几月几号的情况下，只需要对起始日期设置class='datepicker datestart'，对终止日期设置class='datepicker datefinish'，就可以起到自动限制终止日期不超过起始日期。

<input type="text" id="DATE_START" class="datepicker datestart" name="DATE_START"/>
&nbsp;&nbsp;—&nbsp;&nbsp; 
<input type="text" id="DATE_FINISH" class="datepicker datefinish" name="DATE_FINISH"/>

另外，我发现很多朋友都是在搜索如何禁止键盘输入datepicker时点进我这篇文章的，在这里还是说一下：只需要在定义datepicker时指明readonly='readonly'属性，就可以禁止键盘输入了：

<input type="text" class="datepicker datestart" name="DATE_BEGIN" readonly="readonly" />
<label style="width: 18px; text-align: center">—</label>
<input type="text" class="datepicker datefinish" name="DATE_END" readonly="readonly"/>