个人中心
gpt4 book ai didi

javascript - UI Bootstrap Datepicker 弹出日期格式

转载 作者：行者123 更新时间：2023-12-03 11:25:39 25 4
gpt4 key购买 nike

我正在使用 UI Bootstrap Datepicker Popup，我想使用自定义日期格式。我的休息服务以“dd/MM/yyyy”格式向我发送日期。我想使用这种格式，但在更改模型值时，日期选择器不会更新。我定义了 uib-datepicker-popup="dd/MM/yyyy" 但似乎不起作用。

笨蛋:https://plnkr.co/edit/SfSXmeL0ue0yef1yTKMO?p=preview 

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = '02/01/2017';
  };

  $scope.clear = function() {
    $scope.dt = null;
  };

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

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };

  $scope.popup1 = {
    opened: false
  };
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>
<div ng-controller="DatepickerPopupDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      </div>


    </div>

    <hr />
    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
</div>
  </body>
</html>

关于 plunker:- 点击“今天”，使 $scope.dt = '02/01/2017'- 打开日期选择器弹出窗口，它在 2 月 1 日而不是 1 月 2 日初始化

最佳答案

经过一些研究，我想我正在寻找一个指令来添加自定义解析器和格式化程序:

.directive('dateFormatter', [
    function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function postLink(scope, element, attrs, ngModel) {
              ngModel.$parsers.push(function(data) {
                return moment(data).format('DD/MM/YYYY');
              });

              ngModel.$formatters.push(function(data) {
                return moment(data, 'DD/MM/YYYY').toDate()
              });
            }
        };
    }
]);

更新的 plunkr:https://plnkr.co/edit/oi1EtcDmzpzyyKmXvhqz?p=preview

关于javascript - UI Bootstrap Datepicker 弹出日期格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44826964/

25 4 0
文章推荐： tensorflow - Tensorflow中的Tensor和Variable有什么区别
文章推荐： tensorflow - 如何在 bazel/tensorflow 构建期间添加外部头文件
文章推荐： reflection - 如何发现abap开发对象的属性？
文章推荐： nhibernate - 用于 NHibernate 的 FLuentNhibernate + Nhibernate + Linq 的最新二进制版本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com