I'm working with an angular-ui datepicker and everything is actually working fine, with the exception of the initial state of the datepicker. AFter I pick a date, it looks fine. See below:
Initial State
After Selecting a date in the picker
So, clearly I'm getting the strigified version of the date object in the first case, and the formatted after selecting a date.
The Markup
<input type="text" class="form-control"
id="birthday"
datepicker-options="datePickerOptions"
datepicker-popup="{{format}}"
data-ng-model="birthday"
data-is-open="opened"
data-ng-required="true"
data-close-text="Close"/>
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
data-ng-click="open($event)">
<i class="fa fa-calendar"></i>
</button>
</span>
The Controller
var today = $scope.today = function today() {
$scope.birthday = $scope.client.birthday || new Date();
};
today();
$scope.clear = function clear() {
$scope.dt = null;
};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.format = 'MMM d, yyyy';
$scope.datePickerOptions = {
'show-weeks': false
};
Not a huge deal, but would be really nice if the model (which needs to be a date object per the docs) was formatted per the $scope.format
to begin with, rather than a strigified date object. Also, not sure it makes a difference, but this datepicker is inside a modal. Thanks for any help!
UPDATE
Looks like I'm not the only one experiencing this, and it's related to using angular 1.3. https://github.com/angular-ui/bootstrap/issues/2659
Where/where ever solutions I found they are lengthy, handling by directive etc. So I prefer this short one
birthday = $filter('date')(new Date(), "MMM dd, yyyy");
Note: Dont forget to inject angular built in $filter service into the controller
angular.module('app').controller("yourController",
['$filter' function($filter){
/* your code here */
birthday = $filter('date')(new Date(), "MMM dd, yyyy");
/* your code here */
}]);
Hope this helps.