AEM 6530 - Touch UI Date Picker save Date Time in UTC

Goal


AEM Page Properties date picker saves the date set (On Time / Off Time) in User's Time Zone in CRX. This post is to save the date time in UTC, whereas show it in user's time zone...

Demo | Package Install | Github


Product

                 Date saved in user's time zone (CST in screenshot below)



Extension

                 Set the property eaem-save-in-utc = true                                            

                 e.g./libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/onofftime/items/ondate/granite:data



                 Date saved in UTC in CRX


                 Date shown in Browser



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-save-date-timezone

2) Create node /apps/eaem-save-date-timezone/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.authoring.dialog], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-save-date-timezone/clientlib/js.txt, add

                        timezone-date.js

4) Create file (nt:file) /apps/eaem-save-date-timezone/clientlib/timezone-date.js, add the following code

(function($, CUI, $document){
    var EAEM_SAVE_IN_UTC = "eaem-save-in-utc";

    $document.on("foundation-contentloaded", handleDatePickers);

    function handleDatePickers(){
        var $datePickers = $("coral-datepicker");

        if(_.isEmpty($datePickers)){
            return;
        }


        _.each($datePickers, function(datePicker){
            var $datePicker = $(datePicker);

            if(!$datePicker.data(EAEM_SAVE_IN_UTC)){
                return;
            }

            $datePicker.on("change", setTimeZone);

            setTimeZone.call(datePicker);
        });
    }

    function setTimeZone(){
        var datePicker = this, $datePicker = $(this),
            $timeZone = $datePicker.nextAll(".granite-datepicker-timezone");

        if(!datePicker.value){
            $timeZone.attr("hidden", "hidden");
            return;
        }

        var toUTC = new Date(datePicker.value).toISOString(),
            message = "Date shown in your timezone, but saved in UTC as " + toUTC;

        $datePicker.find("[name^='./']").val(toUTC);

        $timeZone.removeAttr("hidden");

        $timeZone.find("span").html(message);
    }

}(jQuery, window.CUI,jQuery(document)));

3 comments:

  1. Nice blog with Amazing information .. love to read about this.
    Awaiting for your new post
    We at Fullassignment.com bring to you the most significant Management assignment help writing service at the best cost. With long stretches of understanding we are prepared to give online assignment help over the globe.You will be guided here with a portion of the information of Management assignment which could assist you in deciding writing a Manageent assignment. Nonetheless, we unequivocally prescribe you to benefit Leadership Assignment help from our specialist to find out about marketing and its scope.We also provide Macro Economics Assignment Help from our experts.

    https://fullassignment.com/

    ReplyDelete
  2. The advantage of Online Assignment Help is an adroit choice when it ends up being hard in managing the assignment in school. Our Assignment help online service helps the students in staying at the top of the class with the help of online assignments. We have a pool of authorities in writing the assignment for every educational assignment

    ReplyDelete
  3. Such a wonderful information blog post on this topic allassignmentservices.com provides assignment service at affordable cost in a wide range of subject areas for all grade levels, we are already trusted by thousands of students who struggle to write their academic papers and also by those students who simply want need assignment help to save their time and make life easy.

    ReplyDelete