I have a Kendo Date Picker for AngualrJS and I would like to color the individual day cells for a given day within the month.

How do I do that?

I see the JQuery solution, but how do I do that in AngualrJS?

Hi team,

I often use the kendo custom download facility, works good usualy.

Now I have a problem with grid column grouping that seems broken due to the missing of chiplist component. (R2023.1.425).

But when you select all grid options in custom download, it does not select automatically the ChipList component. Please advise...

Another question please: what is the "DateInputCommon" entry. Should it be selected when taking any other date thing like "DatePicker" ?

Best regards,

Laurent.

As the subject says, I'm looking for the recommended way to clone existing DateTimePicker controls at run time so that users can create as many controls as are necessary.

Our application allows users to clone rows of data that contain both DatePickers and DateTimePickers.  We recently upgraded from a previous version of Kendo UI to 2022.3.1109 and now the code that used to work does not.

If we don't execute the following, the look and feel is correct (but nothing happens when either the date or time controls are clicked):

If we do execute the above, the control appears as shown in the second row below...

...and the following error appears in the console:

I am able to create cloned fields if I write the appropriate HTML from scratch (e.g., embed a constant in the JavaScript function), but there's other logic that's fired that we need to take care of so that's not optimal.

I've also tried getting the options from the original control and applying them to the cloned control, but that also doesn't work, nor does attempting to destroy the control via $("#controlName").data("kendoDateTimePicker").destroy().  (My guess is that the underlying Kendo logic doesn't know about the cloned controls so the calls fail.)

Any help on what the best practice is would be greatly appreciated!

Can't write down two digits in day section

the code in below

https://dojo.telerik.com/UmoNUrUN

When the following code is run, I get an error in the console indicating that .kendoDateTimePicker is not a function, but the controls render when the convertNewPickerControl() method is called outside the $(document).ready() function.

I also get the same error when I try to convert cloned inputs dynamically (e.g., when a user presses the "Add" button.

The following is the code for the entire page (I'm getting the same issue in our product using similar code).

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/kendo/2022.3.1109/kendo.all.min.js"></script>

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/styles")
@Styles.Render("~/Content/kendo/css")

<style>
    .row {
        padding-top: 12px;
        padding-bottom: 12px;
    }
</style>

<main>

    <div id="cloneDiv" style="display:none;">
        <div id="row0" class="row">
            <div class="col-md-1 form-label">Date/Time:</div>
            <div class="col-md-5">
                <input id="dateTimePickerFrom_row0" />
            </div>
            <div class="col-md-5">
                <input id="dateTimePickerTo_row0" />
            </div>
            <btn id="button_row0" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>

    <div id="parentDiv">
        <div id="row1" class="row">
            <div class="col-md-3">
                <input id="dateTimePickerBase_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerFrom_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerTo_row1" class="date-time-picker" />
            </div>
            <btn id="button_row1" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>
</main>

<script>

    var row = parseInt(1);

    console.log('converting before document ready...');
    convertNewPickerControl("dateTimePickerBase_row1")

    $(document).ready(function () {
        console.log('converting within document ready...');
        convertNewPickerControl("dateTimePickerFrom_row1");
    });

    console.log('converting after document ready...');
    convertNewPickerControl("dateTimePickerTo_row1");

    function convertNewPickerControl(sender) {

        var savedStartDate = new Date();

        $("#" + sender).kendoDateTimePicker({
            format: "MM/dd/yyyy hh:mm:ss tt",
            value: savedStartDate,
            min: savedStartDate
        });
        console.log('...successfully converted.');
    }

    function addNewRow(sender) {

        var sourceRow = $('#row0');
        var newRow = $('#row' + row);
        var currentRowNumber = 'row' + row;
        var regex = new RegExp(currentRowNumber, "g");
        var proxyListRegex = new RegExp(/\.ProxyList\[\d+\]/g);
        var _rowRegex = new RegExp(/\_row\d+/g);

        var clonedRow = $('<div>').append(sourceRow.clone()).html().replace(regex, 'row' + (parseInt(row) + 1)).replace(proxyListRegex, '.ProxyList[' + row + ']').replace(_rowRegex, '_row' + (parseInt(row) + 1));

        clonedRow = clonedRow.replace("row0", "row" + (parseInt(row) + 1));
        newRow.after(clonedRow);

        /* convert new inputs to datetimepickers */
        var newFromControl = "dateTimePickerFrom_row" + row;
        var newToControl = "dateTimePickerTo_row" + row;

        convertNewPickerControl(newFromControl);
        convertNewPickerControl(newToControl);

        row = (parseInt(row) + 1);

    }
</script>

As can be seen in the console, the first and last calls to convertNewPickerControl() work, but the call within $(document).ready() does not (and neither do the calls made to convertNewPicker() in addNewRow() -- not shown below):

So...I know $(document).ready is executing as the console.log entry is noted.  Why would it be working outside $(document).ready() but not within it (or via the call when adding a new row)?

I have a kendo datepicker that is required, however when it is not filled out and the dateInput format is set to true, the required message does not display.

Here is a dojo

https://dojo.telerik.com/ucOdILoT

When we instantiate both DatePickers and DateTimePickers, there appears to be a phantom image (what looks like an "S") overlaying the calendar and clock icons as shown in the example below:

I've played around with the classes that are associated with the spans in which the icons are located, but am unable to locate the source of the phantom images.  Any ideas would be greatly appreciated!

Here's the code we use to implement both (where $(this) is the specific control :

                $(this).kendoDateTimePicker({
                    format: "MM/dd/yyyy hh:mm:ss tt",
                    value: savedStartDate,
                    min: savedStartDate,
                    change: startDateTimeChangeRange
                });

                if (reloadPreviousModel && previousModel) {
                    $(this).val(previousModel[counter].StartDate);
                }
                $('.datetimeFromcontrol').find('.k-i-calendar').attr('aria-label', 'Select start date');
                $('.datetimeFromcontrol').find('.k-i-clock').attr('aria-label', 'Select start time');
              

We recently upgraded from an older version of Telerik (2017 to 2022) and didn't have this issue in the older version.  Inspecting the elements, I can't find anything that seems out of the ordinary, but have included the generated markup below:

<span class="k-datetimepicker k-input datetimeTocontrol k-input-solid k-input-md k-rounded-md" style="">
<input aria-label="Proxy end date" class="datetimeTocontrol k-input-inner" data-savedenddate="" data-val="true" data-val-date="The field EndDate must be a date." data-val-required="The EndDate field is required." id="datetimepickerTo_row1" name="PreferencesList[3].Controls[0].ProxyList[0].EndDate" title="Proxy end date" type="text" value="1/1/0001 12:00:00 AM" data-role="datetimepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="datetimepickerTo_row1_dateview datetimepickerTo_row1_timeview" autocomplete="off">
<button tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" unselectable="on">
<span class="k-icon k-i-clock k-button-icon" aria-label="Select end time" title="Select proxy end time">Select proxy end time</span>
</button>
<button unselectable="on" tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the date view" type="button">
<span class="k-icon k-i-calendar k-button-icon" aria-label="Select end date" title="Select proxy end date">Select proxy end date</span>
</button>
</span>

I am trying to get the bootstrap 5 client side validation (Red/Green borders) to work with the Datepicker. 

Currently using Jquery validation rather than Kendo because I am only using the Kendo Datepicker control, the rest are standard inputs.

       <partial name="_ValidationScriptsPartial" />

Whilst the validation fires correctly the .is-invalid pseudo class is added to the input only so the border doesn't render: