限制用户在文本字段中手动输入日期

Question

I use a calender with text field, i want only calender selected value is inserted on text value, other keyboard manual value is not inserted on text box.

<input type="text" name="date_to" value="<?php echo $date_to; ?>" placeholder="To" id="to" class="Original-datepicker" required />

This is my code. when i click on this text box then calender is open and selected value is insert on text value. I want here only calender selected value is used here as text value. Manual value is not inserted here.

I need to restrict user for enter date manually...

i use this jquery code for both my calender or timepicker

$(document).ready(function () {
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });

     $(document).ready(function () {
        $('#onselectExample').timepicker({ 'timeFormat': 'h:i A','minTime': '9:00am', 'maxTime': '9:00pm', });

        $('#onselectTarget').timepicker({ 'timeFormat': 'h:i A','minTime': '9:00am', 'maxTime': '9:00pm', });
    });

i use readonly='true' like:--

" placeholder="To" id="to" class="Original-datepicker" required readonly='true' />

this help me in calender case

but in timepicker case i face same problem..

timepicker is open as dropdown and i select one time option. when i use readonly then dropdown is not open..

Answer 1

You may simply add readonly attribute

<input readonly="readonly" type="text" name="date_to" value="<?php echo $date_to; ?>" placeholder="To" id="to" class="Original-datepicker" required />

and for timepicker, you can simply prevent to keypress event, See Demo

$('#onselectExample,#onselectTarget').keypress(function(event){
    event.preventDefault();});
});