First of all, I've discard the following similar questions:
Disable future dates in jQuery UI Datepicker
Disable future dates after today in Jquery Ui Datepicker
Disable Months On Month/DatePicker
I have the following date-picker-month (I'm using: jQuery UI Datepicker 1.11.4. ):
<div class="col-xs-6">
<div class='input-group date' >
<input
type="text"
class="form-control date-picker-month disabled"
id="datePickerMonth"
value="{{ mes_actual|date:"m/Y" }}"
autocomplete="off"
>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
So it looks like this:
I just want to disable the selection of future years. If I add the maxDate property (which is the suggested answer in many similar questions) like this:
$(function() {
$("#datePickerMonth").datepicker({
maxDate: new Date() // the same with maxDate: 0
});
});
Then I can select:
- Years: a future year (I want to disable future years)
- Months: of the selected year
- Days: it display days until the current date but, if I select one of these days, the selected day becomes in the year, even if I previously selected a future year
I tried with this:
$(function() {
$("#descuentos_hasta").datepicker({
beforeShowDay: function (){
return [false, ''],
},
});
});
But I get the same result as if I hadn't used it: I still can select future years and months.
I hope to achieve something like this:
Where years in gray circle were been disable, and the same thing with the future months,
This answer is close, but I get the same behaviour that I described related with the days and my datepicker is only with years-months.
Please, any help will be appreciated.
UPDATED: SOLVED
I apologize, I tried to decrease all the unnecessary stuff and I finally found the js file, where the maxDate: new Date() line worked. I added the snippet below for anyone else.
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link media="all"
href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/bootstrap-datetimepicker.css"
rel="stylesheet">
</head>
<body>
<div class="col-xs-3">
<div class='input-group date' >
<input type="text" class="form-control date-picker-month disabled" name="datePickerMonth" id="datePickerMonth" }}" autocomplete="off">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/js/bootstrap-datetimepicker.min.js"></script>
</body>
<script type="text/javascript">
if ( $('.date-picker-month')[0]){
$('.date-picker-month').datetimepicker({
//format: 'YYYY-MM-DD'
viewMode: 'years',
format: 'MM/YYYY',
widgetPositioning: { horizontal: 'auto', vertical: 'auto'},
maxDate: new Date()
});
}
</script>
</html>