Why My Min and Max date setting not working in my date picker?

datepicker maxdate not working
input type=date min' => $today
how to set current date in input type=date in html
how to change input type=date format to yyyy-mm-dd
bootstrap-datepicker start date end date example
datepicker in html example
input type=date min/max
input type=date value

I previously asked question to set one date picker dates with respect to month/year change of another date picker. I didn't get exact answer, but somehow I managed to get min and max dates to set to a date picker by referring various stack overflow answers. But that min and max date settings are not working properly.

Month and year picking date picker:

 <label> Month</label>
 <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtMonth" onchange="MonthDatePick();">
    <div class="input-group-addon">
        <i class="fa fa-calendar"></i>
    </div>
</div>

My selected month date picking datepicker:

<div class="col-lg-3">
    <label> From</label>
    <div class="input-group date">
        <input type="text" class="form-control pull-right" id="txtFrom">
        <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
        </div>
    </div>
</div>

Script:

function MonthDatePick() {
  var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');            
var year = $('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');   
var minDate = new Date(year, month-1, 1);
 var maxDate = new Date(year,month, 0);
$("#txtFrom").datepicker({
    autoclose: true,
    minDate: minDate,
    maxDate: maxDate,
    format: 'dd/mm/yyyy',
    //defaultDate:minDate,
    changeMonth: false,
    changeYear: false,
});
}

I debugged and found out that when I select month, min and max dates were defined. For Ex: If I choose, Feb 2018 means,

min date comes as :01/02/2018

max date comes as : 28/02/2018,

but the change does not replicate in my date selecting date picker

Debugging image picture

Debugging image picture showing min date

Here is my fiddle

How to fix this?

Please try this code

HTML Code :

<label> Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtMonth" onchange="MonthDatePick();">
<div class="input-group-addon">
    <i class="fa fa-calendar"></i>
</div>
</div>

<div class="col-lg-3">
<label> From</label>
<div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtFrom">
    <div class="input-group-addon">
        <i class="fa fa-calendar"></i>
    </div>
</div>
</div>

JS Code :

<script type="text/javascript">
   $("#txtMonth").datepicker({
   autoclose: true,
   startView: "months", 
   minViewMode: "months",
   format: 'M-yyyy',
   //defaultDate:minDate,
   changeMonth: false,
   changeYear: false,
});

function MonthDatePick() {
   var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');            
   var year = 
   $('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');   
   var minDate = new Date(year, month-1, 1);
   minDate = minDate.toLocaleDateString('en-GB');
   var maxDate = new Date(year,month, 0);
   maxDate = maxDate.toLocaleDateString('en-GB');
   $("#txtFrom").datepicker('destroy').datepicker({
      autoclose: true,
      startDate: minDate,
      endDate: maxDate,
      format: 'dd/mm/yyyy',
      //defaultDate:minDate,
      changeMonth: false,
      changeYear: false,
   });
  $('#txtFrom').datepicker('setDate',minDate);
}
</script>

Output of the code :

How to set Min and Max Date · Issue #514 · kekeh/mydatepicker , I need to show only between date of given min and max date Code Issues 114 Pull requests 12 Projects 0 Actions Wiki Security 0 Pulse. Dismiss. Join GitHub today. GitHub is home to over 50 million developers working together to host https://github.com/kekeh/mydatepicker/wiki/Set-disableUntil-option  I debugged and found out that when I select month, min and max dates were defined. For Ex: If I choose, Feb 2018 means, min date comes as :01/02/2018 max date comes as : 28/02/2018, but the change does not replicate in my date selecting date picker. Debugging image picture. Debugging image picture showing min date. Here is my fiddle. How to fix

You are not using the correct options:

  function MonthDatePick() {
      var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');            
      var year = $('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');   
      var minDate = new Date(year, month-1, 1);
      var maxDate = new Date(year,month, 0);
      $("#txtFrom").datepicker({
        autoclose: true,
        startDate: minDate,
        endDate: maxDate,
        format: 'dd/mm/yyyy',
        //defaultDate:minDate,
        changeMonth: false,
        changeYear: false,
      });
    }

Change minDate with startDate and maxDate with endDate

See bootstrap-datepicker documentation

datePicker and minDate/maxDate/defaultDate/dateFormat not , I'm working on a template for WordPress that is utilizing jQuery UI's and no dates are selectable presumably because my min/max dates are out of range If I remove the minDate/maxDate options, today's date is displayed,  First, identify the date of the most recent price change for each part; then, get the corresponding price. I'll be assuming your part numbers are up to 20 characters long, your description up to 250 characters long, and that the type of your pc.recalc_date column is datetime ; replace with valid values for your system.

You're currently attempting to recreate an existing datepicker. Instead, modify the current instance using the setStartDate and setEndDate methods.

$("#txtClaimFrom").datepicker("setStartDate", minDate);
$("#txtClaimFrom").datepicker("setEndDate", maxDate);

