【问题标题】:Date not being formatted when copied from one datepicker field to another从一个日期选择器字段复制到另一个时,日期未格式化
【发布时间】:2014-10-02 11:12:36
【问题描述】:

我最近从 Angular 1.2.5 迁移到最新版本 1.3-rc.3,从 ui-bootstrap 0.7.0 迁移到 ui-bootstrap 0.11.2,我的代码中的一些功能中断了。

我在一页上有两个日期选择器,它们最初都没有任何价值。 当用户输入第一个日期选择器的值时(通过日期选择器或手动),我希望第二个日期选择器填充相同的日期。

在我迁移之前一切正常,但现在第二个日期没有被格式化。

我正在使用的代码...

    <div class="input-group">
        <input 
            class="form-control" 
            type="text" 
            name="datumVanaf" 
            ng-model="filter.datumVanaf" 
            placeholder="Datum vanaf (dd-mm-jjjj)" 
            datepicker-popup="dd-MM-yyyy" 
            required 
            datepicker-options="{{calendarOpties}}" is-open="kalender.datumVanafOpened"
            clear-text="wis" 
            current-text="Vandaag" 
            close-text="Sluiten" 
            lower-than="{{filter.datumTM}}"
            ng-class="{'error': filterForm.$submitted && filterForm.datumVanaf.$error.required || filterForm.datumVanaf.$error.lowerThan}" 
        />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="openDatumVanaf($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>
    <div class="input-group">
        <input 
            class="form-control" 
            type="text" 
            name="datumTM" 
            ng-model="filter.datumTM" 
            placeholder="Datum t/m (dd-mm-jjjj)" 
            datepicker-popup="dd-MM-yyyy" 
            required 
            datepicker-options="{{calendarOpties}}" 
            is-open="kalender.datumTMOpened"
            clear-text="wis" 
            current-text="Vandaag" 
            close-text="Sluiten"
            ng-class="{'error': filterForm.$submitted && filterForm.datumTM.$error.required || filterForm.datumVanaf.$error.lowerThan}" 
        />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="openDatumTM($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>  

还有一个观察者

$scope.$watch('filter.datumVanaf', function(newValue, oldValue) {
    logger.info('newValue', newValue);
    if (newValue != undefined && $scope.filter != undefined && $scope.filter.datumTM == undefined && isValidDate(newValue)) {
        $scope.filter.datumTM = newValue;
    }
});

日期开始显示在第一个输入字段中,如下所示:

28-09-2014

但是当它被复制到第二个字段时,它没有被格式化:

2014 年 9 月 28 日星期日 00:00:00 GMT+0200(西欧 (zomertijd))

我不知道为什么这不再起作用,而且我在 stackoverflow 上找不到类似的案例。我希望我遗漏了一些明显的东西,但我不知所措。

【问题讨论】:

  • 编辑了您的问题以使其更清楚,希望您不介意;)

标签: angularjs angular-ui-bootstrap bootstrap-datepicker angularjs-bootstrap


【解决方案1】:

尝试在 filter.datumVanaf 的匿名函数中使用 $filter,然后再将其设置到视图中。所以代码可能是这样的:

    $scope.filter.datumTM = $filter('date')(newValue,'dd-MM-yyyy');

还没有测试过,但你明白了;)

参考:

  1. AngularJS Documentation - date usage in javascript

【讨论】:

  • 谢谢 Asyene,我花了一段时间才可以测试这个,因为其他事情优先。但现在我已经尝试过了,它就像一个魅力。
  • Aaarghh,现在看来$scope.filter.datumTM 字段的值实际上不再是日期,而是字符串。当我将其发送到后端时,这会导致功能中断。我希望它在从日期选择器中选择日期时重用它所做的格式。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-08
  • 2016-06-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多