如何以 M/d/yy 格式正确传递给 DatePicker 字符串表示形式的日期

Posted 2023-05-07

【中文标题】如何以 M/d/yy 格式正确传递给 DatePicker 字符串表示形式的日期

【英文标题】：how to pass properly to DatePicker string representation of Date in format M/d/yy

【发布时间】：2020-06-23 06:25:24

【问题描述】：

我是 Angular 的新手，我正在尝试解决下一个问题：我有这个代码

<div class="col-xs-6">
                    <label for="from">Date from*</label>
                    <div ng-controller="DatePickerCtrl" class="form-group"
                         ng-class="'has-error': formErrors.dateFrom">
                        <p class="input-group">
                            <input type="text" class="form-control" id="from" name="from"
                                   placeholder="dateOptions.format"
                                   datepicker-options="dateOptions"
                                   datepicker-popup="dateOptions.format"
                                   datepicker-append-to-body="true"
                                   on-open-focus="false"
                                   ng-model="formData.dateFrom"
                                   ng-change="formErrors.dateFrom = isDateAfter(formData.dateFrom, formData.dateTo)"
                                   required
                                   is-open="opened" close-text="Close" aria-describedby="from"
                            />
                            <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="toggle($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
                        </p>
                        <div class="help-block" ng-class="'has-error': formErrors.dateFrom.length"
                             ng-bind="formErrors.dateFrom"></div>
                    </div>
                </div>

我需要下一个功能——当我按下“生成”按钮时，我需要向数据选择器传递一个新的 Date()。所以我的报告应该在今天（当前日期）内创建一些报告。这就像一些自动化，而不是手动选择日期，我只想单击“生成”按钮并将当前日期传递给数据选择器并显示在屏幕上。假设当前日期是 2020 年 3 月 11 日。然后我应该在 2020 年 3 月 11 日在屏幕上显示结果。但我总是负1天...

我的数据选择器：

app.controller('DatePickerCtrl', ['$scope', '$filter', '$log',
function($scope, $filter, $log) 

    init();

    function init() 
        $scope.opened = false;

        $scope.toggle = function($event) 
            $event.preventDefault();
            $event.stopPropagation();
            $scope.opened = !$scope.opened;
        ;

        $scope.dateOptions = 
            format: 'M/d/yy',
            startingDay: 1
        ;
    

    $scope.isDateAfter = function(minDate, selectedDate) 
        if (minDate && selectedDate) 
            var fromDate = new Date(minDate);
            var toDate = new Date(selectedDate);
            if (dateAfter(fromDate, toDate)) 
                return 'Invalid range. Date from is after date to';
            
        
        return '';
    ;

    function dateAfter(from, to) 
        return from.getTime() > to.getTime();
    


]);

这就是我为 datepicker 创建日期的方式：

 function getDate() 
        let today = new Date;
        let mm = today.getUTCMonth() + 1;
        let dd = today.getUTCDate();
        let yy = today.getUTCFullYear().toString().slice(2, 4);
        return mm + '/' + dd + '/' + yy;
    

主要问题是日期选择器会从我传递给它的当天开始一天！我只是将日期硬编码为“3/11/20”，而是在屏幕上看到日期“20/3/10”。 无法解决这个问题（（也许有人可以帮我解决这个问题？提前致谢）

已解决：只有当我将完整格式的日期传递给它时，日期选择器才能正常工作 -> new Date();

【参考方案1】：

您可以在 Angular 中使用默认的 DatePipe。

https://angular.io/api/common/DatePipe

或者您可以将日期分配给一个变量

`today = new Date()`

`<p>Today date is today | date: 'MM/dd/yy'</p>`

【讨论】：

谢谢！我需要能够使用两个选项：1）从屏幕上使用 datepicker 并从日历中选择； 2）只需单击“生成”，日期选择器就会自动填充。如何应用您的解决方案？

您需要将您的日期分配给一个变量，如下面的一个generatedDate = new Date(); 然后您将日期管道与您的日期变量一起使用，如下面的一个。 <p>generatedDate | date: 'MM/dd/yy' </p> 参考：stackblitz.com/edit/angular-mgcc5u

不幸的是，我有 angularJS。我的床，我在我的问题中编辑了信息。我认为这可能对docs.angularjs.org/api/ng/filter/date 有所帮助，例如“shortDate”：相当于“M/d/yy”。但似乎这可能不是问题。这些所有方法只是根据模式将当前日期转换为一些字符串表示形式，如 '3/11/20'。但不知何故，当我将此日期设置为 formData.dateFrom - datapicker 只是减去 1 天并在屏幕上显示日期 3/10/20