Hi all,

I am building a web application that collects information about emergency drills, such as evacuation drills, tornado drills, etc. As you could imagine recording what time the drill was conducted is extremely important.

Well, the Kendo DateTime pickers are adding the timezone offset to the time value when the value is sent to the server. Receiving from the server works fine. 

Everybody that is using my web application is in eastern time zone, no exceptions. The timezone is GMT-5 currently. Let's use an example: a user submits a drill for 12/04/2014 1:00 PM. The time gets sent to the server but the timezone affects the time, so it will be stored in the database as 12/04/2014 6:00 PM. The timezone adds 5 hours when sent to the server. When we are in daylight savings time we are GMT-4 and 4 hours are added to the time. When my app requests the information from the server it works fine. If the server sends back 12/04/2014 1:00 PM it will display as such on the web page.

My current fix it to subtract 5 hours from the time before it is sent to the server. I don't like that because every time we go through day light savings time I have to update my code back and forth between 4 hours and 5 hours. I guess I could find the time zone from the time string and subtract whatever it is currently, but I don't like that. How can I fix this?

Thanks

below is the code of popup and javascript function

 <!-- #region  Vaibhav Updated Bootstrap 5.3.3 * -->
 <!-- DatePicker Text Modal -->
 <div class="modal fade" id="DatePickerZoneModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="DatePickerZoneModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-sm" style="min-width: 375px;">
         <div class="modal-content">
             <div class="modal-header">
                 <h6 class="modal-title">
                     @Localizer["lblSelectDate"]
                     <span class="lblDate fst-italic" style="color:lightgray;"></span>
                 </h6>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body" style="height: 120px; padding: 2.5rem;">
                 <div id="dvdatezone">
                     <span class="spnmandatory hide" style="color: red; font-weight: bold; font-size: 18px;">*</span>
                     <label style="float:left; margin-right: 10px; margin-top: 5px;">Date : </label>
                     <input type="text" id="txtDatePicker">
                 </div>
                 <label id="lblmsg" style="color:red; margin: 0.5rem 4rem; font-size:15px;"></label>
                 <span data-for="myDatePicker" class="k-invalid-msg"></span>
             </div>
             <div class="modal-footer">
                 <button type="button" id="btnDateSave" class="btn btn-default btnCreate" onclick="return UpdateDate();">
                     <i id="innericon" class="fal fa-check-circle"></i>
                     <span id="innerdiv">@Localizer["lblSavechanges"]</span>
                 </button>
                 <button type="button" class="btn btn-default btnCancel" data-bs-dismiss="modal">
                     <i id="innericon" class="fal fa-ban"></i>
                     <span id="innerdiv">@Localizer["lblClose"]</span>
                 </button>
             </div>
         </div>
     </div>
 </div>


// Vaibhav UpdateDate Code for Bootstrap 5.3.3

 function UpdateDate() {
    var $txtDatePicker = $("#txtDatePicker");
    var editor = $("#txtDatePicker").val();
    var textZoneId = $("#hdnTextZoneId").val();
    var index = textZoneId.split("_");
    var frShowDocs = $frShowDocs[0].contentWindow;
    var commmentDivtext = frShowDocs.document.getElementById(textZoneId);
    var plainText = editor.replace(/<[^>]*>/g, "");
    var cnt = 0;
    if (frShowDocs.objTxtZoneArray[index[1]] != undefined) {
        cnt = 1;
    } else {
        cnt = 0;
    }

    //Asingh: first replace <br /> to "!!_!!"
    var outputText = plainText.replace(/<br\s*[\/]?>/gi, '!!_!!');
    outputText = outputText.replace(/!!_!!/gi, '\n');
    console.log('outputText : ' + outputText);
    commmentDivtext.innerText = outputText;

    jsonInputInfos.TextZones[index[cnt]].RTFTXT = outputText; //<<<ben: To see: should be not html encoded, at the moment if a "é" is here it's saved as "&eacute; in the db ...
    jsonInputInfos.TextZones[index[cnt]].RTFTXTDECODE = outputText;

    //Prab Fix: Client got enccoded french text
    frShowDocs.objTxtZoneArray[index[cnt]].lastValue = outputText;
    frShowDocs.objTxtZoneArray[index[cnt]].isUpdated = true;

    var validator = $txtDatePicker.data("kendoValidator");
    if (!validator.validate()) {
        return false;
    }

    $("#DatePickerZoneModal").modal('hide');
    return false;
}

// $("#txtDatePicker").on("focus", function () {
//     var dp = $(this).data("kendoDatePicker");
//     if (dp) dp.open();
// });

