【问题标题】:HTML date field not able to set back to date field coming from backendHTML 日期字段无法设置回来自后端的日期字段
【发布时间】:2018-06-14 05:48:08
【问题描述】:

我有一个 HTML 日期字段。 我有一个创建页面,我在其中将日期插入 MySQL db 我有一个编辑页面,我在其中获取日期并设置回输入字段。

<input id="dob" name="dob" type="date" placeholder="Enter date of birth" class="form-control" ng-model="user.dob"/>

JS

function loadUserById() {
        ApiService.getById($scope.id).then(function(response) {
            $scope.user = response.data[0];
            $scope.user.password1 = response.data[0].password;

            if($scope.user.dob) {
                var date = new Date($scope.user.dob);
                $scope.user.dob = moment(date).format("MM/DD/YYYY");
            }
        }, function(error) {
            console.log(error);
        });
    }

问题

我正在将此字段中的日期插入 MySQL 数据库,并将其格式化为YYYY-MM-DD 格式。然后我格式化为mm/dd/yyyy 格式并尝试在 HTML 日期字段中设置它。

但它抛出了一个错误:

angular.js:14642 Error: [ngModel:datefmt] http://errors.angularjs.org/1.6.5/ngModel/datefmt?p0=06%2F03%2F2018
at angular.js:88
at Array.<anonymous> (angular.js:25252)
at angular.js:29245
at m.$digest (angular.js:18202)
at m.$apply (angular.js:18480)
at l (angular.js:12501)
at XMLHttpRequest.s.onload (angular.js:12655)

【问题讨论】:

  • this link。日期显然不是YYYY-MM-DD 格式。您可以尝试在 MySQL 查询中对其进行格式化,以便以 YYYY-MM-DD 格式返回日期。
  • 不,我在客户站点中对其进行格式化,然后我设置为日期字段
  • 请准确阅读我的第一条评论中的链接,即描述。它将指导您为什么会出现此错误。

标签: javascript html angularjs momentjs


【解决方案1】:

得到了答案。 需要使用 ng-value 然后它会自动将日期设置到字段中。

function loadUserById() {
        ApiService.getById($scope.id).then(function(response) {
            $scope.user = response.data[0];
            $scope.user.password1 = response.data[0].password;

            if($scope.user.dob) {
                var date = new Date($scope.user.dob);
                $scope.user.dob = moment(date).format("YYYY-MM-DD");
            }
        }, function(error) {
            console.log(error);
        });
    }


<input id="dob" name="dob" type="date" ng-readonly="readOnly" placeholder="Enter date of birth" class="form-control" ng-model="user.dob" ng-value="user.dob"/>

【讨论】:

    猜你喜欢
    • 2018-08-12
    • 2023-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-21
    • 2017-08-03
    相关资源
    最近更新 更多