kendoDatePicker add years (Buddhist)

1 Answer 71 Views
Date/Time Pickers
Mix
Top achievements
Rank 1
Mix asked on 12 Jan 2022, 07:41 AM

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

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 14 Jan 2022, 03:20 PM

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:

  1. 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>
  2.  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:

  1. Set the max more than the default value of Dec 31, 2099.
  2. 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/.

Tags
Date/Time Pickers
Asked by
Mix
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or