如何使用checkIn - CheckOut dates实现AngularJS

Question

我已经实现了签出日期(如签出- 10/03/2016签出- 12/03/2016)与JQuery数据报警器。但是现在我想要使用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 param中的相对url引用。

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