jQuery UI Datepicker日期范围 [英] jQuery UI Datepicker Date Range

问题描述

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

I am using the jQuery UI plugin with the Datepicker function, to set a date range. The example provided on their page (http://jqueryui.com/demos/datepicker/date-range.html) sets the range based on input 'id'; however, I'd like to set the range based on 'class' as my form 'clones' the div to add additional inputs, making the 'id' fields unique on each clone. When I change the JavaScript to use 'class' instead of 'id', the ranges are no longer functioning.

任何想法？

JavaScript：

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>

推荐答案

要检查你的元素是否有类，这样做：

To check to see if your element has a class, do this:

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

或

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

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

The name of the property of DOM elements is "className", not "class" (confusingly). Also it makes your code fragile to check for the class name to be equal to some string, because you never know if you might want to add another class (like "required" for example). Thus you should always check either with jQuery or with some other method that accounts for the possibility that an object can have many classes.

此外，您还可以查看Filament jQuery的日期范围选择器。

Also you may want to check out the Filament Group's date range picker for jQuery.

这篇关于jQuery UI Datepicker日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！