jquery-ui - jQuery 日期选择器输入字段设置为 "not clickable"

Question

我有两个日期选择器输入字段 - 一个设置为事件状态，第二个设置为 readonly，但看起来 readonly 不适用于日期选择器。代码如下。

HTML:

    <fieldset>
        <label for="dataStart">Start Date</label>
        <input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
    </fieldset>
    <fieldset>
        <label for="dataEnd">End Date</label>
       <input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />
    </fieldset>
<div>Days counted between dates: <span id="calculated"></span></div>

jQuery:

$(document).ready(function() {
     $("#dataStart").datepicker({
        minDate: '+1d',
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        onSelect: function(date){
            var dates = date.split('/');
            var lastDate = new Date(dates[2], dates[0], 0);
            var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
            m = ('0'+ (m+1)).slice(-2);

            $('#dataEnd').val(m+'/'+d+'/'+y);

            var start = $('#dataStart').datepicker('getDate');
            $('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
            var end = $('#dataEnd').datepicker('getDate');
            var days   = ((end - start)/1000/60/60/24)+1;

            $('#calculated').text(days);          
        }
    });
});

和JSFiddle

Answer 1

如果您在第二个输入上不需要日期选择器，那么您可以不像当前所做的那样实例化它，而是使用它:

删除:

$('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);

并更改:

var end = $('#dataEnd').datepicker('getDate');

至:

var end = new Date($('#dataEnd').val());

<强> jsFiddle example