DatePicker left arrow not displaying for one month in End Date textbox

Rana123

In End Date DatePicker left arrow not displaying for one month( textbox although Min Date set for the field.)

We have created 2 Date fields, one with Start and another with End. We populate both with default values and both min dates and max dates set to the fields. But in the End field date picker is not displaying a left arrow to move to the min date provided.
for example:- Start Date: 10/APril/2019 EndDate: 20/July/2019. Able to see the left-arrow up to June(means i can move up to May but not able to go into April) but don't see a left arrow to go April.

We are using 1.7.3 version.

Thank you in Advance

colin

Hi @Rana123 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Rana123

Hello Colin,

We have two text boxes one for start date populates date from the selected campaign start date of another text box and the second text box for end date which populates date from campaign end date text box. User should be able to select dates between Campaign start and end dates in those two new Textboxes (Start Date and end date).

Campaign start date: 08/April/2019
Campaign End Date: 20/July/2019
Auto Populate:
Start Date: 08/April/2019
End Date: 20/July/2019

Now we want to select End Date as 09/April/2019 (as the end user can change this value between selected dates) but we are not able to move from May to April(left arrow icon is missing while we are in month May)

// Populating default values
var minDate = new Date($('#CampaignStartDate').val());
var maxDate = new Date($('#CampaignEndDate').val());
editor.field('Start').val(minDate);
editor.field('End').val(maxDate);

//Provided Min and Max dates to both start and End date
editor.field('Start').minDate(minDate);
editor.field('Start').maxDate(maxDate);

editor.field('End').minDate(endMinDate);
editor.field('End').maxDate(maxDate);

Thank you for your help.

colin

Hi @Rana123 ,

Could you modify this test case, please, to demonstrate the problem, or could you link to your page that shows the problem - as I said above, it would make it easier to understand the issue.

Cheers,

Colin

Rana123

Hi Colin,

I have coded my scenario in the below link
http://live.datatables.net/wegowafu/78/
And not able to execute the exact scenario but we have pasted the code which we have used.
Please have a look at it.

Thank you

colin

Hi @Rana123 ,

Ah, I see. The problem you're having is that minDate() and maxDate() aren't methods, they're properties - see here.

What you would need to do is something like this (note: not tested, so may be wonky):

editor.on('preOpen', function (e, json, data) {
  var minDate = new Date($('#CampaignStartDate').val());
  var maxDate = new Date($('#CampaignEndDate').val());
    
  editor
    .clear('start_date')
    .add({
                label: 'Start date:',
                name: 'start_date',
                type: 'datetime',
                format: 'YYYY/M/D',
                opts: {
                                    minDate: minDate,
                    maxDate: 'datetime'
                                }
    });
                
  // SAME HERE FOR MAX DATE
});

Hope that does the trick,

Cheers,

Colin