CODEWITHSUNDEEP
jqueryasp.netjquery-uiwebforms
Musikero31
Musikero31

Reputation: 3153

JQuery UI date picker does not disable

Need help on this. I cannot disable my date picker in jquery. I did my research already but to no avail. Below is the code which does not enable/disable the datepicker. [UPDATED]

    <script type="text/JavaScript">
    function pageLoad() {

        $(function () {
            $('#<%=TextBox_EventStartDate.ClientID %>').datepicker({
                showOn: 'button',
                buttonImage: '../Images/CalendarIcon1.gif',
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                dateFormat: 'dd/mm/yy'
            });

        });

        $(function () {
            $('#<%=TextBox_EventEndDate.ClientID %>').datepicker({
                showOn: 'button',
                buttonImage: '../Images/CalendarIcon1.gif',
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                dateFormat: 'dd/mm/yy'
            });
        });

        $("#<%=CheckBox_PayEvent.ClientID %>").click(function () {
            if ($("#<%=CheckBox_PayEvent.ClientID %>").is(":checked")) {
                $("#<%=TextBox_EventStartDate.ClientID %>").attr('readonly', true);
                $("#<%=TextBox_EventStartDate.ClientID %>").datepicker("disable");

                $("#<%=TextBox_EventEndDate.ClientID %>").attr('readonly', true);
                $("#<%=TextBox_EventEndDate.ClientID %>").datepicker("disable");
            }
            else {
                $("#<%= TextBox_EventStartDate.ClientID %>").attr('readonly', false);
                $("#<%= TextBox_EventStartDate.ClientID %>").datepicker("enable");

                $("#<%= TextBox_EventEndDate.ClientID %>").attr('readonly', false);
                $("#<%= TextBox_EventEndDate.ClientID %>").datepicker("enable");
            }
        });
    }

</script>

Thanks for the help!

Upvotes: 0

Views: 4970

Answers (6)

Brandi
Brandi

Reputation: 1579

Try putting the function inside the disable logic. For example, I have a situation where I want the datepicker gone if the attached textbox is disabled that looks like this:

 $(document).ready(function () {
    //Turn off datepicker if the textbox has been disabled.
    if(document.getElementById('<%=txtStartDate.ClientID%>').disabled == true){
        $("#txtStartDate").datepicker('disable');
    }
    else { // Otherwise, enable and set up the .datepicker function 
        $("#txtStartDate").datepicker('enable');

        // .datepicker function goes here
        $('#<%=txtStartDate.ClientID%>').datepicker({
        showOn: "button", 
        buttonImage: "/Admin/Images/calendar.gif", 
        buttonImageOnly: true,
        }); 
    }      
});

I know the post is old, but hope that helps.

Upvotes: 1

Serge
Serge

Reputation: 353

2 ways that worked for me:

$( "#datepicker" ).datepicker().datepicker('disable'); //disable [not disabled]
or .datepicker("disable");

No other methods works for me:

.datepicker("disabled"); 
.dpSetDisabled(false);
.datepicker( "option", "disabled", true );

I use jQuery 1.9

Upvotes: 5

thazard
thazard

Reputation: 17

A little late with this answer but in case this is helpful for anyone else, I stumbled across this same issue and the common solution posted online .datepicker("disable") did not work for me either

I looked over the datePicker source and found the following, which did work for me. Maybe the correct answer is version dependent.

To disable control

$("#<%= TextBox_EventStartDate.ClientID %>").dpSetDisabled(true);

To enable control

$("#<%= TextBox_EventStartDate.ClientID %>").dpSetDisabled(false);

Upvotes: 2

Fraz Sundal
Fraz Sundal

Reputation: 10448

The reason which i understand is when you check/uncheck checkbox it postbacks the page and set the datepicker again to textboxes. Try this

    <script type="text/JavaScript">
    function pageLoad() {

        $(function () {
            $('#<%=TextBox_EventStartDate.ClientID %>').datepicker({
                showOn: 'button',
                buttonImage: '../Images/CalendarIcon1.gif',
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                dateFormat: 'dd/mm/yy'
            });

        });

        $(function () {
            $('#<%=TextBox_EventEndDate.ClientID %>').datepicker({
                showOn: 'button',
                buttonImage: '../Images/CalendarIcon1.gif',
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                dateFormat: 'dd/mm/yy'
            });
        });

        $("#<%=CheckBox_PayEvent.ClientID %>").click(function () {
            if ($("#<%=CheckBox_PayEvent.ClientID %>").is(":checked")) {
                $("#<%=TextBox_EventStartDate.ClientID %>").attr('readonly', true);
                $("#<%=TextBox_EventStartDate.ClientID %>").datepicker("disable");

                $("#<%=TextBox_EventEndDate.ClientID %>").attr('readonly', true);
                $("#<%=TextBox_EventEndDate.ClientID %>").datepicker("disable");
            }
            else {
                $("#<%= TextBox_EventStartDate.ClientID %>").attr('readonly', false);
                $("#<%= TextBox_EventStartDate.ClientID %>").datepicker("enable");

                $("#<%= TextBox_EventEndDate.ClientID %>").attr('readonly', false);
                $("#<%= TextBox_EventEndDate.ClientID %>").datepicker("enable");
            }
            return false; //This line will stop the postback to occur
        });
    }

</script>

Upvotes: 0

Greg Rozmarynowycz
Greg Rozmarynowycz

Reputation: 2085

using ({disabled: true}) definitely does not work, datepicker("disable") is what will do it.

Are you sure that the conditional statement is being met and the click event is being fired; are you sure the code is running?

Is it possible the space is being echoed by the server side code, so that ID being passed to JQuery is like this: "# ElementID"?

Upvotes: 0

Willy
Willy

Reputation: 1838

try 

$("#<%= TextBox_EventStartDate.ClientID %>").datepicker("disable");

Upvotes: 0

Related Questions