根据时区调整的Angular UI DatePicker



我有一个日期存储在SQL Server中的日期。日期显示4/24/2014当我在SQL查询。这是正确的。以UTC格式将日期正确地传送到客户端。为了编辑这个日期,我们使用了Angular UI DatePicker。DatePicker根据我的当地时区调整日期,所以它总是差一天。

我可以看到它正在发生。如果我们编辑的是DateTime而不是Date,那么根据时区进行调整将是正确的。然而,在这种情况下,我只有一个日期,所以我不关心时区,我只是想编辑日期,因为它是在数据库中。

我可以验证它正在调整时区。如果我将windows机器上的时区更改为UTC,那么DatePicker确实会显示正确的日期。

所以,问题是,有没有一种方法告诉DatePicker关闭时区调整,只是在UTC格式管理日期,以便它将与SQL日期而不是SQL日期时间工作?

我有一个非常类似的问题前一段时间:我想在服务器端存储本地日期(即只是yyyy-mm-dd,没有时区/时间信息),但由于Angular Bootstrap Datepicker使用JavaScript日期对象,这是不可能的(它序列化到JSON中的UTC日期时间字符串,因为你发现自己)。

我用这个指令解决了这个问题:https://gist.github.com/weberste/354a3f0a9ea58e0ea0de

基本上,每当在datepicker上选择日期时,我都会重新格式化该值(该值,一个yyyy-mm-dd格式的字符串,将存储在模型中),并且每当访问模型以填充视图时,我需要再次将其包装在date对象中,以便datepicker正确处理它。

解决方案:https://github.com/angular-ui/bootstrap/issues/4837#issuecomment-203284205

时区问题已修复。

你可以使用:

ng-model-options="{timezone: 'utc'}"

获取一个没有时区计算的日期选择器。

编辑:这个解决方案从版本2开始不工作。X,但是在那之前它做得很好。我找不到解决办法,仍然使用1.3.3版本。

编辑2:正如ssambastien Deprez在下面的评论中指出的,这个问题已经在2.3.1版中修复了。我刚刚测试了一下,效果很好。

<input
 uib-datepicker-popup
 ng-model="$ctrl.myModel"
 ng-model-options="{timezone: 'utc'}">

首先我想指出bootstrap的本地化日期选择器是愚蠢和无用的,没有人需要这样的东西,你真正想要的是一个日期yyyy-MM-dd,当你不需要时间时,我认为本地化日期没有意义。

我不会试图改变客户端来适应服务器的时区,那是多余的,而且不起作用。我所做的是让用户在它的时区工作,并在将其发送到服务器之前格式化日期,如下所示:

fields.date = dateFilter(trans.date, 'MM/dd/yy');

这确保用户在日期选择器中看到的任何内容我都能在服务器端接收到。如果你问我,我会说这很重要。如果您需要设置最小和最大日期,同样,只需在用户的时区中设置它们,如下所示:

$scope.datepickerOptions.minDate = new Date(dateFilter(minDate, 'yyyy-MM-dd'T'00:00:00', serverTimezone));
$scope.datepickerOptions.maxDate = new Date(dateFilter(maxDate, 'yyyy-MM-dd'T'00:00:00', serverTimezone));

minDate和maxDate是服务器本地化的日期,serverTimezone是服务器的时区偏移量(例如'+0500')。

希望这对你有帮助!

将时区设置为null对我来说非常有效。它只是保持所选日期不变。

ng-model-options="{timezone: null}"

备注:在所有时区测试&我使用的uib版本是1.3.3

希望下面的指令对你有用

app.directive('datetimepickerNeutralTimezone', function () {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (value) {
                if (typeof value === "undefined") {
                    var date = new Date();
                    //date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
                    return date;
                } else {
                    var date = new Date(Date.parse(value));
                    //date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
                    return date;
                }
            });
            ctrl.$parsers.push(function (value) {
                var date = new Date(value.getTime() - (60000 * value.getTimezoneOffset()));
                return date;
            });
        }
    };
});
app.directive('timepickerNeutralTimezone', function () {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (value) {
                if (typeof value === "undefined") {
                } else {
                    var date = new Date(Date.parse(value));
                    date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
                    return date;
                }
            });
            ctrl.$parsers.push(function (value) {
                var date = new Date(value.getTime() - (60000 * value.getTimezoneOffset()));
                return date;
            });
        }
    };
});

对于我来说,因为我们使用的是一个非常旧的库版本,并且给定一个对象expiration_date由日期选择器返回,我必须找到一个解决方案并像这样调整它:

expiration_date.setMinutes(-expiration_date.getTimezoneOffset());

将请求的日期设置为相应的UTC日期,但仍以本地时区格式表示。

对我来说效果很好。

相关内容

  • 没有找到相关文章

最新更新