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

Question

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?

I dont see the minDate and maxDate properties in the [documentation](https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#maxviewmode). Are you sure they are valid? — Below the Radar, Sep 23 '19 at 18:08
**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`](https://api.jqueryui.com/datepicker/#option-minDate), but the Bootstrap Datepicker uses [`startDate`](https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate). If you are in fact using the Bootstrap datepicker (as you've tagged), then your properties are incorrect. — Tyler Roper, Sep 23 '19 at 18:13
@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, Sep 23 '19 at 18:19
@Riya are you using bootstrap-datepicker or jqueryUI datepicker? — Below the Radar, Sep 23 '19 at 18:19
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**](https://stackoverflow.com/help/minimal-reproducible-example), otherwise it's [off-topic (#1)](https://stackoverflow.com/help/on-topic). — Tyler Roper, Sep 23 '19 at 18:21
I tried with the start date/end date property too ,still its not working. ` ` this is the datepicker that I am using so I tagged with bootstrap datepicker — Riya, Sep 23 '19 at 18:21
@Riya Perhaps rather than recreating the whole datepicker, you should simply set the property you're trying to change: `$('#txtFrom').datepicker('setStartDate', minDate);`? (suggested by [this answer](https://stackoverflow.com/questions/30456270/bootstrap-datepicker-change-mindate-startdate-from-another-datepicker)) — Tyler Roper, Sep 23 '19 at 18:24
@TylerRoper Kindly check my fiddle http://jsfiddle.net/zdjwsvu5/ — Riya, Sep 23 '19 at 18:34

Below the Radar · Answer 1 · 2019-09-23T18:15:03.607

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

I tried start date end date now, that too not working, my `'txtfrom'` datepicker just shows all month dates with current date as default — Riya, Sep 23 '19 at 18:20

Tyler Roper · Answer 2 · 2019-09-23T19:04:21.883

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>

Alternatively, you could remove the current datepicker and re-initialize it from scratch. Note that Bootstrap Datepicker uses startDate and endDate as options, not minDate and maxDate.

$("#txtClaimFrom").datepicker("remove");
$("#txtClaimFrom").datepicker({
  autoclose: true,
  startDate: minDate,
  endDate: maxDate,
  format: 'dd/mm/yyyy',
  changeMonth: false,
  changeYear: false,
});

$(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("remove");
  $("#txtClaimFrom").datepicker({
    autoclose: true,
    startDate: minDate,
    endDate: maxDate,
    format: 'dd/mm/yyyy',
    changeMonth: false,
    changeYear: false,
  });
}

.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>

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.. — Riya, Sep 24 '19 at 07:28

Amit Kumar PRO · Accepted Answer · 2019-09-24T07:35:18.760

0

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 :

edited Sep 24 '19 at 07:35

answered Sep 23 '19 at 19:47

Amit Kumar PRO

1,222
2
15
27

1

wow..your one work like awesome.. this fixed my problem that I was struck more than 2 weeks.. thank u so much... – Riya Sep 24 '19 at 07:20
can u kindly explain `minDate.toLocaleDateString('en-GB');` this line plz, what does en-GB stands for? – Riya Sep 24 '19 at 07:21
1

@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. – Amit Kumar PRO Sep 24 '19 at 07:22
1

@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` – Amit Kumar PRO Sep 24 '19 at 07:25
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... – Riya Sep 24 '19 at 07:26
Yes Just add `$('#txtFrom').val(minDate);` after initialising datepicker in `MonthDatePic()` – Amit Kumar PRO Sep 24 '19 at 07:31
I found it my self, adding this line `$('#txtFrom').datepicker('setDate',minDate);` at the end of my monthdatepick()-before the closing braces,fixed my requirement.. kindly add this line in ur given answer, so that,it exactly satisfies my need and will help others in future too.. thank you – Riya Sep 24 '19 at 07:31
sir even ur solution working too..`$('#txtFrom').val(minDate);`. But I saw this after posted my comment only.. so adding ur one also fine,no issues... – Riya Sep 24 '19 at 07:39
This answer worked for me,so I ticked it as right answer. I dont know who gave down vote. It will be better, if u explain, y u gave down votes with reason..so that we can understand too right?? – Riya Sep 25 '19 at 08:26

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

3 Answers3