如何更改角度 ui-bootstrap 日期选择器的格式

Posted

技术标签:

【中文标题】如何更改角度 ui-bootstrap 日期选择器的格式【英文标题】:How to change format of angular ui-bootstrap datepicker 【发布时间】:2015-04-04 00:28:47 【问题描述】:

我正在使用 Angularjs 1.1.5 版本和 Angular UI-bootstrap 0.6.0。我需要以这种 yyyy-MM-dd 格式传递选定的日期,但我得到的是“Tue Feb 03 2015 00:00:00 GMT+0530 (IST)”格式。我已经尝试应用过滤器,但这只改变了 dt 值而不是 ng-modal 值,因此在控制器中我得到了 Tue Feb 03 2015 00:00:00 GMT+0530 (IST) 格式。

我搜索了类似的问题并尝试了答案中提供的解决方案,但我还没有运气。这是我的代码。

html 代码:

 <div class="row">
        <div class="">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="dt.date" is-open="opened" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="opencal($event)"><i class="fa fa-calendar"></i></button>
              </span>
              <span class="btn btn-xs btn-success input-group-addon" id="check_availability" ng-click="check_availability(dt.date)"><i class="fa fa-search"></i></span>
              <span class="btn btn-xs btn-warning input-group-addon" id="basic-addon2" ng-click="reset_halls()"><i class="fa fa-close"></i></span>
            </p>
        </div>Selected date dt.date
    </div>

JS代码

app1.controller('HomeCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log) 
      $scope.opencal = function($event) 
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
      ;
       $scope.check_availability=function(dt)
          alert("here I am getting date like this Tue Feb 03 2015 00:00:00 GMT+0530 (IST)"+dt);
          return $http(
            url:  'home/check_avail/'+dt,
            method: "POST"
          ).success(function(addData) 
                 $scope.hallinfo=;
                 $scope.hallinfo = addData;
          );
        
    )

这里我为你创建了plunker

【问题讨论】:

【参考方案1】:

你可以在控制器中尝试这样的事情:

alert("Here I want date in yyyy-MM-dd format\n" + $filter("date")(sdate, "yyyy-MM-dd"));

您应该在函数中添加一个 $filter 参数:

app1.controller('HomeCtrl', function($scope, $http, $q, $location, $window, $modal, $log, $filter)  ...

【讨论】:

在回答之前,请在 plunker 中尝试您的代码我已经给出了链接,请检查那里的编辑不适用于我。 您是否也尝试添加第二部分? 我做到了,我写了一个指令实际上在发送到模态之前过滤了日期格式,这解决了我的问题。谢谢你的把戏也对我有用,所以我支持你。

以上是关于如何更改角度 ui-bootstrap 日期选择器的格式的主要内容,如果未能解决你的问题,请参考以下文章

如何为 ui-bootstrap 日期选择器创建 angularJs 包装器指令?

更改角度日期选择器材质组件的颜色

更改内联日期选择器角度材料的标题

角度材料日期时间选择器更改显示日期时间的格式

如何在日期选择器角度禁用过去的日期

如何使用角度引导日期选择器显示正确的日期格式?