Question

I have textbox with datepicker. according to my requirement user must select either first tuesday or second tuesday of the month. So i disabled the rest of the dates using following code and its working fine.

var dates_allowed = {
      '2012-07-24': 1,
      '2012-08-14': 1,
      '2012-08-21': 1,
      '2012-09-11': 1,
  '2012-09-18': 1,
      '2012-10-09': 1,
      '2012-10-16': 1
};
$("#" + webinarDate.id).datepicker({
    // called for every date before it is displayed
    beforeShowDay: function(date) {

        // prepend values lower than 10 with 0
        function addZero(no) {
            if (no < 10){
              return "0" + no;
            }  else {
              return no; 
            }
        }

        var date_str = [
            addZero(date.getFullYear()),
            addZero(date.getMonth() + 1),
            addZero(date.getDate())      
        ].join('-');

        if (dates_allowed[date_str]) {
            return [true, 'good_date', 'This date is selectable'];
        } else {
            return [false, 'bad_date', 'This date is NOT selectable'];
        }
    }
});

But problem is user can enter date in textbox instead of using datepicker(Which i dont want that). How to restrict the user to select date from datepicker instead entering manually. i hope you understand..

Answer 1

You mean this?

You can set the datepicker input text as readonly using the following.

In your case will be to this element: $("#" + webinarDate.id)

---

<input type='text' id='datepickerTxt' readonly='true'>

Or:

$("#datepickerTxt").attr('readonly', 'true');

Or:

$("#datepickerTxt").keypress(function(e){ e.preventDefault(); });

In modern jQuery versions:

$("#datepickerTxt").prop('readonly', 'true');