javascript - uxsolutions - datepicker hour
¿Cómo utilizar múltiples UI angulares de Bootstrap Datepicker en forma individual? (6)
Lo utilicé de una manera diferente y me parece un poco más fácil. Estaba usando uno de los enfoques mencionados, pero era perezoso para crear toneladas de calendarios porque estaba ejecutando un ciclo sin tener ningún identificador estático. Entonces, esta solución solo es válida para usted, si desea crear muchos calendarios dentro de una repetición ng. ¡Espero eso ayude!
Ese es el controlador
$scope.datepickers = {
data: {},
isopen: {}
}
// setting the defaults once
for (var i = 0; i < $scope.array.length; i++) {
$scope.datepickers.isopen[i] = false;
$scope.datepickers.data[i] = new Date();
}
// aso..
$scope.valuationDatePickerOpen = function($event, index) {
if ($event) {
$event.preventDefault();
$event.stopPropagation();
}
$scope.datepickers.isopen[index] = true;
};
Y este es el HTML recortado dentro de mi bucle
<!-- ng-repeat="entry in array track by $index" -->
<input type="text" class="form-control"
datepicker-popup="dd-MMMM-yyyy"
is-open="datepickers.isopen[$index]"
ng-click="valuationDatePickerOpen($event, $index)"
ng-model="entry.date" />
Tengo un formulario donde hay una necesidad para mí de tener 2 o más campos de fechas para diferentes cosas. Probé la Bootstrap de interfaz de usuario angular que funciona bien cuando solo tengo 1 campo de fecha en el formulario. Pero deja de funcionar si tengo varios campos de fecha y no conozco el método más fácil para hacer que esto funcione.
Esta es mi muestra de HTML:
<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>
Mi JS es:
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];
});
Implementé en base a la muestra here . El problema que tengo aquí es:
1) Cuando se hace clic en uno de los campos de fecha, el selector de fecha emergente se arruina y parece mostrar 2 datepicker en 1.
2) Cuando elimino el atributo is-open="opened" , la ventana emergente parece funcionar bien. Pero sin is-open="opened" , el ng-click="open($event) para el botón no funciona.
3) Como cada uno de los campos de fecha tiene diferentes ng-modelos, no puedo establecer fechas predeterminadas para ningún campo de fecha, excepto el primero con ng-model="formData.dt"
La única forma de resolver esto que puedo pensar es separar el controlador para cada campo de fecha.
Me gustaría saber cómo otros implementan múltiples campos de fecha en 1 mismo formulario cuando usa Angular UI Bootstrap.
Preferiría no mezclar el ng-model con la información de UI. Para este propósito, es necesario definir una matriz para almacenar los indicadores de apertura, así como también verificar si el datePicker está abierto o no.
Además, he cambiado el comportamiento ''abierto'' para ''alternar'' en su lugar, para permitir el cierre del DatePicker con el botón.
Aquí está mi controlador:
$scope.toggleOpenDatePicker = function($event,datePicker) {
$event.preventDefault();
$event.stopPropagation();
$scope[datePicker] = !$scope[datePicker];
};
Entonces se puede usar como:
<input type="text" class="form-control" ng-model="model.date1" is-open="date1" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleOpenDatePicker($event,''date1'')"><i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
La idea $ scope fue prestada desde here :
Solución más simple. Requiere solo modificar el HTML y se puede usar en ng-repeat si lo desea. Solo sé creativo con lo que llamas el abierto
Pegue esto en su controlador:
$scope.calendar = {
opened: {},
dateFormat: ''MM/dd/yyyy'',
dateOptions: {},
open: function($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.calendar.opened[which] = true;
}
};
HTML:
<div class="form-group row">
<div class="col-lg-6">
<label for="formDOB">Date of Birth</label>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.birthDate" is-open="calendar.opened.dob" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Date of Birth" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="calendar.open($event, ''dob'')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-lg-6">
<label for="formWinDate">Win Date</label>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.winDate" is-open="calendar.opened.win" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Win DAte" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="calendar.open($event, ''win'')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
Tengo 30 en una forma, un controlador, no hay problema. use el mismo concepto si lo necesita en 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
});
la respuesta de es genial. Solo agregaría que puede mejorar la función ''open ()'':
$scope.open = function ($event, datePicker) {
$event.preventDefault();
$event.stopPropagation();
$scope.closeAll();
datePicker.opened = true;
};
Y luego debes usarlo así:
ng-click="open($event, dateFrom)"
Donde dateFrom es tu ng-model (es decir, usas $ scope.dateFrom ).
EDITAR: $scope.closeAll(); es una función que cierra todos los fechaPickers. Puede escribirse así:
$scope.closeAll = function() {
$scope.dateFrom.opened = false;
$scope.dateTo.opened = false;
};
Resolví mi problema usando este plunker con cambios menores.
HTML
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[0]" min-date="minDate" max-date="''2015-06-22''" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 0)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[1]" min-date="minDate" max-date="''2015-06-22''" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 1)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
y en el controlador
$scope.openDatePickers = [];
$scope.open = function ($event, datePickerIndex) {
$event.preventDefault();
$event.stopPropagation();
if ($scope.openDatePickers[datePickerIndex] === true) {
$scope.openDatePickers.length = 0;
} else {
$scope.openDatePickers.length = 0;
$scope.openDatePickers[datePickerIndex] = true;
}
};
mis cambios
en lugar de números (0 o 1) uso $index en angular ng-repeat .
Me gusta esto:
is-open="openDatePickers[**$index**]"
ng-click="open($event, **$index**)"
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[$index]" min-date="minDate" max-date="''2015-06-22''" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, $index)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>