如何将只读设置为日期选择器？答案

【问题标题】：How to set readonly to a datepicker?如何将只读设置为日期选择器？
【发布时间】：2015-10-15 06:57:18
【问题描述】：

我有以下 html 表格布局：

<table id="mytable">
<tbody>
<tr><td rowspan="2">Row text</td><td><input type="text" value="" readonly /></td><td><input type="text" value="" readonly /></td><td><input type="text" value="" readonly /></td></tr>
<tr><td><input type="text" value="" /></td><td><input type="text" value="" /></td><td><input type="text" value="" /></td></tr>
</tbody>
</table>

jQuery datepicker 附加在表格行的每个输入字段中，但第一行的所有输入字段都是只读的。现在，当用户从第二行中选择任何日期时，它将向所选日期添加 30 天，并通过 jQuery 将其放入第一行的相应输入字段，如下所示：

$('table#mytable > tbody> tr > td > input[type="text"]').datepicker({
      dateFormat: 'dd/mm/yy',
      changeMonth: true,
      changeYear: true,
       yearRange: '1900:2016',
        onClose: function (){
           var thisRow = $(this).closest('tr');
           var thisCell = $(this).closest('td').index();
           var thisDate = $(this).datepicker('getDate');
           thisDate.setDate(thisDate.getDate() + 30);
          thisRow.prev().find('td:eq(' + (thisCell + 1) + ') input[type="text"]').datepicker('setDate', thisDate);
        });
});

我在这里面临两个问题：

1) 我想以某种方式设置第一行输入的日期选择器，以便它不会在单击时打开日期选择器（它只会用于显示从第二行中选择的日期+30 天）。即第一行的日期选择器将是只读的。

2) 是否我上面的代码

thisRow.prev().find('td:eq(' + (thisCell + 1) + ') input[type="text"]').datepicker('setDate', thisDate);

对所选日期增加30天并在第一行的相应输入字段中显示该日期是否有效？

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

$("#datepicker").datepicker(

).attr('readonly','readonly');

【讨论】：

【解决方案2】：

$('.datepicker').datepicker('disable');

其中.datepicker 是日期选择器的类。

【讨论】：

好的，谢谢，它解决了我的第一个问题。但是第二个 [(2)] 仍然悬而未决。所选日期+30 天未出现在第一行的相应单元格上。我认为我的选择器不正确。请也帮助解决这个问题。

【解决方案3】：

对于选择的日期增加 30 天，您可以尝试以下代码。

 $('table#mytable > tbody> tr > td > input[type="text"]').datepicker({
        onClose: function(selectedDate, inst) { 
        var d =new Date(selectedDate);
        var day=d.getDate();
        var month=d.getMonth();
        var year=d.getFullYear();
        $(this).datepicker('setDate',new Date(year,month,day+30) );
        }
  });

希望这会对你有所帮助。

【讨论】：