如何使用 AngularJS 实现 checkIn - CheckOut 日期

Question

我已经使用JQuery datepicker 实现了签入 - 签出日期（例如签入 - 2016 年 3 月 3 日签出 - 2016 年 3 月 12 日）。但现在我想要使用 AngularJS 来实现相同的功能。

我的代码如下：

    $("#checkin_date").datepicker({
        dateFormat: "dd/mm/yy",
        minDate:  0,
        onClose: function(date){            
            var date1 = $('#checkin_date').datepicker('getDate');           
            var date = new Date( Date.parse( date1 ) ); 
            date.setDate( date.getDate() + 1 );        
            var newDate = date.toDateString(); 
            newDate = new Date( Date.parse( newDate ) );   
            $('#checkout_date').datepicker("option","minDate",newDate);            
        }
    });
    $('#checkout_date').datepicker({
        dateFormat: "dd/mm/yy" 
    });

我部分实现了它

<form name="form" ng-controller="ro" ng-submit="form.$valid && ge()">
   <input type="text" class="date" jqdatepicker ng-model="checkin" name="checkin" Placeholder="Check-In date" ng-required="true"  />
   <input type="text" class="date" jqdatepicker ng-model="checkout" name="checkout" Placeholder="Check-Out date" ng-required="true" />

角度代码：

var app = angular.module('App', []);
app.directive('jqdatepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function (date) {
                scope.checkin = date;
                scope.$apply();
            }
        });
        /* where to add 2nd datepicker*/
    }
};
});

任何帮助或建议。

Answer 1

我建议您使用 2 个日期选择器创建指令（组件），这将涵盖需要的日期范围情况，在您的示例中，它将被签入 - 签出。因此，该指令将控制链接函数中的 2 个 datepicker 实例，就像在您的 jquery 代码中一样。

我已经创建了 JSBin，示例为 https://jsbin.com/nenixo/23/edit?html,js,output。

我用模板创建了指令，模板可以放在单独的文件中，并通过templateUrl参数中的相对url引用。

我还使用$timeout 而不是scope.$apply，因为每次在$timeout 执行时，角度都会触发摘要并且所有绑定都会更新。它比直接调用 apply 方法更安全，因为它可以中断已经执行的摘要。