Jquery datepicker限制输入的小技巧

　

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"/>

相关阅读

jquery之index与selectedIndex

晚上有时间，继续再写一点，我们来讲一下关于select表单的所有操作，在项目中还是有很多地方需要用到的。 讲select之前先讲一下index（）的

jquery select option 获取下拉框值改变时,选择不同值

有一些场景下，需要有这样一个功能：我们选择下拉框的不同值时，触发函数，该函数可能用到了我们选中的select的value，比如如：需要将该value

Jquery中的$(document).ready()详解

转载：https://blog.csdn.net/u010098331/article/details/62036597window.onload = function(){ alert("welcome"); }语句的作用是

jquery的$().each,$.each 遍历对象和数组

原文链接 http://www.frontopen.com/1394.html在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区

Jquery中each()方法

本文实例讲述了Jquery中find与each方法用法。分享给大家供大家参考。具体如下：一、find()方法jquery选择器非常强大，利用css的命名