On datepicker calendar how to set date to property 'minDate' without disabling previous months

Question

I want to set minDate on Date to calendar #dateto without disabling previous months.

By default the calendar #datefrom and #dateto have set property minDate to today

Take for example that the today date 2019-2-8

The goal is to select the date 2019-5-15 from the '#datefrom' calendar and set this date in the #dateto calendar as minDate, and the calendars #dateto will be set to 2019-5 -15 as minDate and I want to move normally to month 2, now I can not because I was blocked in previous months.

Date from

  $('#datefrom').datepicker({
           stepMonths: 1,
           numberOfMonths: 2,
           minDate : 'today',
           dateFormat: 'yy-mm-dd',
           showOtherMonths: true,
           onSelect: function(date){
             $('.datefrom-text').text(date);
             $('#dateto').datepicker('option', 'minDate', date);
           }
        });

Date to

$('#dateto').datepicker({
 stepMonths: 1,
 numberOfMonths: 2,
 minDate : 'today',
 dateFormat: 'yy-mm-dd',
 showOtherMonths: true,
 onSelect: function(date){
  $('.dateto-text').text(date);
 }
});

Here is my jsfiddle example

Hi @NicoHaase, as title reads, I want to set minDate on the second calendar but I need to be able to see previous months (not available but visible). Check jsfiddle example it will be clear, slelect May 1 on first calendar, then I want to be able to see months Feb/Mar/Apr in second calendar when minDate is set. Thanks — Sandi Milohanic, Feb 08 '19 at 16:26
Please edit your question to contain all information. Additionally, explain what works yet and where you are currently struggling to get forward — Nico Haase, Feb 08 '19 at 16:30

score 1 · Accepted Answer · answered Feb 08 '19 at 20:56

1

I managed to move calendars by calling internal datepicker method, so I hope it will help you to get what you need. Check my jsfiddle fork

$.datepicker._selectMonthYear( '#dateto', document.getElementById("fakeMonthSelected"), "M" );

Davor

answered Feb 08 '19 at 20:56

Davor

400
5
12

score 1 · Answer 2 · answered Feb 10 '19 at 12:26

You could probably use beforeShowDay http://api.jqueryui.com/datepicker/#option-beforeShowDay It gets called for every date before it's shown on screen. You could define a function that would manually check if the date was selectable (date > minDate) and return that from the function. Haven't tried it, but I believe it should work.

On datepicker calendar how to set date to property 'minDate' without disabling previous months

2 Answers2