Any idea to manipulate date conversion in grid to show Buddhist ERA - Forum - Rollbase - Progress Community

Any idea to manipulate date conversion in grid to show Buddhist ERA

 Forum

Any idea to manipulate date conversion in grid to show Buddhist ERA

This question has suggested answer(s)

Hi,

From Rollbase 4.0.3.2 , how can customize Kendo UI grid to display date value from AD to Buddhist ERA

Eg.

AD -->  Buddhist. (Conversion made by plus 543 to Year) 

03/31/2016  --> 03/31/2559

TIA,

Tawatchai.

All Replies
  • Hi Siraj,

    After place <script id="executeBeforeUIStarts">  , this work well on every page.

    Thank you.

    Tawatchai

  • We have worked out a client-side scripting solution for Buddhist Calendar. Such that, on all application pages (few exceptions like Audit Trail component) we will present Date literals in Buddhist Calendar. That is on client-side we will tranform the dates  as per Buddhist Calendar from Gregorian Calendar.

    Also, on form pages we have added a plugin 'bdc' for kendoDatePicker & kendoDateTimePicker widgets from kendo library so as to make it work with Buddhist Calendar.

    Summary of changes done in this regard:

    1. Alter min & max restrictions (i.e. +543).

    2. Also remove footer template in Calendar

    3. Advance any current value set by 543 years..

    Next, on every page load, we find out form fields (i.e. if form is available) which are of type 'DateInput' & 'DateTimeInput', & call this plugin on the respective's field's control to affect Buddhist Calendar support. Also, on form submit, we normalize the values back into Gregorian Calendar.

    Given below is the scripting solution which needs to be included on every Application page via App Settings  -> Custom Sidebar.

    <script id="executeBeforeUIStarts">

    //on view pages...manipulate dates i.e. +543 years

    rb.newui.util.origformatDate = rb.newui.util.formatDate;

    rb.newui.util.formatDate = function (date, useFullDate) {

     if (!rb.newui.util.isDate(date)) {

       // null or invalid date

       return '';

     }

     date.setFullYear(date.getFullYear() + 543);

     return rb.newui.util.origformatDate(date, useFullDate);

    };

    //on view pages... manipulate dates i.e. +543 years

    rb.newui.util.origformatDateTime = rb.newui.util.formatDateTime;

    rb.newui.util.formatDateTime = function (date, useFullDate) {

     if (!rb.newui.util.isDate(date)) {

       // null or invalid date

       return '';

     }

     date.setFullYear(date.getFullYear() + 543);

     return rb.newui.util.origformatDateTime(date, useFullDate);

    };

    //defining bdc plugin for supporting Buddhist Calendar in kendoDatePicker & kendoDateTimePicker widgets..

    (function ($) {

     var BDC_YEAR_VARIATION = 543;

     var kendo = window.kendo,

     ui = kendo.ui,

     Widget = ui.DatePicker,

     Widget2 = ui.DateTimePicker;

     $.extend(Widget.fn, {

       bdc: bdc

     });

     $.extend(Widget2.fn, {

       bdc: bdc

     });

     function bdc() {

       //as part of supporting Buddhist Calendar.. alter min & max restrictions (i.e. +543).

       //also remove footer template in Calendar

       //advance any current value set by 543 years..

       var options = this.options;

       var min = options.min;

       min.setFullYear(min.getFullYear() + BDC_YEAR_VARIATION);

       var max = options.max;

       max.setFullYear(max.getFullYear() + BDC_YEAR_VARIATION);

       var currValue = this.value();

       if (currValue) {

         currValue.setFullYear(currValue.getFullYear() + BDC_YEAR_VARIATION);

       }

       options.footer = false;

       this.value(null);

       this.setOptions(options);

       currValue && this.value(currValue);

     }

    }) (jQuery);

    //on page load... call bdc plugin on kendoDatePicker & kendoDateTimePicker widgets..

    //also.. attach a submit handler... which will normalize date widget values back to Gregorian calendar at the time of submit..

    rb.newui.util.addEventListener(rb.newui.util.customEvents.rbs_pageRender, function () {

     bdcOnPageLoad();

     function bdcOnPageLoad() {

       try {

         var pageContext = rbf_getPageContext();

         var locContext = pageContext.getPageLocalization();

         var formObj = rbf_getObjectRecordForm();

         var dateFields = getAllDateFields();

         for (var j = 0; j < dateFields.length; j++) {

           var fieldContext = dateFields[j];

           var kConfig = fieldContext && fieldContext.getKendoConfig();

           //call bdc plugin kendo date widgets..

           kConfig && kConfig.bdc && kConfig.bdc();

         }

         formObj && formObj.addSubmitHandler(onFormSubmit);

       }

       catch (err) {

         rb.newui.util.logErrorToConsole('Error initiazing kendo date widgets with Buddhist Calendar Support\n' + err);

       }

       function onFormSubmit(event) {

         if (event.validationStatus) {

           for (var j = 0; j < dateFields.length; j++) {

             var fieldContext = dateFields[j];

             var date = fieldContext && fieldContext.getValue();

             if (date) {

               //normalize dates back to gregorian calendar..

               date.setFullYear(date.getFullYear() - 543);

               var dateLiteral = rbf_formatDate(date, getEditFormat(fieldContext));

               fieldContext.getNode().val(dateLiteral);

             }

           }

         }

         return true;

       }

       function getEditFormat(fieldContext) {

         return fieldContext.getFieldType() === 'DateInput' ? locContext.getDateEditFormat()  : locContext.getDateTimeEditFormat();

       }

       function getAllDateFields() {

         var dateFields = [

         ];

         var allFields = formObj && formObj.getAllFields();

         for (var j = 0; j < ((allFields && allFields.length) || 0); j++) {

           var fieldContext = allFields[j];

           var fType = fieldContext && fieldContext.getFieldType();

           if (fType === 'DateInput' || fType === 'DateTimeInput') {

             dateFields[dateFields.length] = allFields[j];

           }

         }

         return dateFields;

       }

     }

    });

    </script>

    Regards,
    Siraj.