function DateZoneModal(clickedDivId, isMandatoryflag) {
    if (isMandatoryflag)
        $(".spnmandatory").removeClass("hide");
    $("#btnDateSave").attr('disabled', false);
    var $hdnTextZoneId = $("#hdnTextZoneId");
    $hdnTextZoneId.val(clickedDivId.id);
    var textZoneId = $hdnTextZoneId.val();
    var index = textZoneId.split("_");
    $("#lblmsg").text(' ');
    //read iframe elemnt
    var frShowDocs = $frShowDocs[0].contentWindow;

    currentHighlightZone = parseInt(clickedDivId.dataset.highlightid);
    frShowDocs.DisplayArrow(currentHighlightZone, true, false);

    var commmentDivtext = frShowDocs.document.getElementById(clickedDivId.id);
    var zoneText = commmentDivtext.innerText;

    zoneText = zoneText.replace(/\n/g, "!!_!!");
    zoneText = zoneText.replace(/!!_!!/g, "<br />");
    console.log(clickedDivId.dataset.dateformat);

    var $txtDatePicker = $("#txtDatePicker");
    var $DatePickerZoneModal = $("#DatePickerZoneModal");

   // 1. Destroy previous DatePicker instance (if exists)
    if ($txtDatePicker.data("kendoDatePicker")) {
        $txtDatePicker.data("kendoDatePicker").destroy();
        $txtDatePicker.unwrap(); // Removes Kendo's wrapper (important to avoid offset errors)
       // $txtDatePicker = $('<input type="text" id="txtDatePicker" />'); // Recreate input
    }
    setTimeout(function () {
        $txtDatePicker.kendoDatePicker({
            dateInput: true,
            validation: { required: true },
            format: clickedDivId.dataset.dateformat,
        });
    }, 100); // delay ensures modal is fully rendered
  

    $txtDatePicker.kendoValidator({
        rules: {
            dateValidation: function (input) {
                if (input.is('[data-role="datepicker"]')) {
                    var value = $(input).val();
                    var dformat = $(input).attr("data-dateformat");
                    var date = kendo.parseDate(value, dformat);

                    if (value == "" || !date) {
                        $("#btnDateSave").attr('disabled', 'disabled');
                        $("#lblmsg").text(txtdatevalidmsg);
                        $(input).val('');
                        return false;
                    }
                    else {
                        $("#btnDateSave").attr('disabled', false);
                        $("#lblmsg").text(' ');
                        return true;
                    }
                }
                return true;
            }
        },
        messages: {
            dateValidation: txtdatevalidmsg
        }
    });

    $txtDatePicker.val(zoneText);
    $txtDatePicker.attr("data-dateformat", clickedDivId.dataset.dateformat);
    $txtDatePicker.attr('placeholder', clickedDivId.dataset.dateformat.toUpperCase());
    $DatePickerZoneModal.find('.lblDate').text('(' + clickedDivId.dataset.dateformat.toUpperCase() + ')');
    $('.k-datepicker').attr('style', 'width:initial;');
    // $("#lblmsg").text(' ');
    //$("#btnDateSave").attr('disabled', false);
    $DatePickerZoneModal.modal('show');
}

The modal isn't very large, so the calendar popup shows outside the modal.

When selecting a day or month, the date picker is updated and the modal remains open.
When selecting a year, the modal closes. 

As though the mouse click gets passed to the page.

Kendo: 2024.1.319

Hi,

I am attempting to update our current version of Kenduo UI for Jquery from 2023.1.117 to 2024.4.1112.

I have downloaded the commercial release zip and have updated the references to the js and css files (as I have done with previous upgrades), however I am experiencing lots of styling issues for font sizes and layout across inputs ans widgets.

Firstly, the text size is much smaller for inputs and widgets.

The display of widgets on different browsers is inconsistent (for example the calendar widget is being cut off on FireFox, but is spanning the whole screen on Chrome - screenshots attached).

Any ideas what could be causing this?

Hi,

I am trying to use the Kendo UI kendoDatePicker but I am not seeing the button that opens up the calendar? Must be missing something? Here is what I am using:

Here is the code in my JavaScript file:

I am just getting the field with the date inside of it now, no calendar selection button:

Here is a screen shot of my HTML code:

Thanks! 

George

I am running into an issue with allowing copy/paste of dates into the filter and cell input fields. Currently, the date fields have validation to support MM/dd/yyyy, and users of the app may be trying to copy dates in that are MM/dd/yy. I would expect Kendo to auto format the date to MM/dd/yyyy after the paste happens, or at least allow support for that, but it doesn't seem to happen.

In the cell, when putting in MM/dd/yy, a validation message appears saying the date is invalid, and there doesn't appear to be a way to override that. In the filter, when putting in MM/dd/yy and submitting the filter, it doesn't stick and completely ignores the date put in.

Is there any way with the latest version of Kendo (I am on 16) to allow for different date formats in these fields, or is there the possibility that this is something coming in the future?

I want some of my date time pickers to have a width of 140px.

 https://dojo.telerik.com/@mortenma71/eSAhOyaN/9

It works when I set the width using inline style:
<input id="datepicker" value="10/10/2011" style="width:140px;" />

It doesn't work when I set the width using a CSS class.

Without !important the CSS class seem to have no effect:
<style>.width-140 { width: 140px; }</style>
<input id="datepicker2" value="10/10/2011" class="width-140" />

With !important the CSS class effects the width, however the svg-picker-icon doesn't show:
<style>.width-140-important { width: 140px !important; }</style>
<input id="datepicker3" value="10/10/2011" class="width-140-important" />

I only observed the problem now; I'm sure it worked in an earlier kendo/CSS version.

How can I set the width using a CSS class and retain the svg-picker icon?

/Morten

I am trying to fix an issue on an old react application with jquery dependencies and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x

Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss . 

I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.

On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.

Is there a specific way in kendo that I can try to overcome this?

This is a follow-up to my original question:

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.

https://www.telerik.com/forums/angualrjs-kendo-date-picker-how-to-color-day-cells

The follow-up question is:

I see that you can tie a colour background to a particular day value within a month, but how would you do that to a specific date (i.e. Make only the 10th of January red, but not the 10th of February, for example)?

Hi there!
   i have been using a modern kendo datetimepicker in my project. where i got the requirement from the user which while selecting the date value   in datetimepicker component its automatically navigating to the time page.  Is there any way to restrict those behaviour and makes the component close while changing the date alone.


Kindly find the attached image for more clarity about the case.