首页 前端开发 如何以单一形式使用多个 Angular UI Bootstrap Datepicker?
如何以单一形式使用多个 Angular UI Bootstrap Datepicker?
[英] How to usemultiple Angular UI Bootstrap Datepicker in single form?
本文介绍了如何以单一形式使用多个 Angular UI Bootstrap Datepicker?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表单，其中需要为不同的事物设置 2 个或更多日期字段.我尝试了 Angular UI Bootstrap，它在表单中只有 1 个日期字段时工作正常.但是如果我有多个日期字段，它就会停止工作，而且我不知道更简单的方法来让它工作.
这是我的 HTML 示例:
起始日期 <div class="input-group"><input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="关闭"/><span class="input-group-btn"><button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span> <label>第二个日期</label><div class="input-group"><input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="关闭"/><span class="input-group-btn"><button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span>
我的JS是:
myApp.controller('DatePickrCntrl', function ($scope) {$scope.today = function() {$scope.formData.dt = new Date();};$scope.today();$scope.showWeeks = true;$scope.toggleWeeks = 函数 () {$scope.showWeeks = !$scope.showWeeks;};$scope.clear = function () {$scope.dt = null;};//禁用周末选择$scope.disabled = 函数(日期，模式){return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );};$scope.toggleMin = function() {$scope.minDate = ( $scope.minDate ) ?空:新日期()；};$scope.toggleMin();$scope.open = function($event) {$event.preventDefault();$event.stopPropagation();$scope.opened = true;};$scope.dateOptions = {'年格式': "'yy'",起始日":1};$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];$scope.format = $scope.formats[0];});我基于此处 的示例实现.我在这里遇到的问题是:
1) 当点击日期字段之一时，弹出的日期选择器乱了，似乎在 1 中显示 2 个日期选择器.
2) 当我删除 is-open="opened" 属性时，弹出窗口似乎工作正常.但是如果没有 is-open="opened"，按钮的 ng-click="open($event) 不起作用.
3) 由于每个日期字段都有不同的 ng-models，我无法为任何日期字段设置默认日期，除了第一个 ng-model="formData.dt"
我能想到的解决这个问题的唯一方法是将每个日期字段的控制器分开.
我想知道其他人在使用 Angular UI Bootstrap 时如何在 1 个表单中实现多个日期字段.
解决方案
我有 30 个一个控制器没有问题.如果需要在 ng-repeat 上使用相同的概念.
起始日期 <div class="input-group"><input type="text" class="form-control" datepicker-popup="{{format}}"name="dt" ng-model="formData.dt" is-open="datepickers.dt"datepicker-options="dateOptions" ng-required="true"close-text="关闭"/><span class="input-group-btn"><button class="btn btn-default" ng-click="open($event,'dt')"><i class="glyphicon glyphicon-calendar"></i></button></span> <label>第二个日期</label><div class="input-group"><input type="text" class="form-control" datepicker-popup="{{format}}"名称="dtSecond" ng-model="formData.dtSecond"is-open="datepickers.dtSecond" datepicker-options="dateOptions"ng-required="true" close-text="关闭"/><span class="input-group-btn"><button class="btn btn-default" ng-click="open($event,'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button></span>
myApp.controller('DatePickrCntrl', function ($scope) {$scope.datepickers = {DT:假的，dtSecond:假}$scope.today = function() {$scope.formData.dt = new Date();//***** Q1 *****$scope.formData.dtSecond = new Date();};$scope.today();$scope.showWeeks = true;$scope.toggleWeeks = 函数 () {$scope.showWeeks = !$scope.showWeeks;};$scope.clear = function () {$scope.dt = null;};//禁用周末选择$scope.disabled = 函数(日期，模式){return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );};$scope.toggleMin = function() {$scope.minDate = ( $scope.minDate ) ?空:新日期()；};$scope.toggleMin();$scope.open = function($event, which) {$event.preventDefault();$event.stopPropagation();$scope.datepickers[which]= true;};$scope.dateOptions = {'年格式': "'yy'",起始日":1};$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];$scope.format = $scope.formats[0];});//***** Q2 ***** somemodel 可以只是一个数组 [1,2,3,4,5]<div ng-repeat="o in somemodel"><label>日期标签</label><div class="input-group"><input type="text" class="form-control" datepicker-popup="{{format}}"name="dt{{o}}" ng-model="datepickers.data[o]"is-open="datepickers.isopen[o]" datepicker-options="datepickers.option"ng-required="true" close-text="关闭"/><span class="input-group-btn"><button class="btn btn-default" ng-click="open($event,o)"><i class="glyphicon glyphicon-calendar"></i></button></span>
myApp.controller('DatePickrCntrl', function ($scope) {$scope.datepickers = {数据: {}，选项: {'年格式': "'yy'",起始日":1},开了: {}}$http.get("get/data/for/some/model", function(result) {$scope.somemodel = 结果；for (var i = 0; i < result.length; i++) {$scope.datepickers.isopen[result] = false;$scope.datepickers.data[result] = new Date();//设置默认日期.}});//填充函数的其余部分});
I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it stops working if I have multiple date fields and I dont know the easier method to get this to work.
This is my HTML sample:
<label>First Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<label>Second Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
My JS is:
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.today = function() {
$scope.formData.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
});
I implemented based on the sample here . The problem I have here is:
1) When one of the date field is clicked, the pop-up datepicker is messed up and seems to show 2 datepicker in 1.
2) When I remove is-open="opened" attribute, the pop-up window seems to work fine. But without is-open="opened", the ng-click="open($event) for the button doesnt work.
3) Since each of the date fields have different ng-models, I am unable to set default dates for any date fields except for the first one with ng-model="formData.dt"
The only long way to resolve this that I can think of is to separate the controller for each date field.
I would like to know how others implement multiple date fields in 1 form itself when using Angular UI Bootstrap.
解决方案
I have 30 in one form one controller no problem. use the same concept if you need it on ng-repeat.
<label>First Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}"
name="dt" ng-model="formData.dt" is-open="datepickers.dt"
datepicker-options="dateOptions" ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event,'dt')">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<label>Second Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}"
name="dtSecond" ng-model="formData.dtSecond"
is-open="datepickers.dtSecond" datepicker-options="dateOptions"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event,'dtSecond')">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.datepickers = {
dt: false,
dtSecond: false
}
$scope.today = function() {
$scope.formData.dt = new Date();
// ***** Q1 *****
$scope.formData.dtSecond = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.datepickers[which]= true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
});
// ***** Q2 ***** somemodel can be just an array [1,2,3,4,5]
<div ng-repeat="o in somemodel">
<label>Date Label</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}"
name="dt{{o}}" ng-model="datepickers.data[o]"
is-open="datepickers.isopen[o]" datepicker-options="datepickers.option"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event,o)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.datepickers = {
data: {},
options: {
'year-format': "'yy'",
'starting-day': 1
},
isopen: {}
}
$http.get("get/data/for/some/model", function(result) {
$scope.somemodel = result;
for (var i = 0; i < result.length; i++) {
$scope.datepickers.isopen[result] = false;
$scope.datepickers.data[result] = new Date(); //set default date.
}
});
// fill in rest of the function
});
这篇关于如何以单一形式使用多个 Angular UI Bootstrap Datepicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
