Once a start date has been selected the end dates should be disabled beyond the chosen start date but its not getting disabled

[Aditya Nair]

<ejs-datepicker

                        ref="dateObj1"

                        v-model="EDate"

                        :format="dateFormat"

                        :value="EDate"

                        :min="SDate ? SDate : null"

                        floatLabelType="Auto"

                        cssClass="phonestart e-calendar-blue  e-custom date-v312"

                        :placeholder="'End Date'"

                        :data-msg-containerid="'edatemainError'"

                        :htmlAttributes="{

                          min: SDate ? utcDate(SDate, 2) : '9999-12-31',

                        }"

                        :data-required-message="$t('end_date.required')"

                        :data-min-message="$t('end_date.min')"

                        :data-regex-message="$t('end_date.validity')"

                        regex="^(?:(?:(?:0?[13578]|1[02]|(?:Jan|Mar|May|Jul|Aug|Oct|Dec))(\/|-|\.)31)\1|(?:(?:0?[1,3-9]|1[0-2]|(?:Jan|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec))(\/|-|\.)(?:29|30)\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:(?:0?2|(?:Feb))(\/|-|\.)(?:29)\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:(?:0?[1-9]|(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep))|(?:1[0-2]|(?:Oct|Nov|Dec)))(\/|-|\.)(?:0?[1-9]|1\d|2[0-8])\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$"

                      ></ejs-datepicker>

[Priyanka Karthikeyan]

Hi Aditya Nair,

 

To disable end dates beyond the chosen start date, you can use the min property in the end date's DatePicker component. Here's how you can modify your code to achieve that:

 

<template>

<div class="col-lg-12 control-section">

  <div id="wrapper">

    <Label>Start Date</Label>

    <ejs-datepicker id="startDatePicker" v-model="startDate" :placeholder="waterMarkText"></ejs-datepicker>

    <Label>End Date</Label>

    <ejs-datepicker id="endDatePicker" v-model="endDate" :placeholder="waterMarkText" :min="startDate"></ejs-datepicker>

  </div>

</div>

</template>

 

Sample: https://stackblitz.com/edit/ah9xvv-6zzczh?file=src%2FApp.vue

 

API Reference: https://ej2.syncfusion.com/vue/documentation/api/datepicker/#min

 

Regards,

Priyanka K

 

[Aditya Nair]

Hi,
The issue is when we add html attributes along with the ejs datepicker .The htmlAttributes is added so that the user may be allowed to type the date and validation takes place.When we remove htmlAttributes from the ejs datepicker the start date gets disabled. This is a major issue as we are in the production phase of the project.

[Priyanka Karthikeyan]

Hi Aditya Nair,

We have diligently worked on creating a simple sample in datepicker with htmlAttributes. However, regrettably, we were unable to reproduce any issues in the latest version.

To expedite the resolution process and provide you with the most accurate assistance, could you please consider modifying the shared sample to align it more closely with your specific scenario? Additionally, it would greatly assist us if you could provide detailed steps to replicate the issue on our end. 

Your cooperation in this matter is highly valued, and we are committed to ensuring a swift and effective resolution to any challenges you may be facing. Thank you for your time and collaboration.

Sample: https://stackblitz.com/edit/ah9xvv-ujienv?file=src%2FApp.vue
 

Regards,

Priyanka K

[Aditya Nair]

Hi,

I can see the Issue is also Present in the Sample code u have shared

See in the sample you had given the date is accepting past dates when typing (hard coding ) date to the input box and thereafter , datepicker past dates can be selected .

[Priyanka Karthikeyan]

Hi Aditya Nair,

 

Thank you for your patience. We have considered the reported issue "When we are typing the disabled date, the disabled date is selected when we enable the html attributes" as a bug from our end and the fix for the issue will be included on Second Weekly release after Volume 2 release which is scheduled at the end of June 2024.

 

Now you can track the status of the reported issue through the feedback below,

 

Feedback link:https://www.syncfusion.com/feedback/58554/when-we-are-typing-the-disabled-date-the-disabled-date-is-selected-when-we-enable

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Priyanka K

[Priyanka Karthikeyan]

Hi Aditya Nair,

 

Thank you for your patience. After thorough validation, we found that setting the 'min' values directly works because the date is provided in a format that the DatePicker component can recognize and parse correctly. However, when dynamically setting the calendar 'min' and 'max' values using htmlAttributes, you need to use the internationalization formatDate function. This ensures the date is formatted according to the specific locale and format settings of the DatePicker component, allowing it to interpret and apply the date values correctly within the specified range.

To set the 'min' dates in htmlAttributes using the internationalization formatDate function, you can follow the code snippet below:

 

 

<template>

  <div class="col-lg-12 control-section">

    <div id="wrapper">

      <label>Start Date</label>

      <ejs-datepicker

        id="startDatePicker"

        v-model="startDate"

        :placeholder="waterMarkText"

      ></ejs-datepicker>

      <label>End Date</label>

      <ejs-datepicker

        id="endDatePicker"

        v-model="endDate"

        :placeholder="waterMarkText"

        :min="startDate ? startDate : null"

        :htmlAttributes="{ min: startDate ? intl.formatDate(startDate,options) : '9999-12-31'}"

      ></ejs-datepicker>

    </div>

  </div>

</template>

 

<script>

import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';

import { Internationalization } from '@syncfusion/ej2-base';

export default {

  data() {

    return {

      waterMarkText: 'Choose a date',

      startDate: null,

      endDate: null,

      intl :new Internationalization,

      htmlattr: {

        min: this.startDate ? this.startDate : '9999-12-31',

      },

    };

  },

  components: { 'ejs-datepicker': DatePickerComponent },

  methods: {},

};

</script>

 

Sample: https://stackblitz.com/edit/ah9xvv-sr7ju6?file=src%2FApp.vue

 

Regards,

Priyanka K