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)));