Search code examples
jquerydatepickerreadonlyrequired

Datepicker required but not changeable in input-field

i use jquery datepicker and i can't find a solution for my problem.

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

i have a required input field with datepicker where i defined a min-date and a max-date. In the pop-up it works fine, but i can change the date in the input box in a date before the min-date or after the max-date.

i tried to set the field as readonly so nobody can change it in the input field, but over the popup, but then my field isn't required any more.

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

thanks for your help

BG

Solution

  • Fields cannot be both required and readonly.

    Instead, you could prevent the default action when a user presses a key when focused on your <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