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?
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)?
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) && 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});
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.
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>
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.
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
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.