Telerik Forums
Kendo UI for jQuery Forum
0 answers
3 views

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

"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }


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 . 

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />

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.

export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}

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?

Sanal
Top achievements
Rank 1
 updated question on 14 Mar 2024
1 answer
10 views

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)?

Neli
Telerik team
 answered on 06 Feb 2024
0 answers
18 views
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.
GOVERTHANAN
Top achievements
Rank 1
Iron
 asked on 20 Dec 2023
1 answer
45 views

Here is HTML Code of Date Picker

 

<input kendo-date-picker="" k-scope-field="dteNewDueDateDate" k-format="'yyyy-MM-dd'" k-on-change="undefined" custom-date="" ng-model="vm.target.newDueDate" required="" ng-class="{ 'is-invalid': (changeDueDateForm.dteNewDueDateDate.$dirty || changeDueDateForm.$submitted) &amp;&amp; changeDueDateForm.dteNewDueDateDate.$error.required }" ng-disabled="false" aria-label="New Due Date" name="dteNewDueDateDate" id="dteNewDueDateDate" entity="undefined" field="undefined" config="" class="ng-pristine ng-untouched k-input-inner ng-empty ng-invalid ng-invalid-required" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="dteNewDueDateDate_dateview" autocomplete="off" aria-disabled="false" aria-readonly="false" aria-invalid="true" style="">

 

I have Tried this and Similar Solutions but all in Vain. Please help me to find its solution

$(document).ready(function() {   // Wait for the document to be fully loaded   // Initialize the Kendo UI DatePicker  $("#dteNewDueDateDate").kendoDatePicker({     format: "yyyy-MM-dd"    // Add any other configuration options you need  });   // Set the value after initialization  setTimeout(function() {     var datePicker = $("#dteNewDueDateDate").data("kendoDatePicker");     var targetDate = new Date('2023-12-04');     datePicker.value(targetDate);     datePicker.trigger("change");   }, 100); // Adjust the timeout duration if needed});

Neli
Telerik team
 answered on 07 Dec 2023
0 answers
34 views
Hi 
  I'm using kendo UI for Jquery in that i'm using DateTimePicker for an client requirement i face the challenge which i need to figure it out whether where the user is clicking either on date icon nor the time icon in datetime change event


GOVERTHANAN
Top achievements
Rank 1
Iron
 asked on 27 Nov 2023
1 answer
21 views

Hi,

Is there a way to set data and time without clicking set button in dateTimePicker modern ui. What i am expecting is selecting or changing time by scrolling will change date time in my input div.

Martin
Telerik team
 answered on 22 Nov 2023
1 answer
24 views

Hi,

In following scenario:

- Configure Date Time Picker with Modern view

- Open Browser Console

- Open date picker

- Now move your cursor in the browser window randomly

- Your date picker window permanently changed to time window

In this i cannot go back to data/month view. I am stuck with time view. Is it expected or am i missing something?


<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="css/default-main.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <script src="js/kendo.all.min.js"></script>

</head>
<body>
<input id="datetimepicker"/>
<style>

</style>

<script>
    $(function () {
        $("#datetimepicker").kendoDateTimePicker({
            componentType: "modern",
            interval: 1
        });
    });
</script>

</body>
</html>

Peter Milchev
Telerik team
 answered on 17 Nov 2023
1 answer
23 views

If you look at the demo of the Kendo Form the date value works great when you populate the date.  If you have an empty date the calendar icon does not appear and you don't get the datepicker.

https://demos.telerik.com/kendo-ui/form/index

How do I tell the form to present a datepicker field when the date field is empty?

 

It appears that if the field Label has 'Date' in it it assumes its a date field, but not if its left blank.

I can assign the field to to kendodatepicker but the calendar icon is then in the misplaced.

I modified the demo to show what I am talking about in the attached.

Mike
Top achievements
Rank 1
Iron
 answered on 13 Nov 2023
1 answer
31 views

I have a kendoDatePicker with dept set to year acting as a month filter on data displayed in a grid.
I want to visualize for the user if a particular month has data and am looking for a way to customize the content of the month cells.

$("#period-filter").kendoDatePicker({
    start: "year",
    depth: "year",
    format: "MMM yyyy",
    value: new Date
});

See screenshot.

It seems the API does not support such a scenario out of the box.

Any suggestions?

/Morten

 

Neli
Telerik team
 answered on 06 Nov 2023
0 answers
77 views

So this is the code.

@(Html.Kendo().DatePicker()
                          .Name("frShift")
                          .Start(CalendarView.Year)
                          .Depth(CalendarView.Year)
                          .Format("MMMM yyyy")
                          .Value(DateTime.Now)
                          .Min("01/01/" + Model.StartYear)
                          .Max("12/31/" + Model.EndYear)
                          .HtmlAttributes(new { style = "width: 100%;", placeholder = "Select month...", title = "Shift From" })
                          .Events(e =>
                  {
                      e.Change("shiftDemand.updToRow");
                  })

 

On local it is opening while on server it is not opening due to date control. If we remove date control then it will load. Please respond.

It is on Local

 

but once i deploy on QA and PROD server its loading but not opening.

Mohit
Top achievements
Rank 1
 updated question on 22 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?