Show Preset Button

[Khalipha Thomas]

Im looking for a way to use the DateRangePicker api call of showing the presets of a daterange picker without having to actually click the daterange button to get the presets. Is this possible? I know there's a way to use the api call to show the daterange calendar but there doesnt seem to be a way from the documents to show the daterangepicker presets. Any help with this question would be 

[UdhayaKumar Duraisamy]

Hi Khalipha,

We have created a sample for your requirement and attached it below. We can achieve the requested requirement by calling the Show() method in the focus event of the DateRangePicker component. Please refer to the below code snippet, documentation, and sample for reference.

 <ejs-daterangepicker ref='dateRangePicker' id='dateRangePicker' :placeholder="waterMark" :focus='onFocus'>

            <e-presets>

                <e-preset label="This Week" :start='weekStart' :end='weekEnd'></e-preset>

                <e-preset label="This Month" :start='monthStart' :end='monthEnd'></e-preset>

                <e-preset label="Last Month" :start='lastStart' :end='lastEnd'></e-preset>

                <e-preset label="Last Year" :start='yearStart' :end='yearEnd'></e-preset>

            </e-presets>

        </ejs-daterangepicker>

 

methods: {

        onFocus: function (e) {

          this.$refs.dateRangePicker.show();

        }

      }

 

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

Attachment: drp_aaf4e5b0.zip

[Khalipha Thomas]

So I noticed that when I try to make the daterange picker itself's css properties for display to be none, the calendar itself disappears only after the date was set the first time. Is there anyway I can have the display still be none and based off a span click event but still have the daterange popup calendar when I need it to? I've attached the project for you to see what I am seeing. Just copy the code from the App.vue file to see the problem I am having.

Also is there anyway I can control the placement of the daterange pop up calendar on the screen?

Attachment: src_595f09f9.zip

[UdhayaKumar Duraisamy]

Hi Khalipha,

We can change the popup position of the DateRangePicker component as mentioned below. You can set the popup position X as ”left” and Y as “top” in the open event and set the offsetX and offsetY positions with a number value as per your requirement to position the DateRangePicker popup.

 

methods: {

    showMe: function () {

      this.$refs.dateRangePicker.show();

    },

    OnOpen: function(args){

      args.popup.position = { X: 'left' ,  Y :'top'};

      //Change the offset posotion based on your requirement

      args.popup.offsetX = 500;

      args.popup.offsetY = 50;

    }

  },

 

Please refer to the sample for reference.

Regards,

Udhaya Kumar D

Attachment: App_35b094e8.zip

[Khalipha Thomas]

I did notice that the change in the initial show method of the daterangepicker being corrected. However I have noticed an issue where after you select a date range preset for the daterangepicker, when you try to run the same method to show the daterangepicker, Im only seeing the presets loaded. And when you click the 'custom range' preset again, the popup position is reset to being in the corner of the screen. 

[UdhayaKumar Duraisamy]

Hi Khalipha,

We are validating the requirement. We will update the further details in two business days (3^rd June 2022).

Regards,

Udhaya Kumar D.

[UdhayaKumar Duraisamy]

Hi Khalipha,

Sorry for the inconvenience caused.

Due to complexity, we are still checking the possibilities for your requirement. We will update the further details in two business days (7^th June 2022).

Regards,

Udhaya Kumar D.

[UdhayaKumar Duraisamy]

Hi Khalipha,

We can solve the issue by overriding the showPopup prototype in the DateRangePicker component to set the position to left. In the below code snippet the popup position is changed in the Vue lifecycle method (mounted).

mounted() {

       (DateRangePicker).prototype.showPopup = function () {

this.popupObj.position = { X: 'left' };

this.presetHeight(),

1e3 === this.zIndex

          ? this.popupObj.show(null, this.element)

          : this.popupObj.show(null, null),

this.isMobile && this.popupObj.refreshPosition();

    };

    }

 

[CSS]

.Drp {

  margin-top: -30px;

 visibility: hidden;

}

 

Regards,

Udhaya Kumar D.

Attachment: App_60151881.zip

[Khalipha Thomas]

Thank you so much Udhaya, the positioning of the pop up calendar now doesnt change. However I do have one query:  I need to have this solution be done in typescript as that is language we are using if that isnt too much trouble to ask. I had originally tried to change the datepicker.d.ts file's accesss modifiers for 

showPopup,

presetHeight,

popupObj,

isMobile

howeveri keep getting typescript errors telling me I am unable to change access these properties since they are private.

[UdhayaKumar Duraisamy]

Hi Khalipha,

We suggest you use “as any” for private fields as per the below code snippet.

mounted() {

       (DateRangePicker as any).prototype.showPopup = function () {

this.popupObj.position = { X: 'left' };

this.presetHeight(),

1e3 === this.zIndex

          ? this.popupObj.show(null, this.element)

          : this.popupObj.show(null, null),

this.isMobile && this.popupObj.refreshPosition();

    };

    }

 

Regards,

Udhaya Kumar D.