Show preset label as the placeholder in DateRangePicker.

[Vinay Adiga]

I am using the DateRangepicker component. I need to show preset label instead of actual dates. Is it possible?

This is the code snippet I am using.

[Priyanka Karthikeyan]

Hi Vinay Adiga,

 

To display the preset label as the placeholder in the DateRangePickerComponent after selecting a preset, you can dynamically update the placeholder inside the change event. This approach allows you to set the placeholder to the label of the selected preset. Below is the updated code snippet to achieve this behavior:

 

 

 const handlePresetChange = (args) => {

        dateRange.current.placeholder = dateRange.current.presetElement.querySelector(".e-active").textContent

    };

    return (<div className='control-pane'>

            <div className='control-section'>

                <div className='datepicker-control-section'>

                    <DateRangePickerComponent ref={dateRange} placeholder='Select a range'  change={handlePresetChange} floatLabelType={"Always"}>

                        <PresetsDirective>

                            <PresetDirective label="This Week" start={weekStart} end={weekEnd} ></PresetDirective>

                            <PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>

                            <PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>

                            <PresetDirective label="Last Year" start={yearStart} end={yearEnd}></PresetDirective>

                        </PresetsDirective>

                    </DateRangePickerComponent>

                </div>

            </div>

        </div>);

};

 

 

Sample: https://stackblitz.com/edit/react-hjwoju-vptt3i?file=index.js

 

Regards,

Priyanka K

[Vinay Adiga]

The design we are planning needs the preset label to be in place of Date Range instead of on the component.

[Priyanka Karthikeyan]

Hi Vinay Adiga,

 

Thank you for sharing the information. By default, the DateRangePicker component includes validation. If an invalid value, such as preset label text or an invalid date range format, is bound to the component, it will automatically add an error class to indicate the issue. Due to this, we are unable to bind the preset label text directly to the component.

 

To enhance the user experience, we have added a tooltip to the DateRangePicker, which displays the preset label when hovering over the component. Please find the code snippet and a sample for your reference below:

 

 

 useEffect(() => {

        debugger

        const tooltip = new Tooltip({

            beforeRender: onBeforeRender,

            content: 'Loading...',

            position: 'TopCenter',

            target: '.e-daterangepicker'

        });

        tooltip.appendTo('body');

    }, []);

 

    const onBeforeRender = (args) => {

        if (dateRange.current.presetElement) {

        document.getElementsByClassName("e-tooltip")[0].ej2_instances[0].content =dateRange.current.presetElement.querySelector(".e-active").textContent; }

    };

 

Sample: https://stackblitz.com/edit/react-hjwoju-rk3fdn?file=index.js,index.html

 

Regards,

Priyanka K