or
1 answer
81 views
In the TimePicker control can you have it default to "hh:mm:ss" or " : : "?
If I turn on, set dateInput to "true", it default to "hours:minutes:seconds". Can this be changed?
Georgi Denchev
Telerik team
answered
on
24 Mar 2022
1 answer
88 views
Hi
I'm trying to try to disable all dates except for the last date of the month for a range. I add the range ok but all dates are enabled. I just need last date of month. I'm using Jquery. Is there a way to do this with the datepicker?
$(document).ready(function () {
$("#datepicker").kendoDatePicker({
min: new Date(),
min: new Date(),
format: "MM/dd/yyyy",
type: "date",
change: function(e) {
var value = this.value();
var days = value.getDate();
var d = new Date();
d = value;
d.setDate(d.getDate() - days + 1, 0);
console.log(d);
},
value: "d"
});
});
Georgi Denchev
Telerik team
answered
on
21 Mar 2022
1 answer
149 views
Hi,
How can i render a kendo datepicker inside a kendo script template? With the help of javascript?
here is a simple sample:
<script id="user-template" type="text/x-kendo-template">
<div id="column">
<input id="datePicker1" />
</div>
</script>
Neli
Telerik team
answered
on
22 Feb 2022
1 answer
575 views
Hi i needed some help as my kendo picker not able to clear the error message when the date format is correct
I want the messages to be remove or hide when it is correct but somehow i not able to
$(function () {
var viewModel = kendo.observable({
selectedDate: new Date(),
});
kendo.bind($("#change-date-collection1"), viewModel)
$("#change-date-collection1").kendoValidator({
rules: {
// Implement your custom date validation.
dateValidation: function (input, params) {
if (input.is("[name='date']") && input.val() != "") {
var date = kendo.parseDate(input.val(), "dd/MM/yyyy");
if (date) {
return true;
}
return false;
}
return true;
}
},
messages: { //custom rules messages
// Return the message text.
dateValidation: "Not a valid date in dd/MM/YYYY format!",
}
});
})I want the messages to be remove or hide when it is correct but somehow i not able to
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
26 Jan 2022
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'));
}
});
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
14 Jan 2022
1 answer
1.5K+ views
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
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
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
14 Dec 2021
1 answer
482 views
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.
Georgi Denchev
Telerik team
answered
on
18 Nov 2021
1 answer
278 views
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
Georgi Denchev
Telerik team
answered
on
12 Nov 2021
1 answer
117 views
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.
Hetali
Telerik team
answered
on
27 Oct 2021
1 answer
959 views
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>
Anna
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
answered
on
31 Aug 2021
