Angularjs，Datepicker 落后一天

Posted 2023-05-07

【中文标题】Angularjs，Datepicker 落后一天

【英文标题】：Angularjs, Datepicker one day beind

【发布时间】：2014-03-19 10:22:42

【问题描述】：

我了解日期选择器（我正在使用 AngularStrap's datepicker）由于 javascript 中日期的计算方式而“落后”了一天。我的问题是，我如何让它不考虑时区而只坚持输入的日期......没有调整？

我在日期选择器中选择了 2014 年 2 月 1 日。我在屏幕上的值是 2/1/2014，我希望保存该值。但是，日期选择器将其转换为 Fri Jan 31 2014 19:00:00 GMT-0500 (EST) 显然是因为它从输入的日期中减去了我的时区的 5 小时。我不想要这个。如果我输入 2/1/2014，我想要那个日期，无论时区如何。

拦截/更改/编辑此值的最佳方法，以便进入2/1/2014给了我的日期......不转换时区？我是否应该修改 datepicker 代码本身（这似乎是个坏主意）？如果通过添加某种偏移量，我应该在向后端发送到后端之前更改价值吗？如果是这样，您如何为控制台显示为Fri Jan 31 2014 19:00:00 GMT-0500 (EST) 的值添加时间？

【参考方案1】：

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

它适用于 Angular Bootstrap datepicker，但我想它也应该适用于 AngularStrap datepicker，因为它只依赖于相应的 ngModel 而不是 datepicker 本身。

本质上，每当在日期选择器上选择日期（此值是 yyyy-mm-dd 格式的字符串，将存储在模型上）以及访问模型以填充视图时，我都会重新格式化该值，我需要再次将它包装在 Date 对象中，以便 datepicker 正确处理它。

换句话说，它正在执行您在问题中要求的拦截。

【讨论】：

你能在上下文中展示这个要点吗？遇到了同样的问题，但你的指令对我不起作用。

【参考方案2】：

我知道这个帖子有点老了，但由于没有公认的解决方案，我想我会提供 final 在经过大量的混乱之后对我有用的东西：

我的问题是日期选择器使用了错误的时区，所以当我尝试编辑事件时，即使正确的日期存储在数据库中，也会显示错误的日期。以下为我修复了它：

 var evDate = new Date(data.eventDate); //data.eventDate is the date string
 evDate.setMinutes(evDate.getMinutes() + evDate.getTimezoneOffset()); 

 $scope.eventInfo.eventDate = evDate;

我在这里找到了这个解决方案：https://github.com/angular-ui/bootstrap/issues/2628

【参考方案3】：

如果您不介意加载其他资源，那么我建议您使用 MomentJS，因为它可以消除 JavaScript 中日期的痛苦。您可以执行类似 `moment(datepicker value).local()' 的操作来获取没有时区偏移的日期。

http://momentjs.com/docs/#/manipulating/local/

【讨论】：

这行不通，因为我已经只向日期选择器提供了月份和年份的值。我不提供时区，它会自动执行此操作，这就是问题所在。例如，日期选择器看到 2/1/14 并将其转换为 2014 年 2 月 1 日 00:00:00，然后从中减去我的时区，得到 2014 年 1 月 28 日 19:00:00。从一开始就将值传递给它不会解决这个问题。

日期选择器的模型返回的值与您输入的值不同，那么为什么不在发送到后端之前使用 momentJS 进行调整？

【参考方案4】：

我找到了办法。首先将该日期转换为字符串。这是代码。

 var SelectDate = $scope.GetFormattedDate(Date.parse($("#Date").datepicker("getDate")));            
     $scope.GetFormattedDate = function (CalDate) 
            var re = /-?\d+/;
            var WDate = CalDate.toString();
            var m = re.exec(WDate);
            var lastDate = new Date(parseInt(m[0]));
            var mm = lastDate.getMonth() + 1;
            var dd = lastDate.getDate();
            var yyyy = lastDate.getFullYear();
            var formattedDate = mm + '/' + dd + '/' + yyyy;

            return formattedDate;
        

现在将 SelectDate 传递给您的控制器。宾果问题已解决:)

【参考方案5】：

如果您遇到此问题，可能是因为您正在重新将数据放入 boostrap 日期选择器中。此解决方案对我有用。 首先检查日期是否为空

dateBegin===null?dateBegin=null:dateBegin = new Date(formatDate(dateBegin,'yyyy-MM-dd','en'));

**如果为 null，您将其值设置为 null，您将在表单组和表单组控件中放入该值

this.ugovorForm = new FormGroup('dateBegin':new FormControl(dateBegin))

否则，您将使用 Angular 提供的 formatDate 属性设置日期并对其进行格式化。我一直在努力解决这个问题。这是因为我正在从数据库加载日期。祝你好运；