如何实施签入 - 签出日期 AngularJS

Question

我已经使用 JQuery 日期选择器实现了签入 - 签出日期（例如签入 - 10/03/2016 签出 - 12/03/2016）。但现在我想要使用 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" />

Angular代码：

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 个日期选择器创建指令（组件），这将在需要时涵盖日期范围情况，在您的示例中它将签入 - 签出。因此该指令将控制 link 函数中的 2 个日期选择器实例，就像在您的 jquery 代码中一样。

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

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

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

如何实施签入 - 签出日期 AngularJS

How to implement checkIn - CheckOut dates with AngularJS

jquery

angularjs

datepicker

checkout

checkin