Question

我有两个用于datepicker的输入字段 - 一个设置为活动，第二个设置为readonly，但看起来readonly无法使用datepicker。代码如下。

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

jQuery datepicker输入字段设置为＆＃34;不可点击＆＃34;

1 个答案: