How to make a delivery date field in a jQuery("#delivery_date").datepicker({ joomla plugin display only

Question

I am using a date-time plugin for Joomla and I want the date field "display only", so that the customer cannot enter his own date, but has to choose from the calender pop-up. How can I do this?

The jQuery looks like this:

jQuery("#delivery_date").datepicker({
    minDate: "1",
    <!-- changed by jack -->
    maxDate: "+2W",
    firstDay: 1,
    changeFirstDay: false,
    dateFormat: "dd-mm-yy",
    onSelect: function(dateText) {                                    

jQuery.cookies.set("delivery_date",dateText);                                   

jQuery.cookies.set("delivery_time",dateText);                           

jQuery.cookies.set("delivery_totime",dateText);                              

},
beforeShowDay: blockDays
});

Answer 1

I think that all you're looking for is already answered here by Matthew Jacobs.

Simply add the "readonly" attribute with the "readonly" value to the jQuery UI DatePicker input

<input type="text" name="datepicker" id="datepicker" readonly="readonly" />

Update 5.4.2015

Another option is to add the attribute dynamically as you don't know where the input actually is. Change your jQuery code like this

jQuery("#delivery_date").datepicker({
    minDate: "1",
    <!-- changed by jack -->
    maxDate: "+2W",
    firstDay: 1,
    changeFirstDay: false,
    dateFormat: "dd-mm-yy",
    onSelect: function(dateText) {

jQuery.cookies.set("delivery_date",dateText);

jQuery.cookies.set("delivery_time",dateText);

jQuery.cookies.set("delivery_totime",dateText);

},
beforeShowDay: blockDays
});
jQuery("#delivery_date").attr('readonly', 'readonly');

and it should do the job as well. Notice the last line, that's the only difference between this and your code. It will add the readonly attribute with the value "readonly" as I suggested before the update.