0

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:

years months

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:

  1. Years: a future year (I want to disable future years)
  2. Months: of the selected year
  3. 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

enter image description here enter image description here

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:

enter image description here

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/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link media="all"
          href="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.49/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/eonasdan-bootstrap-datetimepicker@4.17.49/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>
Manuel Carrero
  • 599
  • 1
  • 9
  • 29
  • 2
    Can you create a snippet please. It will be easy t debug. – A Paul Jan 07 '21 at 04:41
  • I apologize, I tried to decrease all the unnecessary files and I finally found the js file, where the maxDate: new Date() line worked. I added the snippet below for anyone else – Manuel Carrero Jan 17 '21 at 03:03

0 Answers0