jQuery UI Datepicker日期范围

问题描述：

我正在使用带Datepicker函数的jQuery UI插件来设置日期范围。在其页面上提供的示例（http://jqueryui.com/demos/datepicker/date-range.html）根据输入'id'设置范围;然而，我想设置基于'class'的范围作为我的表单'克隆'div来添加额外的输入，使'id'字段在每个克隆上都是唯一的。当我将JavaScript更改为使用'class'而不是'id'时，范围不再起作用。jQuery UI Datepicker日期范围

的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错误？如果是这样，哪些错误？他们做错了什么吗？如果是这样，怎么样？ – Pointy

答

要检查，看看你的元素有一个类，这样做：

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

或

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

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

另外你可能想看看Filament Group的date range picker的jQuery。

jQuery UI Datepicker日期范围

相关推荐