Jquery datepicker won't allow to change date on a disabled textbox.

Question

I'm using a datepicker inside my directive to allow user to pick the date. I have disabled the textbox so as to force the user to only change the date using the datepicker widget. The directive is given below:

function InformationDirective(){
return { 
    restrict: 'A',
    link: function (scope, element, attrs, ngModelCtrl) {
        var date = document.getElementById('reqDate');
        $(date).datepicker($.extend({
            dateFormat: 'm/d/y'
        }
    ));
        $("#calTrigger-btn").click(function(){
            $(date).datepicker("show");

        });         
    }
 };
}

The HTML is as below:

<div information-directive>
   <input   id="reqDate"
            ng-model="date"
            type="text"
            value="{{reqDate}}"
            disabled/>  
    <div type="button" id="calTrigger-btn">
         <img id="calendar-img" src="css\images\calendar.gif"></img>
    </div>                                                                  
</div>

For some reason my datepicker will only allow me to pick the date once, after the that the button won't launch the widget again. the $("#calTrigger-btn").click(function() is being called every time I click the button but the widget won't be called after the first selection. The directive and everything are being added to the html, the only problem is that I can't use the datepicker after picking the date once. I am using Jquery-ui-1.8.15 and will not be able to change it to a new one. I wanted to know whether there is any way I can resolve this problem. Any help provided is appreciated. Thank you.

Answer 1

It looks like you're using angular js (which I know nothing about) but if you can set it up as below instead, it works as expected.

 $('#reqDate').datepicker($.extend({ dateFormat: 'm/d/y' } )); $("#calTrigger-btn").click(function(){ $('#reqDate').datepicker("show"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <div information-directive> <input id="reqDate" ng-model="date" type="text" value="" disabled/> <div type="button" id="calTrigger-btn"> <img id="calendar-img" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png" width=25 height=25></img> </div> </div>