【问题标题】:Datepicker resets time to UTCDatepicker 将时间重置为 UTC
【发布时间】:2016-06-01 06:28:46
【问题描述】:

我有一个简单的自定义 Angular DatePickerDirective。 问题是 - 当我点击它然后退出时,值正在转换为 UTC。 如何预防?

import moment = require('moment');

class DatePickerDirective implements ng.IDirective {
    constructor() {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: ($scope: any, $element: any, attrs: any, ngModel: any): void => {

                var defaultOptions: any = {
                    format: 'dd.mm.yyyy',
                    autoclose: true
                };

                $element.datepicker(angular.extend({}, defaultOptions, $scope.options));

                ngModel.$formatters.unshift((val: any) => {
                    var date: Date = moment(val).toDate();
                    var picker: any = $element.data('datepicker');
                    picker.dates.replace([date]);
                    picker.viewDate = date;
                    picker.fill();
                    return date;
                });

                ngModel.$parsers.unshift((val: any) => {
                    return moment(val);
                });
            }
        };
    }
}
export = DatePickerDirective;

【问题讨论】:

    标签: jquery angularjs datepicker momentjs utc


    【解决方案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;
                });
            }
        }]);

    【讨论】:

    【解决方案2】:

    我使用它从 UTC 转换为 ISO。只需将 date-to-iso 属性添加到您的输入元素。

     myApp.directive("dateToIso", DateToIso);
     function DateToIso () {
        var linkFunction = function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (datepickerValue) {
               var dt = new Date(datepickerValue);
               dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());
               return dt;
            });
        };
    
        return {
            restrict: "A",
            require: "ngModel",
            link: linkFunction
        };
    }
    

    【讨论】:

      猜你喜欢
      • 2023-04-02
      • 1970-01-01
      • 2017-03-22
      • 2017-10-10
      • 2019-07-30
      • 2012-07-25
      • 1970-01-01
      • 2017-04-27
      相关资源
      最近更新 更多