1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
{"Name":"💡 custom date time format Helpers","Active":true,"Notes":"examples of custom Helpers to format date and date/time data fields","Roles":124927,"AType":34,"IncludeWoItemDescendants":false,"Template":"<html>\n\n<body>\n\t<h2>Example: custom formatted date time helpers </h2>\n\t<h3>Below shows example of each {{ayT 'WorkOrder'}}'s {{ayT 'WorkOrderServiceDate'}} in various formats:</h3>\n\n\t{{#each ayReportData}}\n\t<table class=\"singlePage\">\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th colspan=\"5\">{{ayT 'WorkOrder'}} {{ Serial }}</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"3\">The raw UTC / GMT AyaNova stored value from server:</td>\n\t\t\t\t<td colspan=\"2\">{{ServiceDate}}</td>\n\t\t\t</tr>\n\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"5\" class=\"fontgreen\">Available Built in helpers:</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">ayDateTime helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ ayDateTime ServiceDate}}</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">ayDate helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ ayDate ServiceDate}}</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">ayTime helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ ayTime ServiceDate}}</td>\n\t\t\t</tr>\n\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"5\" class=\"fontred\">Custom helpers in this report template:</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">myDateTime custom helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ myDateTime ServiceDate}} </td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">myDate custom helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ myDate ServiceDate}}</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">myTime custom helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ myTime ServiceDate}}</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">myDateTimeAustralia custom helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ myDateTimeAustralia ServiceDate}}</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">myDateTimeArabic custom helper:</td>\n\t\t\t\t<td colspan=\"2\">{{ myDateTimeArabic ServiceDate}}</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td colspan=\"1\"> </td>\n\t\t\t\t<td colspan=\"2\">myDateTimeFromParts custom helper: </td>\n\t\t\t\t<td colspan=\"2\">{{ myDateTimeFromParts ServiceDate}}</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n\t<hr>\n\t{{/each}}\n\n\n</body>\n\n</html>","Style":".singlePage\n{\npage-break-after: always;\n\n}\nbody {\n font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; \n}\n\n.reporttitle { \n margin-bottom: 20pt; \n font-weight: bold; \n font-size: 14pt; \n color: #9e9e9e;\n text-align: left;\n} \n\ntable { \n border-collapse: collapse;\n white-space: pre-wrap;\n width: 100%;\n font-size: 9pt; \n table-layout: fixed;\n }\n\nth {\n border-bottom: solid 1pt #9e9e9e; \n height: 30px;\n font-size: 10pt; \n color: #9e9e9e;\n}\n\ntfoot th{\n border-top: solid 1pt #9e9e9e;\n height: 50px;\n font-size: 10pt; \n text-align: right;\n}\n\ntbody td {\n padding: 10px;\n word-wrap: break-word;\n font-size: 9pt;\n}\n\n\ntbody tr:nth-child(even) {\n background-color: #f8f8f8; /* MUST checkmark Print background in PDF Options for this to show */\n}\n\n\n.rightlean {\n text-align: right;\n}\n.leftlean {\n text-align: left;\n}\n.centerlean {\n text-align: center;\n}\n\n\n.fontgreen {\n color: green;\n}\n.fontblue {\n color: blue;\n}\n.fontred {\n color:red;\n}\n\n","JsPrerender":"async function ayPrepareData(reportData){ \n //this function (if present) is called with the report data \n //before the report is rendered\n //modify data as required here and return it to change the data before the report renders\n //see the help documentation for details\n\n await ayGetTranslations([\"WorkOrderServiceDate\", \"WorkOrder\" ]);\n\n return reportData;\n}","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\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\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\",//display the time zone used \n hour12: AYMETA.ayClientMetaData.Hour12 //Use User setting for 12/24 hour clock\n }\n );\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 - AS OF alpha.109 unable to use this?\n dateStyle: \"short\",\n timeStyle: \"long\"\n }\n );\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//\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,"HeaderTemplate":"<span style=\"font-size:6pt; width: 96%;text-align:left; \"> Printed date: PDFDate</span>\n<span style=\"font-size:6pt;width: 96%; text-align: right; \">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span> </span>","FooterTemplate":"<span> </span>","DisplayHeaderFooter":true,"PaperFormat":10,"Landscape":false,"MarginOptionsBottom":"10mm","MarginOptionsLeft":"10mm","MarginOptionsRight":"10mm","MarginOptionsTop":"10mm","PageRanges":null,"PreferCSSPageSize":false,"PrintBackground":true,"Scale":1.00000} |