I use angular strap datePicker
<input type="text" name="dateFrom" ng-model="dateFrom" bs-datepicker
data-end-date="{{endDate}}" data-start-date="{{startDate}}" />
How ever when change endDate or startDate from code it does update in the DOM but the date picker remains unaware of this change, is there some kind of update I need to trigger?
The change is done via a ng-click
with function on the same scope, that then sets a new value for endDate
and startDate
.
Like so (CoffeeScript):
$scope.setDateRange = (dateRange) ->
if dateRange is "past"
$scope.endDate = "-1d"
$scope.startDate = ""
if dateRange is "now"
$scope.endDate = ""
$scope.startDate = ""
if dateRange is "future"
$scope.endDate = ""
$scope.startDate = "+1d"
Edit:
Here is the solution:
On the controller constructor I store the date from and to controls:
dateFromCtrl = $element.find 'input[name="dateFrom"]'
dateToCtrl = $element.find 'input[name="dateTo"]'
Then when setDateRange
is called I made few helper methods to call the datepicker
setEndDate
and setStartDate
methods:
setEndDate = (date) ->
dateFromCtrl.datepicker 'setEndDate', date
dateToCtrl.datepicker 'setEndDate', date
setStartDate = (date) ->
dateFromCtrl.datepicker 'setStartDate', date
dateToCtrl.datepicker 'setStartDate', date
setDateRange = (dateRange) ->
if dateRange is "past"
setEndDate "-1d"
setStartDate ""
if dateRange is "now"
setEndDate ""
setStartDate ""
if dateRange is "future"
setEndDate ""
setStartDate "+1d"
Try using the setStartDate() and setEndDate() calls:
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setstartdate
Or you might look at the datepicker that is now provided by the Angular folks, so it has especially nice integration within Angular: http://angular-ui.github.io/bootstrap/