AngularJS Datepicker - 没有选择日期答案

【问题标题】：AngularJS Datepicker - no date selectedAngularJS Datepicker - 没有选择日期
【发布时间】：2015-12-08 20:43:02
【问题描述】：

我有一个模型可以打开一个表单来编辑用户信息。该表单有多个使用日期选择器的输入字段。某些日期字段不是必需的。但是，如果数据库中的日期之一为空，则自动填写今天的日期，并在用户单击保存按钮后保存，即使它不打算保存。

这是我的 HTML

<div class="form-group">
    <label class="control-label">Date</label>
    <div>
       <input class="form-control" type="date" placeholder="mm/dd/yyyy" uib-datepicker-popup ng-model="editUser.DatesTemp" datepicker-options="dateOptions" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
    </div>
</div>

这是脚本文件

angular.module("myApp", ['ui.bootstrap', 'gm.datepickerMultiSelect']);

// MAIN CONTROLLER
angular.module("myApp").controller("MainController", function ($scope, $http) {
$scope.Data = data;
console.log(data);

   $scope.userEdit = function (index) {
       $scope.editUser = data.userInfo[index];
       //using moment to format date
       $scope.editUser.DatesTemp = moment($scope.editUser.Dates[0]).toDate();
   };

});

// DATE CONTROLLER
angular.module("myApp").controller("modalEditUserController", function ($scope, $http) {
   $scope.postUpdate = function () {
       //using moment to format date
       $scope.editUser.Dates[0] = moment($scope.editUser.DatesTemp).format('MM/DD/YYYY h:mm:ss A');
   };
});

// DATE FILTER
angular.module("myApp").filter("asDate", function () {
   return function (input) {
      return new Date(input);
   };
});

【问题讨论】：

标签： angularjs input datepicker

【解决方案1】：

看之前不熟悉的api，好像有“Events”可以调用。如果用户没有输入日期，也许可以使用“changeDate”调用将数据库中的日期设置为空。

他们的代码示例：

$('#dp5').datepicker()
.on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
        ....
    }
});

也许可以找到一种方法在您的代码中实例化它。

另外，这不是必需的，而是编写控制器的快速提示。该模块可以声明为变量，稍后与每个以下控制器/过滤器一起使用。只是代码的捷径。

var app = angular.module("myApp", ['ui.bootstrap', 'gm.datepickerMultiSelect']);

app.controller("MainController", function ($scope, $http) {
   ...    
});
app.controller("modalEditUserController", function ($scope, $http) {
   ...
});

【讨论】：