Search code examples
javascriptangularjstwitter-bootstrapdateangular-strap

AngularStrap data-start-date not allowing date selection


I've got this angular datepicker

 <input type="text" bs-datepicker data-start-date="01/10/13" data-end-date="29/04/14" placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" ng-model="chartData.boundary.min" data-date-format="d M yyyy" />    

(At the moment I've put in hard coded start and end dates just to test the functionality out. Later I will put in an Angular expression)

Now, this part data-start-date="01/10/13" data-end-date="29/04/14" correctly only displays the dates between 1st October 2013 and 29 April 2014 in the calendar control but the problem is none of those dates is selectable. I can still type in the textbox though. Why are they not selectable?


Solution

  • It seems that the the start date and the end date should be more specific, as well as the options being data-min-date and data-max-date. Your start and end date code should be data-min-date="10/01/2013" data-max-date="04/29/2014". The full line will be

    <input type="text" bs-datepicker data-min-date="10/01/2013" data-max-date="04/29/2014" placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" ng-model="chartData.boundary.min" data-date-format="d M yyyy" />
    

    Also, I think the format of the date for that would be "mm/dd/yyyy" instead of "dd/mm/yyyy" like you originally did.

    Here is a plunker of working code. The calendar only allows selected dates between 1st October 2013 and 29 April 2014. I hope this helps!!!

    edit: fixed a typo. Also, an upvote or accepted answer would be awesome :)