Datepicker required but not changeable in input-field

Question

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

Answer 1

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

Answer 2

Add an event handler to the field so that when the field has focus, it stores the current date in the field. Add another event handler to the field so when the field has changed, it can check the new date in the field, and see if it is valid. If it's not, then you can revert to the old date, or you can serve up a warning to the user.

That way the field can remain editable, so they can type in the date manually if they want, and it still has some validation on there that you require.