[英]Converting daterangepicker to angular directive
我正在嘗試將daterangepicker插件包裝到angular指令中。 盡管我設法通過在回調函數中提醒選定的日期來使其起作用,但似乎無法將選定的日期保存到$ scope或更新ng-model。 我添加了注釋'// daterangepicker的CALLBACK',以便任何看到此內容的人都可以在下面的代碼中輕松找到它。 我希望有更多經驗的人可以闡明如何實現這一目標。
HTML(調用指令):
<input id="date-range-picker" class="form-control" type="text"
ng-model =“ date” time-recorder-date-range-picker />
Angular指令:
module.directive('timeRecorderDateRangePicker', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.daterangepicker({
startDate: moment.utc().subtract(7, 'days'),
endDate: moment.utc(),
minDate: '01/01/2014',
maxDate: moment.utc(),
dateLimit: {
days: 365
},
showDropdowns: false,
showWeekNumbers: true,
timePicker: false,
ranges: {
'Today': [moment.utc(), moment.utc()],
'Yesterday': [moment.utc().subtract(1, 'days'), moment.utc().subtract(1, 'days')],
'Last 7 Days': [moment.utc().subtract(6, 'days'), moment.utc()],
'Last 30 Days': [moment.utc().subtract(29, 'days'), moment.utc()],
'This Month': [moment.utc().startOf('month'), moment.utc().endOf('month')],
'Last Month': [moment.utc().subtract(1, 'month').startOf('month'), moment.utc().subtract(1, 'month').endOf('month')]
},
opens: 'right',
format: 'MMMM D, YYYY',
separator: ' to ',
buttonClasses: ['btn btn-default'],
locale: {
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
}, function(start, end, label) {
// CALLBACK of daterangepicker
alert('Callback!!!');
}).prev().on('click', function() { // makes calendar icon click work
$(this).next().focus();
});
}
};
});
您可以使用jqlite在Angularjs項目中使用dangrossman的bootstrap- daterangepicker,嘗試一下
在HTML中
<input type="text" id="daterange" />
然后將選擇器附加到要使用jqlite觸發它的元素
angular.element('#daterange').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
}
});
您還可以使用事件
angular.element('#daterange').on('apply.daterangepicker', function(ev, picker) {
//do something, like calling a function
$scope.doSomething(picker.startDate, picker.endDate);
});
您可以將datepicker轉換為指令,並啟用模型更新,如下所示:
angular.module('DatePicker', [])
.directive('datepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datepicker({
format: 'dd/mm/yy',
onSelect: function(date) {
ngModelCtrl.$setViewValue(date),
scope.$apply();
}
});
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.