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

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

Rana123Rana123 Posts: 3Questions: 1Answers: 0

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

Answers

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

  • Rana123Rana123 Posts: 3Questions: 1Answers: 0

    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.

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

  • Rana123Rana123 Posts: 3Questions: 1Answers: 0

    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

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

This discussion has been closed.