1 line
9.0 KiB
Plaintext
1 line
9.0 KiB
Plaintext
{"Name":"EXAMPLE Custom date time format helpers","Active":true,"Notes":"","Roles":124927,"ObjectType":2,"Template":"<html>\n\n<body>\n\t<h2>Example: custom formatted date time helpers </h2>\n\t{{#each ayReportData}}\n\t<h2>{{ Name }}</h2>\n\t<h3>Below are all the StartDate in various formats:</h3>\n\t<h4>Raw UTC / GMT AyaNova stored value from server </h4> \n\t{{ StartDate }}<br/>\n\t<h4>Built in helpers</h4> \n\tayDateTime helper: {{ ayDateTime StartDate}} <br/>\n\tayDate helper: {{ ayDate StartDate}} <br/>\n\tayTime helper: {{ ayTime StartDate}} <br/>\n\t<h4>Custom helpers in this report template</h4> \n\tmyDateTime custom helper: {{ myDateTime StartDate}} <br/>\n\tmyDate custom helper: {{ myDate StartDate}} <br/>\n\tmyTime custom helper: {{ myTime StartDate}} <br/>\t\n\tmyDateTimeAustralia custom helper: {{ myDateTimeAustralia StartDate}} <br/>\n\tmyDateTimeArabic custom helper: {{ myDateTimeArabic StartDate}} <br/>\n\tmyDateTimeFromParts custom helper: {{ myDateTimeFromParts StartDate}} <br/>\n\t\n\t{{/each}}\n</body>\n\n</html>","Style":"","JsPrerender":"","JsHelpers":"/////////////////////////////////////////////////////////////////\n//\n// CUSTOM DATE AND TIME HELPER\n//\nHandlebars.registerHelper('myDateTime', function (value) {\n if (!value) {\n return \"\";\n }\n\n //parse the date \n let parsedDate = new Date(value);\n\n //is it a valid date?\n if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {\n return \"not valid\";\n }\n\n //Use built in toLocaleString method to format the date and time\n //there are many options that change the displayed format documented here\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString\n return parsedDate.toLocaleString(\n AYMETA.ayClientMetaData.LanguageName,//use Client browser default Language, change this setting here to force an alternative language\n {\n timeZone: AYMETA.ayClientMetaData.TimeZoneName,//use Client browser's default TimeZone, change this setting here to force a specific time zone\n dateStyle: \"long\",\n timeStyle: \"long\",\n hour12: AYMETA.ayClientMetaData.Hour12 //Use User setting for 12/24 hour clock\n }\n );\n});\n/////////////////////////////////////////////////////////////////\n//\n// CUSTOM DATE HELPER\n//\nHandlebars.registerHelper('myDate', function (value) {\n if (!value) {\n return \"\";\n }\n\n //parse the date\n let parsedDate = new Date(value);\n\n //is it a valid date?\n if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {\n return \"not valid\";\n }\n\n //Use built in toLocaleDateString method to format the date\n //there are many options that change the displayed format documented here\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString\n return parsedDate.toLocaleDateString(\n AYMETA.ayClientMetaData.LanguageName,//use Client browser default Language, change this setting here to force an alternative language\n {\n timeZone: AYMETA.ayClientMetaData.TimeZoneName,//use Client browser's default TimeZone, change this setting here to force a specific time zone\n dateStyle: \"long\"\n }\n );\n});\n/////////////////////////////////////////////////////////////////\n//\n// CUSTOM TIME HELPER\n//\nHandlebars.registerHelper('myTime', function (value) {\n if (!value) {\n return \"\";\n }\n\n //parse the date\n let parsedDate = new Date(value);\n\n //is it a valid date?\n if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {\n return \"not valid\";\n }\n\n //Use built in toLocaleTimeString method to format the date and time\n //there are many options that change the displayed format documented here\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString\n return parsedDate.toLocaleTimeString(\n AYMETA.ayClientMetaData.LanguageName,//use Client browser default Language, change this setting here to force an alternative language\n {\n timeZone: AYMETA.ayClientMetaData.TimeZoneName,//use Client browser's default TimeZone, change this setting here to force a specific time zone \n timeStyle: \"long\",\n hour12: AYMETA.ayClientMetaData.Hour12 //Use User setting for 12/24 hour clock\n }\n );\n});\n/////////////////////////////////////////////////////////////////\n//\n// CUSTOM DATE AND TIME HELPER WITH AUSTRALIAN OPTIONS\n//\nHandlebars.registerHelper('myDateTimeAustralia', function (value) {\n if (!value) {\n return \"\";\n }\n\n //parse the date\n let parsedDate = new Date(value);\n\n //is it a valid date?\n if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {\n return \"not valid\";\n }\n\n //Use built in toLocaleString method to format the date and time\n //there are many options that change the displayed format documented here\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString \n return parsedDate.toLocaleString(\n \"en-au\",//use English-Australia locale (Day / Month / Year is Australia default format)\n {\n timeZone: \"Australia/Sydney\",//use forced time zone, see \"tz database\" column for name in list here: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\n timeZoneName: \"long\",//display the time zone used\n dateStyle: \"short\",\n timeStyle: \"long\"\n }\n );\n});\n\n/////////////////////////////////////////////////////////////////\n//\n// CUSTOM DATE AND TIME HELPER WITH Arabic OPTIONS\n//\nHandlebars.registerHelper('myDateTimeArabic', function (value) {\n if (!value) {\n return \"\";\n }\n\n //parse the date\n let parsedDate = new Date(value);\n\n //is it a valid date?\n if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {\n return \"not valid\";\n }\n\n //Use built in toLocaleString method to format the date and time\n //there are many options that change the displayed format documented here\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString \n return parsedDate.toLocaleString(\n \"ar-EG\",//use Arabic locale \n {\n timeZone: \"Asia/Dubai\",//use forced time zone, see \"tz database\" column for name in list here: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\n timeZoneName: \"short\",//display the time zone used\n dateStyle: \"short\",\n timeStyle: \"long\"\n }\n );\n});\n/////////////////////////////////////////////////////////////////\n//\n// CUSTOM FORMAT TO PARTS HELPER\n// this offers the most control over the return format\n// Locale aware conversion to parts that can be returned in any format\n//\nHandlebars.registerHelper('myDateTimeFromParts', function (value) {\n if (!value) {\n return \"\";\n }\n\n //parse the date\n let parsedDate = new Date(value);\n //is it a valid date?\n if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {\n return \"not valid\";\n }\n\n //Set formatter options\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts\n let formatter = new Intl.DateTimeFormat('en-us', {\n weekday: 'long',\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3,\n hour12: true,\n timeZone: 'UTC'\n });\n\n let parts = formatter.formatToParts(parsedDate);\n /*\n // parts example return value: \n [ \n { type: 'weekday', value: 'Monday' }, \n { type: 'literal', value: ', ' }, \n { type: 'month', value: '12' }, \n { type: 'literal', value: '/' }, \n { type: 'day', value: '17' }, \n { type: 'literal', value: '/' }, \n { type: 'year', value: '2012' }, \n { type: 'literal', value: ', ' }, \n { type: 'hour', value: '3' }, \n { type: 'literal', value: ':' }, \n { type: 'minute', value: '00' }, \n { type: 'literal', value: ':' }, \n { type: 'second', value: '42' }, \n { type: 'fractionalSecond', value: '000' },\n { type: 'literal', value: ' ' }, \n { type: 'dayPeriod', value: 'AM' } \n ]\n */\n\n let partWeekDay = parts.find(({ type }) => type === 'weekday').value;\n let partDay = parts.find(({ type }) => type === 'day').value;\n let partYear = parts.find(({ type }) => type === 'year').value;\n \n //return in some custom format\n return `DAY:${partWeekDay}-${partDay} YEAR: ${partYear}`;\n //return this instead to see the actual return array\n //return JSON.stringify(parts);\n});","RenderType":0} |