This is a migrated thread and some comments may be shown as answers.

DateInput should not display dateformat placeholders when no date is set and not focused

1 Answer 950 Views
DateInput
This is a migrated thread and some comments may be shown as answers.
Prashant
Top achievements
Rank 1
Prashant asked on 23 Oct 2018, 07:14 PM

Hi - I'm using Kendo Date Picker and Date Time Picker with Date Input True, also i have update message of date input to change how place holder should display. Her the problem is date format placeholders are displayed even though there is no date set or component is empty. Is there any solution so that place holder gets displayed only when the component is focused?

My Code as below.

$field.kendoDateTimePicker({
                            dateInput: true,
                            format: "MM-dd-yyyy hh:mm tt",
                            parseFormats: "yyyy-MM-dd-HH.mm.ss",
                            min: new Date(1700, 0, 1)
                        }).data('kendoDateTimePicker')._dateInput.setOptions({
                            messages: {
                                "month": "__",
                                "day": "__",
                                "year": "____",
                                "hour": "__",
                                "minute": "__",
                                "dayperiod": "__"
                            }
                        });

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

                        }).data('kendoDatePicker')._dateInput.setOptions({
                            messages: {
                                month: "__",
                                year: "____",
                                day: "__"
                            }
                        });

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 25 Oct 2018, 11:20 AM
Hi 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:


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.
Tags
DateInput
Asked by
Prashant
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or