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'));
}
});1 Answer, 1 is accepted
Hi Mix,
Please take a look at the following sections regarding Setting the Culture, Applying Buddhist Year, and Feature Request:
Setting the Culture
There are two steps to define the culture within a web application with Kendo UI:
- Add the specific culture script:
Head<head> <meta charset="utf-8"> <title>DatePicker - th-TH Culture</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/cultures/kendo.culture.th-TH.min.js"></script> </head> - Utilize the kendo.culture method:
JavaScript<script type="text/javascript"> //set current to the "th-TH" culture script kendo.culture("th-TH"); </script>
Applying Buddhist Year
The Kendo UI Datepicker currently only supports the Gregorian calendar. That being said, here's one way you can add 543 years to the DatePicker:
- Set the max more than the default value of Dec 31, 2099.
- Add the 543 years with JavaScript or Moment.js:
JavaScript$(function(){ var gregorian = new Date(); var year = gregorian.getFullYear() + 543; //Added 543 Years var month = gregorian.getMonth(); var day = gregorian.getDate(); var buddhist = new Date(year, month, day); $("#datepicker").kendoDatePicker({ value: buddhist, //value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY'), componentType: "modern", max: new Date(5000, 0, 1) //set max higher than default Dec. 31, 2099 }); });
Please take a look at the following Progress Kendo UI Dojo which demonstrates the Kendo UI DatePicker with the approach above.
Feature Request
To help facilitate the requested functionality, I have created a feature request with a vote on your behalf asking to support the Buddhist Calendar for the Kendo UI Date/Time Pickers/Calendar. Please follow it for potential updates, and provide any comments within the thread for the community.
Please let me know if you have any questions regarding the above.
Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Also when clicking today, it will go to gregorian calendar year. It should go to Buddhist Year.
Is there a workaround for click today event action?
One custom approach you could take is to use a global to determine if the Today button is clicked. The first time the Kendo UI DatePicker opens, reference the today button, and set the global to true.
JavaScript
//reference datepicker
var datepicker = $("#datepicker").data("kendoDatePicker");
//the first time the datepicker opens....
datepicker.one("open", function(e){
//Reference the calendar
var calendar = $("#datepicker_dateview").find(".k-calendar").data("kendoCalendar");
//Get instance of Today button when calendar inits
var todayButton = calendar._today;
$(todayButton).click(function(e){
//Today Button is clicked
isTodayClicked = true;
})
});If so, during the change event, set the value to the Buddhist year:
JavaScript
change: function(e){
//use setTimeout for timing
setTimeout(function(){
//Check if today has been clicked
if(isTodayClicked){
//Set value to Buddhist value
e.sender.value(buddhist);
//Trigger Change Event
e.sender.trigger("change");
//Reset global
isTodayClicked = false;
}
})
}
});Please check out this updated Kendo UI Dojo which the implementation. Hope this helps!