This is a migrated thread and some comments may be shown as answers.
Kendo UI Date Picker with DateInput change in how Mask Displays.
3 Answers 93 Views
This is a migrated thread and some comments may be shown as answers.
Prashant
Top achievements
Rank 1
Prashant asked on 19 Oct 2018, 06:09 PM

Hi,

I'm Using Kendo UI Date Picker control with DateInput as true and Format as "MM-dd-yyyy". When Date Picker gets render, it shows me mask as "month-day-year" on control.

I want to display mask as "MM-DD-YYYY" to user. How I can change display of mask on control with DateInput true. Thanks!

My Code is as below:-

$ffield.kendoDatePicker({
dateInput: true,
format: "MM-dd-yyyy",
min: new Date(1700, 0, 1)
});

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 23 Oct 2018, 11:53 AM
Hello Prashant,

In order to customize the messages I would suggest the following approach. Get reference of the dateInput that is used by the picker. Then call setOptions method and pass the customized messages configuration.

The dojo below illustrates the approach:



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Prashant
Top achievements
Rank 1
answered on 23 Oct 2018, 09:28 PM

Thank you!. Can I make place holder look empty unless user focus on component? As by default the Place holder gets displayed on date component. I want place holder should displayed only when user focus in the component or it is not empty (Date is present).

Thanks,

Prashant

0
Viktor Tachev
Telerik team
answered on 25 Oct 2018, 11:30 AM
Hello Prashant,

The messages displayed in the DateInput are actually the value of the input element. Removing them can affect how the component behaves and result in unexpected behavior. 

As an alternative approach I can suggest specifying a custom CSS class for the DateInput and use it to style the text in it differently. Then in the change event remove that class so that selected the date is shown as normal text. The example below outlines the approach:

https://dojo.telerik.com/EhEJeLiX

Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Prashant
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Prashant
Top achievements
Rank 1
Share this question
or