$(document).ready(function() {
  $('#txtClaimMonth').datepicker({
    autoclose: true,
    format: "MM yyyy",
    viewMode: "months",
    minViewMode: "months",
  });
  $('#txtClaimFrom').datepicker({
    autoclose: true,
    format: 'dd/mm/yyyy'
  })
});

function MonthDatePick() {
  var month = $('#txtClaimMonth').datepicker('getDate').getMonth() + 1; //('getMonth');            
  var year = $('#txtClaimMonth').datepicker('getDate').getFullYear(); //('getFullYear');   
  var minDate = new Date(year, month - 1, 1);
  var maxDate = new Date(year, month, 0);
  $("#txtClaimFrom").datepicker("setStartDate", minDate);
  $("#txtClaimFrom").datepicker("setEndDate", maxDate);
}
.col-lg-3 { margin-bottom: 180px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<div class="col-lg-3">
  <label>Claim Month</label>
  <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtClaimMonth" onchange="MonthDatePick();">
    <div class="input-group-addon bg-purple">
      <i class="fa fa-calendar"></i>
    </div>
  </div>
</div>
<div class="col-lg-3">
  <label>Claim From</label>
  <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtClaimFrom">
    <div class="input-group-addon bg-purple">
      <i class="fa fa-calendar"></i>
    </div>
  </div>
</div>

<input type="date">, If both the max and min attributes are set, this value must be a date However, there are currently issues with <input type="date"> If you use min and max to restrict the available dates (see Setting maximum and minimum dates), I'm okay with Mozilla handling my info as explained in this Privacy Policy. 1. when I separate date and time pickers, the time shows up in the date form field with the date 2. when I separate date and time pickers, the date shows up in the time form field 2. The min date does not seem to be working, I can select tomorrow’s date.

Behaviour Settings, Configure DatePicker Behaviour settings. By default, strict mode is enabled in DatePicker, so it will restrict invalid date and resets to previous date if it's not valid​. minDate - specifies the minimum date to be picked in DatePicker calendar by You can change the 'minDate' and 'maxDate' value dynamically like 'value'  Re: Min() and Max() not working. Oddly returns 0 Well, the shameful truth is that I have to run a report over a hundred times and apply the report's data to my spreadsheet.

Datepicker Widget, This widget requires some functional CSS, otherwise it won't work. If you build a Use the altFormat option to change the format of the date within this field. Normally the previous and next links are disabled when not applicable (see the minDate and maxDate options). Date: A date object containing the minimum date. The min attribute specifies the minimum value for an <input> element. Tip: Use the min attribute together with the max attribute to create a range of legal values. Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.

React DatePicker Component & Overview, Try the React DatePicker component by KendoReact that covers everything Setting the default value—Easily configure the initial value that the as minimum and maximum date) and prevent the submission of forms which are in an invalid state. KendoReact uses GitHub Issues as its bug tracker and you can submit any  If the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no maximum date value. If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.

Comments
  • I dont see the minDate and maxDate properties in the documentation. Are you sure they are valid?
  • Be careful: There are two nearly identical jQuery plugins, both with the name Datepicker. One is the Bootstrap Datepicker, the other is the jQueryUI Datepicker. They have minor differences that could be responsible for your issues here. For example, jQueryUI datepicker uses minDate, but the Bootstrap Datepicker uses startDate. If you are in fact using the Bootstrap datepicker (as you've tagged), then your properties are incorrect.
  • @TylerRoper Kindly check my question that I edited and added image of my debugging picture, that shows min/max date, in this I choosed march 2019, so It shows march date.
  • @Riya are you using bootstrap-datepicker or jqueryUI datepicker?
  • The value of your minDate variable being correct doesn't tell us much; as Below the Radar asks, we will need to know which datepicker you're truly using, because they use different property names. Better yet, your question should include a minimal, reproducible example, otherwise it's off-topic (#1).
  • wow..your one work like awesome.. this fixed my problem that I was struck more than 2 weeks.. thank u so much...
  • can u kindly explain minDate.toLocaleDateString('en-GB'); this line plz, what does en-GB stands for?
  • @Riya Here i am using toLocaleDateString('en-GB') if you will change the format of date then you also need to change this. Because you are using dd/mm/yyyy so this format is fit for this situation.
  • @Riya minDate.toLocaleDateString('en-GB') this will convert your date to dd/mm/yyyy If you will use minDate.toLocaleDateString('en-US') then it will give mm/dd/yyyy
  • Is there any way to display min date that is 01/01/2021 to the from textbox after selecting month and yea,defautly? ,coz default date not working for me...
  • I tried start date end date now, that too not working, my 'txtfrom' datepicker just shows all month dates with current date as default
  • I tried ur one sir, but not working for me sir.. Mr. Amit Kumar answer worked for me sir.. THank you so much for ur replies and help sir..