Question

我已经使用JQuery datepicker实施了签入 - 结帐日期（例如checkin - 10/03/2016结帐 - 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代码中一样。

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

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

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

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

1 个答案: