AEM 6530 - Touch UI Page Properties On Time, Off Time Date Picker save and show in specific Time Zone

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 and show the date time in specific configured time zone...

Demo | Package Install | Github


Product

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




Extension

                 For PST, set the property eaem-offset = -08:00

                 For PST, set the property eaem-offset-message = You are selecting the date in PST

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

                 ("/libs" modified for demo purposes only....)




                 Date saved in PST in CRX




                 Date shown in PST in Browser

Solution

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

2) Create node /apps/eaem-save-date-set-offset/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-set-offset/clientlib/js.txt, add

                        timezone-offset.js

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

(function($, CUI, $document){
    var EAEM_OFFSET = "eaem-offset",
        EAEM_OFFSET_MESSAGE = "eaem-offset-message";

    $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_OFFSET)){
                return;
            }

            if(datePicker.valueFormat !== "YYYY-MM-DD[T]HH:mm:ss.SSSZ"){
                return;
            }

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

            setOffset.call(datePicker, {}, $datePicker.attr("value"));
        });
    }

    function setOffset(event, initValue){
        var datePicker = this, $datePicker = $(this),
            offset = $datePicker.data(EAEM_OFFSET), value,
            $timeZone = $datePicker.nextAll(".granite-datepicker-timezone");

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

        if(_.isUndefined(initValue)){
            value = getDateTimePortion(datePicker.value) + offset;
        }else{
            value = initValue;

            datePicker.value = getDateTimePortion(value) + moment(new Date()).format("Z");
        }

        var message = $datePicker.data(EAEM_OFFSET_MESSAGE);

        message = message || "Date shown (and saved) is offset to " + $datePicker.data(EAEM_OFFSET) + " relative to your timezone";

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

        $timeZone.removeAttr("hidden");

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

    function getDateTimePortion(value){
        if(value.endsWith("Z")){
            value = value.substring(0, value.indexOf("Z"));
        }else{
            value = value.substring(0, value.lastIndexOf("-"));
        }

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