jQuery UI Datepicker 日期范围答案

【问题标题】：jQuery UI Datepicker Date RangejQuery UI Datepicker 日期范围
【发布时间】：2011-11-06 16:29:46
【问题描述】：

我正在使用带有 Datepicker 功能的 jQuery UI 插件来设置日期范围。他们页面上提供的示例 (http://jqueryui.com/demos/datepicker/date-range.html) 根据输入“id”设置范围；但是，我想设置基于“类”的范围，因为我的表单“克隆”了 div 以添加额外的输入，使每个克隆的“id”字段都是唯一的。当我将 JavaScript 更改为使用 'class' 而不是 'id' 时，范围不再起作用。

JavaScript：

<script src="../../scripts/jquery-1.6.4.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.core.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.datepicker.js"></script>
<script>
        $(function() {
            var dates = $( ".start_date, .end_date" ).datepicker({
                onSelect: function( selectedDate ) {
                    var option = this.class == "start_date" ? "minDate" : "maxDate",
                        instance = $( this ).data( "datepicker" ),
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings );
                    dates.not( this ).datepicker( "option", option, date );
                }       
            }); 
        });
</script>

HTML：

<div>
    <label> Start Date:</label>
    <input type="text" name="start_date1" id="start_date1" class="start_date" />
</div>
<div>
    <label> End Date:</label>
    <input type="text" name="end_date1" id="end_date1" class="end_date" />
</div>

【问题讨论】：

您可能需要详细说明日期范围“不再起作用”的方式的详细信息。是否存在 JavaScript 错误？如果是这样，有什么错误？他们做错事了吗？如果有，怎么做？

标签： javascript jquery jquery-ui date

【解决方案1】：

要检查您的元素是否有类，请执行以下操作：

 if ($(this).is('.start_date')) {

或

 if ($(this).hasClass('start_date')) {

DOM 元素的属性名称是“className”，而不是“class”（令人困惑）。此外，检查类名是否等于某个字符串也会使您的代码变得脆弱，因为您永远不知道是否要添加另一个类（例如“必需”）。因此，您应该始终使用 jQuery 或其他方法进行检查，以说明一个对象可能有许多类。

您可能还想查看 Filament Group 的 date range picker jQuery。

【讨论】：