限制datetimepicker上的过去日期

时间:2017-05-23 08:09:19

标签: javascript jquery angularjs datepicker

我没有问题限制我的某些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,所以在控制器中我做了这样的事情:

(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,有人可以帮我限制这一点,谢谢。

1 个答案:

答案 0 :(得分: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模型。

在if条件中执行类似的操作

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

如果将日期更改为字符串,则可能会松开控制器中的句柄。因此,将其存储在临时$scope.tempDate中以显示在视图中并使用主变量,即$scope.contactDate来执行逻辑。

确保ng-model输入应为$scope.tempDate

第一选择更好