Always open datepicker

[Davy Jansen]

Hello,

I was wondering if there is a possibility to always keep the daterangepicker open? I have looked at the calendar but then there is no posibility for the double datepickers. 

I am now using the ejs-daterangepicker component.

This is an example design of how it should work:

[Mallesh Ravi Chandran]

Hi Davy ,

Based on the information provided, if you wish to keep the date range picker popup open, you can achieve this by setting 'args.cancel' to 'true' in the 'close' event. Additionally, we have prepared a simple sample for your reference.

 <ejs-daterangepicker

      :close="handleDateRangePickerClose"

    ></ejs-daterangepicker>

<script>

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

export default {

  methods: {

    handleDateRangePickerClose(args) {

      args.cancel = true;

    },

  },

};

</script>

 

Sample : https://stackblitz.com/edit/vue-dgbgd8?file=package.json,src%2FApp.vue

API reference: https://ej2.syncfusion.com/vue/documentation/api/daterangepicker/#close

Regards,

Mallesh

[Davy Jansen]

Hi,

Doing this still opens a popup, it would be better it there was an mode for the datepicker that makes it inline instead.

Do i need to open a feature request for this?

Thanks

[Mallesh Ravi Chandran]

Hi Davy,

We apologize for any inconvenience you may have experienced with the previous sample. We have now prepared an updated sample that demonstrates how to show the date range picker popup within an event handler. To achieve this, you simply need to call the 'show' method. Additionally, by setting 'args.cancel' to 'true' in the 'close' event, you can prevent the closing of the popup.

Here is a code snippet illustrating the implementation:

  <ejs-daterangepicker

        id="daterangepicker"

        :created="onDateRangePickerCreated"

        :close="onDateRangePickerClose"

        :placeholder="waterMarkText"

        ref="dateRangePickerRef"

      ></ejs-daterangepicker>

 

---------------------------------------------

methods: {

    onDateRangePickerCreated(args) {

      this.$refs.dateRangePickerRef.show();

    },

    onDateRangePickerClose(args) {

      args.cancel = true;

    },

  },

 

Sample : Vepwkl (forked) - StackBlitz

API Reference:

Show method - https://ej2.syncfusion.com/vue/documentation/api/daterangepicker/#show

Created event – https://ej2.syncfusion.com/vue/documentation/api/daterangepicker/#created

Close event - https://ej2.syncfusion.com/vue/documentation/api/daterangepicker/#close

To better assist you, we kindly request more details about your specific use case and the requirements you have for this feature. Providing additional information will enable us to offer a more tailored solution to meet your needs.

Regards,

Mallesh