javascript - 限制日期时间选择器上的过去日期

Question

我在限制我的某些 datetimepicker 时没有遇到问题，但这个是持久的，我正在尝试在 angularjs 中执行此操作，并且 datetimepicker 位于数据表内，我将其设置如下:

         {
            data: "next_action_date",
            name: "next_action_date",
            render: (data, type, row, meta)->
              initValue = data
              if data
                initValue = "'" + data + "'"
              if row.is_editable
                return '<div class="input-control text" data-role="datepicker"
                           ng-controller="ContactDateCtrl"
                           ng-init="init(' + row['pk'] + ', ' + initValue + ')" data-format="mmmm d, yyyy">
                          <input type="text" ng-model="contactDate" ng-change="onChange()">
                          <button class="button"><span class="mif-calendar"></span></button>
                      </div>';
              else
                return data;
          }

所以这是datatable中的一列，我在其中放置了datetimepicker，所以在 Controller 中我正在做这样的事情:

(function() {
  var app;

  app = angular.module('cms.sales');

  app.controller('ContactDateCtrl', [
    '$scope', '$http', function($scope, $http) {
      var nextContactDateUpdateFailed, nextContactDateUpdateSuccess;
      $scope.contactDate = null;
      $scope.leadContactPk = null;
      $scope.init = function(leadContactPk, nextContactDate) {
        nextContactDate = new Date();
        $scope.leadContactPk = leadContactPk;
        if (nextContactDate) {
          return $scope.contactDate = nextContactDate.getFullYear() + '-' + (nextContactDate.getMonth() + 1) + '-' + nextContactDate.getDate();
        } else {
          return $scope.contactDate = "";
        }
      };
      $scope.onChange = function() {
        var data;
        data = {
          contact_date: $scope.contactDate,
          lead_pk: $scope.leadContactPk
        };
        return $http.post("/sales/update_contact_date/", data).then(nextContactDateUpdateSuccess, nextContactDateUpdateFailed);
      };
      nextContactDateUpdateSuccess = function() {
        return ClientNotifications.showNotification("Success", "Next communication date was updated", "success");
      };
      return nextContactDateUpdateFailed = function() {
        return ClientNotifications.showNotification("Alert", "Failed to update next communication date", "alert");
      };
    }
  ]);

}).call(this);

现在这并不限制我的datetimepicker，它只是返回这个时间格式2017-5-23，而且我不确定还能做什么我可以做任何其他事情来使此限制起作用，我正在使用 metroui datetimepicker 在我的项目中，任何人都可以帮我正确限制它，谢谢。

Answer 1

只需添加格式

$(function(){
   $("#datepicker").datepicker({
   format: 'mmmm d, yyyy',
    minDate:new Date(Date.now()-(86400000 * n)) // just for min date and 'n' is the number of previous days to be allowed
   });
});

或者自定义输入的ng-model。

只要在 if 条件下做这样的事情

var tempDate = nextContactDate.toString().split(' ');
tempDate = tempDate[1] + " " + tempDate[2] + ", " + tempDate[3];
$scope.tempDate = tempDate;
$scope.contactDate = nextContactDate;

如果将日期更改为字符串，则可能无法在 Controller 中进行处理。因此，将其存储在临时 $scope.tempDate 中以在 View 中显示，并使用主变量，即 $scope.contactDate 来执行逻辑。

确保输入的 ng-model 应该是 $scope.tempDate

首选更好