Datepicker必需但在输入字段中不可更改

时间:2014-11-04 14:16:58

标签: jquery datepicker readonly required

我使用jquery datepicker,我无法找到解决问题的方法。

$( "#birthday").datepicker({
                        maxDate: '0-15y',
                        minDate: '0-30y',
                        dateFormat: 'yy-mm-dd',
                        defaultDate: '0 -18y',
                        changeMonth:true,
                        changeYear:true
                        });

我有一个带有datepicker的必填输入字段,其中我定义了一个最小日期和一个最大日期。 在弹出窗口它工作正常,但我可以在最小日期之前或最大日期之后的日期更改输入框中的日期。

我试图将该字段设置为只读,因此没有人可以在输入字段中更改它,但是在弹出窗口中,但是我的字段不再需要了。

<input type='text' name='birthday' id='birthday' value='".$birthday."' placeholder='YYYY-MM-DD' style='width:100%;' required ".$pat_date.">

感谢您的帮助

BG

2 个答案:

答案 0 :(得分:4)

字段不能同时为requiredreadonly

相反,当用户在关注<input>时按下某个键时,您可以阻止默认操作:

$( "#birthday").datepicker({
    maxDate: '0-15y',
    minDate: '0-30y',
    dateFormat: 'yy-mm-dd',
    defaultDate: '0 -18y',
    changeMonth:true,
    changeYear:true
}).on('keypress', function(e){ e.preventDefault(); });

JSFiddle

答案 1 :(得分:0)

向字段添加事件处理程序,以便在字段具有焦点时,它将当前日期存储在字段中。向字段添加另一个事件处理程序,以便在字段更改后,它可以检查字段中的新日期,并查看它是否有效。如果不是,那么您可以恢复到旧日期,或者您可以向用户发出警告。

这样,该字段可以保持可编辑状态,因此他们可以根据需要手动输入日期,并且仍然可以在那里进行一些验证。