1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"Name":"💡109x EXAMPLE PO custom date time format Helpers","Active":true,"Notes":"examples of custom Helpers to format date and date/time data fields","Roles":124927,"AType":26,"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 PO's OrderedDate in various formats:</h3>\n\t<hr>\n\t\n{{#each ayReportData}}\n<table>\n\t<thead>\n\t\t<tr><td colspan=\"2\">For PO#: {{ Serial }}</td></tr>\n\t</thead>\n\t<tbody>\n\t\t<tr><td class=\"fontpurple\">The raw UTC / GMT AyaNova stored value from server:</td><td>{{ OrderedDate}}</td></tr>\n\n\t\t<tr><td colspan=\"2\" class=\"fontgreen\">Below as available Built in helpers</td></tr>\n\t\t<tr><td>ayDateTime helper:</td><td>{{ ayDateTime OrderedDate}}</td></tr>\n\t\t<tr><td>ayDate helper:</td><td>{{ ayDate OrderedDate}}</td></tr>\n\t\t<tr><td>ayTime helper:</td><td>{{ ayTime OrderedDate}}</td></tr>\n\n\t\t<tr><td colspan=\"2\" class=\"fontred\">Below are Custom helpers in this report template </td></tr>\n\t\t<tr><td>myDateTime custom helper:</td><td>{{ myDateTime OrderedDate}} </td></tr>\n\t\t<tr><td>myDate custom helper:</td><td>{{ myDate OrderedDate}}</td></tr>\n\t\t<tr><td>myTime custom helper:</td><td>{{ myTime OrderedDate}}</td></tr>\n\t\t<tr><td colspan=\"2\" class=\"fontred\">**NOTE the Helpers below as of alpha.109 no longer can set timeZoneName: </td></tr>\n\t\t<tr><td>myDateTimeAustralia custom helper:</td><td>{{ myDateTimeAustralia OrderedDate}}</td></tr>\n\t\t<tr><td>myDateTimeArabic custom helper:</td><td>{{ myDateTimeArabic OrderedDate}}</td></tr>\n\t\t<tr><td>myDateTimeFromParts custom helper: </td><td>{{ myDateTimeFromParts OrderedDate}}</td></tr>\n\t</tbody>\n</table>\n<hr>\n{{/each}}\n\n\n</body>\n\n</html>","Style":"table { \n font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;\n border-collapse: collapse;\n white-space: pre-wrap;\n font-size: 18pt;\n width: 100%;\n }\n\ntbody tr {\n width: 100%;\n}\n\ntbody tr:nth-child(even) {\n font-size: 10pt;\n background-color: lightgray; /* MUST checkmark Print background in PDF Options for this to show */\n} \ntbody tr:nth-child(odd) {\n font-size: 10pt;\n background-color: lightgoldenrodyellow; /* MUST checkmark Print background in PDF Options for this to show */\n} \n.footertext {\n font-size: 20pt;\n font-style: italic;\n background-color: pink;\n}\n\n.fontgreen {\n color: green;\n}\n.fontred {\n color: red;\n}\n.fontpurple {\n color: purple;\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 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":null,"FooterTemplate":null,"DisplayHeaderFooter":false,"PaperFormat":10,"Landscape":false,"MarginOptionsBottom":"10mm","MarginOptionsLeft":"10mm","MarginOptionsRight":"10mm","MarginOptionsTop":"10mm","PageRanges":null,"PreferCSSPageSize":false,"PrintBackground":true,"Scale":1.00000} |