Get the formatted value in EJ2 datepicker

[vipin]

We have implemented the date picker using the Syncfusion EJ2 javascript component(@syncfusion/ej2). We are using the datepicker in the aurelia application. We have created an aurelia custom attribute using Syncfusion EJ2 datepicker. We are facing issues while changing the datepicker value. We have applied the format property to the datepicker . We have subscribed the "changeHandler" event but couldn't find any way for getting selected value. What is the exact way to get the formatted value when selecting the date? That means if  select the "2019-11-22" in datepicker, we need to get the value in the same format.

Attachment: Aurelia.Sample_e686af27.zip

[Sureshkumar P]

Hi Vipin, 

 

Greetings from Syncfusion support. 

 

Currently, we do not have Aurelia support for EJ2 components, we have already considered to provide Aurelia support for EJ2 components at our end and this support will be included in any one of our upcoming releases. We will implement the feature based on the customer request count and priority.  

 

You can track the status of the requested requirement from the below feedback link. 

 

Link: https://www.syncfusion.com/feedback/3789/new-framework-aurelia-support  

 

Also, we have an Aurelia support for our EJ1 components. We suggest  you to use our EJ1 DatePicker component in your application. 

 

To know more about our EJ1 datepicker components in Aurelia platform. Please refer to the below documentation and online demo links. 

 

Documentation link: https://help.syncfusion.com/aurelia/datepicker/getting-started  

 

Online demo link: https://aureliajq.syncfusion.com/?_ga=2.219981209.1420551952.1574653865-700510790.1573501450#/samples/datepicker/Default-Functionalities  

  

 

Regards, 

Sureshkumar P 

[vipin]

Thanks for your response. I don't want the aurelia support. I want the EJ2 date picker support. If we specify the format property, how we can get the selected value into the specified format in EJ2 

[Sureshkumar P]

Hi Vipin, 

 

Yes, we can get the specified format value by using change event. Kindly refer the below code block. 

 

let datepicker: DatePicker = new DatePicker({ 

    format: "yyyy/dd/MM", 

    change: onChange 

}); 

datepicker.appendTo('#datepicker'); 

 

function onChange(args) { 

    // specified format value in change event  

    console.log("specified Format Value(yyyy/dd/MM): " + args.element.value); 

 

} 

 

  

 

We have created a sample based on your requirement. please find the sample here: https://stackblitz.com/edit/l75a3n-44j2pi?file=index.ts  

 

To know more about change event and format  

 

Regards, 

Sureshkumar P 

[vipin]

Thank you so much for your response. I am using changeHandler event instead of change event. So how we can get the selected value into the specified format in changeHandler event?

[Sureshkumar P]

Hi Vipin, 

 

We would like to say, that we have overridden the native change event to trigger the change event, with our change event you can handle your requirement. We will be trigger our change event based on the validated date value in the datepicker input element. 

 

If issue persists, revert the detailed requirement and information to achieve your requirement while using our change event. 

 

Regards, 

Sureshkumar p 

[vipin]

Thanks for your support. I couldn't understand your solution. I have defined the format property as "yyyy/dd/MM". If we have subscribed the changeHandler event, please provide the code for getting the selected value in the specified format.

let datepicker: DatePicker = new DatePicker({ 

    format: "yyyy/dd/MM", 

    changeHandler: onChangeHandler

}); 

datepicker.appendTo('#datepicker'); 

 

function onChangeHandler(args) { 

    

 

} 

 

[Sureshkumar P]

Hi Vipin, 

 

We cannot bind the changeHandler event to our datepicker component. Because changeHandler is not our inbuild property. Please use our change event instead of changeHandler in your application.  

 

To know about our change event argument properties, kindly refer the below screenshot. 

 

 

 

We have created a sample with our inbuild change event. Please find the sample here: https://stackblitz.com/edit/l75a3n-71ctfe?file=index.ts  

 

To know more about our inbuild property. Kindly refer to our API documentation link: https://ej2.syncfusion.com/javascript/documentation/api/datepicker/  

 

If you are facing any other issues while using our change event instead of changeHandler, please revert with your specification that will help us to provide exact solution earlier. 

 

Regards, 

Sureshkumar P