如何在角度引导日期选择器中转换日期格式

时间:2016-04-26 12:25:36

标签: javascript angularjs date datepicker angular-bootstrap

我正在使用角度日期选择器。当用户选择日期时,我想过滤结果。

我已将ng-change添加到日期选择器,它正在检测更改并传递日期值。但格式不正确。

<uib-datepicker ng-model="dt" ng-change="dateSelected('{{dt}}')" class="well well-sm" datepicker-options="options"></uib-datepicker>

控制器

 $scope.dateSelected = function(passedDate){
    console.log('Date Selected ' + passedDate);
}

这给出了

2016-04-26T12:18:56.794Z

如何将其转换为

18 March, 2016

或类似的东西。

我通过根据文档更新$ scope.options尝试了几个选项,但没有任何效果。

2 个答案:

答案 0 :(得分:1)

试试这个:

html应该是这样的,你在ng-change

中不需要{{}}
<uib-datepicker ng-model="dt" ng-change="dateSelected(dt)" class="well well-sm" datepicker-options="options"></uib-datepicker>

var monthArray = ["January", "February", "March", "April",....];

JS应该像

console.log($scope.dt.getDate()+', '+monthArray[$scope.dt.getMonth()]+', '+$scope.dt.getFullYear());

答案 1 :(得分:0)

html中的Datepicker

 <div class="input-group ui-datepicker">
                                <input type="text"
                                       class="form-control date"
                                       datepicker-popup="{{format}}"
                                       ng-model="dt"
                                       is-open="opened"
                                       min-date="minDate"
                                       max="'2015-06-22'"
                                       ng-readonly="true"
                                       datepicker-options="dateOptions"
                                       date-disabled="disabled(date, mode)"
                                       ng-required="true"
                                       close-text="Close" style="cursor:auto;">
                                <span class="input-group-addon" ng-click="open($event)"><i class="fa fa-calendar"></i></span>
                            </div>

将格式设置为:

 $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];

 $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };