angularjs ui bootstrap datepicker意外添加了一天答案

【问题标题】：angularjs ui bootstrap datepicker unexpectedly adding a dayangularjs ui bootstrap datepicker意外添加了一天
【发布时间】：2016-03-06 18:21:37
【问题描述】：

美好的一天，默认情况下，我使用 momentjs 在 ui bootstrap datepicker 输入字段中设置格式为 YYYY-MM-DD 的日期。日期以我想要的格式正确显示。当我选择不同的日期时，它会正确显示输入字段，但是当我决定控制台记录时，会将一天的值添加到其中并带有时区（T00：00：00.000Z）。这是我的 html 的 sn-p

<div class="row">
                <div class="col-md-6">
                    <label>Drawdown Ent. Date <span style="color: red;">*</span></label>
                    <input type="text" 
                           class="form-control" 
                           datepicker-popup="yyyy-MM-dd" 
                           ng-model="bookloan.drawdown_ent_date" 
                           is-open="drawdown_ent_date.open" 
                           ng-click="drawdown_ent_date.open = true" 
                           datepicker-options="entDateOptions" 
                           date-disabled="disabled(date, mode)" 
                           close-text="Close" />
                </div>
            </div>

这是我的 JavaScript 代码片段：

$scope.bookloan.drawdown_ent_date = moment().format("YYYY-MM-DD");

是什么原因造成的？提前谢谢..

【问题讨论】：

我创建了一个 Plunker，而不是使用 moment.js (plnkr.co/edit/ZH7SD940lL2TXaUuHdVc?p=preview)，当日期选择器更改时，观察者会显示正确的日期。
另外，$scope.dt = moment().format("YYYY-MM-DD"); 给出一个错误。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

我通过使用这个指令找到了我的问题的解决方案：

app.directive('datepickerLocalDate', ['$parse', function ($parse) {
    var directive = {
        restrict: 'A',
        require: ['ngModel'],
        link: link
    };
    return directive;

    function link(scope, element, attr, ctrls) {
        var ngModelController = ctrls[0];

        // called with a JavaScript Date object when picked from the datepicker
        ngModelController.$parsers.push(function (viewValue) {
            // undo the timezone adjustment we did during the formatting
            viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
            // we just want a local date in ISO format
            return viewValue.toISOString().substring(0, 10);
        });

        // called with a 'yyyy-mm-dd' string to format
        ngModelController.$formatters.push(function (modelValue) {
            if (!modelValue) {
                return undefined;
            }
            // date constructor will apply timezone deviations from UTC (i.e. if locale is behind UTC 'dt' will be one day behind)
            var dt = new Date(modelValue);
            // 'undo' the timezone offset again (so we end up on the original date again)
            dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());
            return dt;
        });
    }
}]);

并将指令名称放在输入元素中：

<div class="col-md-6">
                    <label>Drawdown Ent. Date <span style="color: red;">*</span></label>
                    <input type="text" 
                           class="form-control" 
                           datepicker-local-date
                           datepicker-popup="yyyy-MM-dd" 
                           ng-model="bookloan.drawdown_ent_date" 
                           is-open="drawdown_ent_date.open" 
                          ng-click="drawdown_ent_date.open = true" 
                           datepicker-options="entDateOptions" 
                           date-disabled="disabled(date, mode)" 
                           close-text="Close" />
                </div>
            </div>

【讨论】：