Search code examples
jqueryangularjsdatedatepickerangular-strap

Making AngularStrap DatePicker Textbox Editable

I am using AngularStrap 0.7.6 and have set a text field to be a date picker control like this

<input type="text" data-start-date="{{minimumPossibleDate | date: dd/MM/yyyy}}" 
data-end-date="{{maximumPossibleDate | date: dd/MM/yyyy}}" bs-datepicker 
placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" 
ng-model="currentFromDate" data-date-format="dd-mm-yyyy" />

This works great and gives me a calendar control exactly as I need it but there is one thing missing. I want to be able to edit the date in the text field by typing in a date, but the text field seems to be read only. I can't type a date into it, I can only select one from the calendar popup. How do I make it editable?

Solution

  • The datepicker example here http://mgcrea.github.io/angular-strap/##datepickers does what you want.

    The example setup looks similar to what you have.

    If you can't physically remove/edit the contents and enter whatever text you want then something else is blocking the text input to the control.

    Also, your version of AngularStrap is quite far behind the currently released version. Maybe the older version of the AngularStrap plugin restricted manual text input.