Question

我有带datepicker的文本框。根据我的要求，用户必须选择该月的第一个星期二或第二个星期二。所以我使用以下代码禁用其余日期，并且工作正常。

var dates_allowed = {
      '2012-07-24': 1,
      '2012-08-14': 1,
      '2012-08-21': 1,
      '2012-09-11': 1,
  '2012-09-18': 1,
      '2012-10-09': 1,
      '2012-10-16': 1
};
$("#" + webinarDate.id).datepicker({
    // called for every date before it is displayed
    beforeShowDay: function(date) {

        // prepend values lower than 10 with 0
        function addZero(no) {
            if (no < 10){
              return "0" + no;
            }  else {
              return no; 
            }
        }

        var date_str = [
            addZero(date.getFullYear()),
            addZero(date.getMonth() + 1),
            addZero(date.getDate())      
        ].join('-');

        if (dates_allowed[date_str]) {
            return [true, 'good_date', 'This date is selectable'];
        } else {
            return [false, 'bad_date', 'This date is NOT selectable'];
        }
    }
});

但问题是用户可以在文本框中输入日期而不是使用datepicker（我不希望这样）。如何限制用户从datepicker中选择日期而不是手动输入。我希望你能理解..

Answer 1

你的意思是？

您可以使用以下方法将datepicker输入文本设置为readonly。

在您的情况下，将使用此元素：$("#" + webinarDate.id)

<input type='text' id='datepickerTxt' readonly='true'>

或者：

$("#datepickerTxt").attr('readonly', 'true');

或者：

$("#datepickerTxt").keypress(function(e){ e.preventDefault(); });

在现代jQuery版本中：

$("#datepickerTxt").prop('readonly', 'true');

Answer 2

日期选择器是否是正确的解决方案？感觉更像下拉列表，可以选择下一批日期。

如果需要，那么您可以使用onblur定位用户输入并进行测试。

如果触发了onfocus，则禁用键盘输入。

Answer 3

我会看到这个答案： jQuery Date Picker where text input is read only 添加onclick事件并禁用输入

Answer 4

ASPX中的

- 拖放AJAX Calender Extender，将ControlToValidate更改为txt_Date的ID（日期文本框），将启用客户端脚本更改为False

然后

在TextBox属性中，只需将Read-Only属性更改为TRUE ..

（确保您已经将ScriptManager拖到扩展器上工作）...

现在您只能使用日历延长器更改日期，因此无法输入无效日期..

禁用文本框以输入值

4 个答案: