GiancarloGomez/local-dates.html

## local-dates.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <!-- If date is from a specific timezone to your local -->
        <li data-date="12:00 PM" data-zone="America/Los_Angeles" data-mask="hh:mm A"></li>
        <!-- If date is from UTC to your local -->
        <li data-date="12:00 PM" data-zone="UTC" data-mask="hh:mm A"></li>
        <!--
        *   If date is from UTC to your local using a specific mask
        *   ( without mask passes to convertDateToLocal() which always assumes UTC/GMT )
        -->
        <li data-date="12:00 PM" data-mask="hh:mm A"></li>
        <!--
        * If date is from UTC to your local
        * ( without mask passes to convertDateToLocal() which always assumes UTC/GMT )
        -->
        <li data-date="12/1/2020 08:00 PM"></li>
    </ul>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", (event) => parseDatesInContainer( document ) );

        /**
         * Converts a UTC Date to Local
         * Use mask to parse and render unless additional render format passed
         */
        function convertDateToLocal( value, mask, render ){
            // set default mask if not passed
            if ( !mask )
                mask = 'MM/DD/YYYY hh:mm:ss A';
            return moment( value.replace(/\s(GMT|UTC)/,''), mask )
                    .add( moment().utcOffset(),'m' )
                    .format( render || mask );
        }

        /**
         * Converts a Date from a Specific Timezone to Local
         * Use mask to parse and render unless additional render format passed
         */
        function convertDateToLocalFromZone( value, mask, zone, render ){
            // set default mask if not passed
            if ( !mask )
                mask = 'MM/DD/YYYY hh:mm:ss A';
            return moment.tz( value, mask, zone ).tz( moment.tz.guess() ).format( render || mask );
        }

        /**
         * Pass in an HTML element and pass to function to convert
         * based on data attributes ( date, mask, and zone )
         */
        function parseDateInElement( element ){
            if ( element.dataset.date !== '' ){
                // passes to parser based if timezone value is passed
                let convertedDate = element.dataset.zone ?
                                        convertDateToLocalFromZone( element.dataset.date,element.dataset.mask,element.dataset.zone,element.dataset.render ) :
                                        convertDateToLocal( element.dataset.date,element.dataset.mask,element.dataset.render ) ;
                if ( element.tagName.toLowerCase() === 'input' )
                    element.value = convertedDate;
                else
                    element.innerHTML = convertedDate;
            }
        }

        /**
         * Pass in an HTML element to search in and update
         * all elements within
         * ( great to use after updating an element from an AJAX response )
         */
        function parseDatesInContainer( element ){
            element.querySelectorAll('[data-date]').forEach(
                ( element ) => parseDateInElement( element )
            );
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<ul>
	<!-- If date is from a specific timezone to your local -->
	<li data-date="12:00 PM" data-zone="America/Los_Angeles" data-mask="hh:mm A"></li>
	<!-- If date is from UTC to your local -->
	<li data-date="12:00 PM" data-zone="UTC" data-mask="hh:mm A"></li>
	<!--
	* If date is from UTC to your local using a specific mask
	* ( without mask passes to convertDateToLocal() which always assumes UTC/GMT )
	-->
	<li data-date="12:00 PM" data-mask="hh:mm A"></li>
	<!--
	* If date is from UTC to your local
	* ( without mask passes to convertDateToLocal() which always assumes UTC/GMT )
	-->
	<li data-date="12/1/2020 08:00 PM"></li>
	</ul>
	<script src="https://momentjs.com/downloads/moment.min.js"></script>
	<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.js"></script>
	<script>
	document.addEventListener("DOMContentLoaded", (event) => parseDatesInContainer( document ) );

	/**
	* Converts a UTC Date to Local
	* Use mask to parse and render unless additional render format passed
	*/
	function convertDateToLocal( value, mask, render ){
	// set default mask if not passed
	if ( !mask )
	mask = 'MM/DD/YYYY hh:mm:ss A';
	return moment( value.replace(/\s(GMT\|UTC)/,''), mask )
	.add( moment().utcOffset(),'m' )
	.format( render \|\| mask );
	}

	/**
	* Converts a Date from a Specific Timezone to Local
	* Use mask to parse and render unless additional render format passed
	*/
	function convertDateToLocalFromZone( value, mask, zone, render ){
	// set default mask if not passed
	if ( !mask )
	mask = 'MM/DD/YYYY hh:mm:ss A';
	return moment.tz( value, mask, zone ).tz( moment.tz.guess() ).format( render \|\| mask );
	}

	/**
	* Pass in an HTML element and pass to function to convert
	* based on data attributes ( date, mask, and zone )
	*/
	function parseDateInElement( element ){
	if ( element.dataset.date !== '' ){
	// passes to parser based if timezone value is passed
	let convertedDate = element.dataset.zone ?
	convertDateToLocalFromZone( element.dataset.date,element.dataset.mask,element.dataset.zone,element.dataset.render ) :
	convertDateToLocal( element.dataset.date,element.dataset.mask,element.dataset.render ) ;
	if ( element.tagName.toLowerCase() === 'input' )
	element.value = convertedDate;
	else
	element.innerHTML = convertedDate;
	}
	}

	/**
	* Pass in an HTML element to search in and update
	* all elements within
	* ( great to use after updating an element from an AJAX response )
	*/
	function parseDatesInContainer( element ){
	element.querySelectorAll('[data-date]').forEach(
	( element ) => parseDateInElement( element )
	);
	}
	</script>
	</body>
	</html>