Questions on Kendo UI for jQuery Forum

1 answer

1.2K+ views

Hello, I can try add years after change calendar. but is not working

- using culture:"th-TH" (not working)

- set value: example value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY') (not working after change calendar)

I want results after change calendar:

12/01/2565 (Buddhist Year) just add 543

example link

$("#datepicker").kendoDatePicker({
        culture:"th-TH",
        format: 'dd/MM/yyyy',
        value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY'),
        open: function(e) {
        	console.log('open');
          this.value(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
        },
        change: function(e) {
          e.preventDefault();
          console.log('change');
        	console.log(this.value());
          console.log(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
        },
        close: function() {
          console.log('close');
        	// this.value(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
        }
});

Date/Time Pickers

answered on 14 Jan 2022

1 answer

1.5K+ views

Disable Dates from DatePicker

Hello,

I have a scenario when I want to disable special weekdays from Datepicker so the user can't choose those days.
Currently, the app is using react so is there a way to disable dates for kendo UI Datepicker

Calendar

Date/Time Pickers

answered on 14 Dec 2021

1 answer

460 views

How to validate an optional date with a date input mask

I have a dateinput field that I need to validate. Unfortunately I can't seem to figure out how to make it work. The requirements are as follows:

1. The date is optional.

2. If the date is provided, it must be a valid date.

3. The input mask could be in various languages.

When I try to validate I get invalid date when the date field just has the input mask (month/day/year) showing.

Here is a dojo showing my example.

https://dojo.telerik.com/@dojolee/ukIKedUL

Date/Time Pickers

answered on 18 Nov 2021

1 answer

270 views

Timepicker always displays midnight on blur

I am having an issue where when I select a different time from the timepicker it is reverting back to zero. I have created a dojo with 2 timepickers. Both are initiated in a loop and stored in an object with the key being the id of the input. My issue is that if I set dateInput to true the time reverts back to midnight on blur. When I console.log the value though it is the value I picked. This is only an issue on the timepicker that has the min and max options set. I need the user to be able to input a time using the datepicker formatting and only choose from select times.

Dojo:

https://dojo.telerik.com/@dojolee/UQuBiNoV

Date/Time Pickers

answered on 12 Nov 2021

1 answer

111 views

how to parse date

I have a grid where the date is being displayed in "MM/dd/yyyy" format. When the Edit button is clicked, a pop up opens up and the data is read into a date picker. The issue is date is displaying in the format "Wed Dec 18 2019 00:00:00 GMT-0600 (Central Standard Time)". How can I format the date to display in dat picker.

Date/Time Pickers

Grid

answered on 27 Oct 2021

1 answer

912 views

DatePicker - Date text disappears when using next/prev buttons

I'm using the DatePicker widget in conjunction with some next/prev buttons for switching the dates. I'm also setting a two-week window around the current date. The next/prev buttons are disabled accordingly when you select a date at either end of the window. The bug is - when future date is selected from the calendar, and then one of the next/prev buttons are used, the date text disappears. And after the first time the bug occurs, it will sometimes happen for previous dates too. Below is a working example of my code. Any help is appreciated!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  
    <button id="btnPrevDate" type="button">prev</button>

    <div class="demo-section k-content d-inline-block">
         <input id="scheduleDatePicker" title="datepicker" class="w-100" />
    </div>

    <button id="btnNextDate" type="button">next</button>

    <script>
        $(document).ready(function(){
             var currentDate = new Date();
    	     var selectedDate = new Date();
             var startDate = new Date();
    	     var endDate = new Date();

    	     selectedDate.setDate(currentDate.getDate());
    	     startDate.setDate(currentDate.getDate() - 7);
    	     endDate.setDate(currentDate.getDate() + 7);
          
             $("#scheduleDatePicker").kendoDatePicker({
                value: selectedDate,
        	min: startDate,
        	max: endDate,
        	change: function (e) {
            	    var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');

            	    selectedDate.setDate(datepicker.value().getDate());

                    if (selectedDate.getDate() == endDate.getDate()) {
                         $('#btnNextDate').prop('disabled', true);
                     } else if (selectedDate.getDate() == startDate.getDate()) {
                         $('#btnPrevDate').prop('disabled', true);
                     }

                     if (selectedDate.getDate() != endDate.getDate()) {
                         $('#btnNextDate').prop('disabled', false);
                     }
                     if (selectedDate.getDate() != startDate.getDate()) {
                         $('#btnPrevDate').prop('disabled', false);
                     }

                }
    	     });
          
             $('#btnPrevDate').on('click', function () {
                var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
                selectedDate.setDate(selectedDate.getDate() - 1);
                datepicker.value(selectedDate);

                $('#btnNextDate').prop('disabled', false);

                if (selectedDate.getDate() == startDate.getDate()) {
                    $(this).prop('disabled', true);
                }

             });
    
             $('#btnNextDate').on('click', function () {
                var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
                selectedDate.setDate(selectedDate.getDate() + 1);
                datepicker.value(selectedDate);

                $('#btnPrevDate').prop('disabled', false);

                if (selectedDate.getDate() == endDate.getDate()) {
                    $(this).prop('disabled', true);
                }

             });
        });
    </script>
</body>
</html>

Date/Time Pickers

answered on 31 Aug 2021

1 answer

439 views

Data- attribute for DateTimePicker component type?

Hi,

I'm using the data- attribute setup for a date time picker, and I can't seem to get component type (I'm looking for modern) to work. Might anybody know the correct attribute name?

<input name="start" required="required" style="z-index: inherit;" type="datetime"
                               data-bind="value:start,invisible:isAllDay"
                               data-format="M/d/yyyy h:mm tt"
                               data-component-type="modern"
                               data-role="datetimepicker" />

Date/Time Pickers

answered on 18 Aug 2021

1 answer

290 views

Kendo DateTime Picker Scrolling to Top of Page in Firefox

Hi. We're having a little issue with the Kendo DateTime picker in Firefox. If you put the DateTime picker somewhere on a page where you have to scroll down to see it and then you choose a date a couple of times from the dropdown, the page will scroll to the top of the page. Only happens in Firefox.

You can see it here: https://dojo.telerik.com/IvobAtIk

Thanks

Date/Time Pickers

answered on 06 Aug 2021

1 answer

207 views

Timepicker says invalid when typing in field

I have a timepicker field. The built in required rule is ignored since I am using a dateInput field for the masking. When the user types something wrong in the field such as "1:mm PM" (meaning they just typed a 1 in the field) it throws an error that says "A time is required". The console logs out "null" as the value of the time picker field. When the user then goes and types in the 00 so it reads "1:00 PM" it still says "A time is required" and still logs out "null" as the value. If the user then changes anything in the field to some other valid time the message goes away an it validates. How do I fix this?

Here is a Dojo demonstrating the issue:

https://dojo.telerik.com/@dojolee/AyuyAtaG/3

Date/Time Pickers

answered on 06 Aug 2021

1 answer

369 views

How to validate KendoTimePicker with mask but still allow no date

I have two Kendo Time Pickers on my page. Both are optional but I want to prompt the user to input the value in the format hh:mm am/pm. I want to use the KendoValidator to validate that the values are either empty or contain a valid time. Also, for the second input (end time), a valid time must exist in start time and it cannot come before the start time.

The first issue I am running into is that when using the dateInput: true option to enforce the format it is sending the string "hh:mm am/pm" to the validator as the date when the user enters nothing. Since this is not null it tries to validate it which it of course fails since "hh:mm am/pm" is not a date. This is also causing an issue with validating the required attribute on the startDate.

Another issue would be that this gets passed to the server as the invalid date string which would potentially cause issues on the back end.

Finally, when I do not enter a start date at all it should trigger the required message but it is not.

How can I solve this issue? Here is what my code looks like at the moment:

Initialize Time Pickers:

$.each($(".js-time-picker"), function (index, picker) {
    let id = $(picker).attr("id");
    timePickers[id] = $(`#${id}`).kendoTimePicker({
        dateInput: true,
        format: "h:mm tt",
        parseFormats: "HH:mm",
    }).data("kendoTimePicker");
    timePickers[id]._dateInput.setOptions({
        messages: {
            hour: "hh",
            minute: "mm",
            dayperiod: "am/pm"
        }
    });
});

Validator:

$(document).ready(function () {
    myValidator = $("#myForm").kendoValidator({
        rules: {
            timeValidation: function (input) {
                if ($(input).hasClass("js-time-picker")) {
                    var validDate = kendo.parseDate($(input).val());
                    if (!validDate) {
                        return false;
                    }
                }
                return true;
            }

        },
        messages: {
            required: "Required",
            timeValidation: "Invalid Time"
        },
        validateOnBlur: false
    }).data("kendoValidator");
});

HTML:

            <div class="form-element">
                <label id="startTimeLabel" for="startTime">Start Time</label>
                <input id="startTime" name="startTime" class="js-time-picker" required validationMessage="Invalid time entered" aria-labelledby="startTimeLabel" />
                <span class="k-invalid-msg" data-for="startTime"></span>
            </div>

            <div class="form-element">
                <label id="endTimeLabel" for="endTime">End Time</label>
                <input id="endTime" name="endTime" class="js-time-picker" validationMessage="Invalid time entered" aria-labelledby="endTimeLabel" />
                <span class="k-invalid-msg" data-for="endTime"></span>
            </div>

There is a submit button with an onClick event that calls myValidator.validate();