javascript - example - datepicker angular 5
angular-ui datepicker max-date no funciona correctamente (1)
Estoy intentando que la min-date
max-date
se establezcan a partir de las datepicker-options
, pero no han tenido éxito. Se adjunta un fragmento de código.
¿Alguna ayuda? ¡Gracias!
angular.module(''ui.bootstrap.demo'', [''ui.bootstrap'']);
angular.module(''ui.bootstrap.demo'').controller(''DatepickerDemoCtrl'', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.dateOptions = {
formatYear: ''yy'',
minDate: ''05/01/2015'',
startingDay: 1
};
$scope.formats =[''dd/MM/yyyy'', ''dd-MMMM-yyyy'', ''yyyy/MM/dd'', ''dd.MM.yyyy'', ''shortDate''];
$scope.format = $scope.formats[0];
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 2);
$scope.events =
[
{
date: tomorrow,
status: ''full''
},
{
date: afterTomorrow,
status: ''partially''
}
];
$scope.getDayClass = function(date, mode) {
if (mode === ''day'') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i=0;i<$scope.events.length;i++){
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '''';
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:''fullDate'' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="dt" datepicker-options="dateOptions" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
</div>
</div>
</body>
</html>
<datepicker ng-model="dt" minDate="''05/01/2015''" datepicker-options="dateOptions" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
prueba esto, pon el minDate en el marcado