CODEWITHSUNDEEP
jquery
Srav
Srav

Reputation: 67

disable textbox to enter values

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..

Upvotes: 1

Views: 2870

Answers (4)

Mahesh
Mahesh

Reputation: 3997

in ASPX - Drag and drop the AJAX Calender Extender, Change ControlToValidate to ID of the txt_Date (date text box), Change Enable Client Script to False

Then

In The TextBox Property, Simply change the Read-Only property to TRUE..

(Make Sure You already drag the ScriptManager for the Extenders to Work)...

Now you could only change the date using the Calender Extender, hence invalid dates Could Not be entered..

Upvotes: 0

Oscar Jara
Oscar Jara

Reputation: 14187

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');

Upvotes: 2

pfwd
pfwd

Reputation: 1168

I would see this answer: jQuery Date Picker where text input is read only Add an onclick event and disable the input

Upvotes: 0

Toby
Toby

Reputation: 8792

Is a date picker the correct solution here? It feels more like a dropdown list with the next lot of dates selectable.

If it needs to be then you can target user typing with an onblur and do your test.

Or if onfocus is triggered disable keyboard inputs.

Upvotes: 0

Related Questions