{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"7bcfdec6-2153-450a-878e-957fa5e4fa17"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"ca3bd28e-0ed9-4231-af0e-f9bea13589d8"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"The Date Picker component provides an intuitive interface that allows the user to select a range in ISO format. This component is currently only used within the ","type":"text"},{"text":"Date Range Facet Component","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/HUI/pages/3461776297"}}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":367,"id":"b384dbbd-f53e-479b-acca-f775e20c3f9d","collection":"contentId-3461776803","type":"file","height":374}}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Selector","type":"text"}]},{"type":"paragraph","content":[{"text":"The selector for this component is ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Component Attributes","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"e643dab4-05a4-4f51-884b-2ebb1b0a0ba5"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"label","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"string","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"min","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Date","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"max","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Date","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"value","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Date","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Data Model","type":"text"}]},{"type":"paragraph","content":[{"text":"The following data model is exposed to the Handlebars template:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"interface CalendarDay {\n date: Date;\n value: string;\n currentMonth: boolean;\n enabled: boolean;\n selected: boolean;\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"{\n value: string | undefined;\n modalVisible: boolean;\n monthSelectorVisible: boolean;\n heading: string;\n years: Array;\n months: Array;\n weeks: Array>;\n currentYear: number;\n currentMonth: string;\n}","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Event Binding Attributes","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"b3b13272-4d4b-4521-bb1c-bacb948df2ef"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-input","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"The input element must have this attribute. When this element is clicked, the date picker modal will be displayed.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"b74496f7-4fe7-443f-93d5-aa3012cec747"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-modal","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"This root element of the date picker modal must have this attribute to calculate modal positioning.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"a3543338-44f8-48a0-9bca-6234520b37cc"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-month","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"This attribute is used to identify the form element used to select a specific month.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"eb0d164c-0bc1-47cb-bb95-a3acf3ce02f8"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-year","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"This attribute is used to identify the form element used to select a specific year.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"7864f3aa-6b71-447a-b180-af9fcb3a107e"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-select-month","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"When an element with this attribute is clicked, the month specified by ","type":"text"},{"text":"hawksearch-month","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"hawksearch-year","type":"text","marks":[{"type":"code"}]},{"text":" to be displayed in the date picker modal.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"ba77a513-f66b-4f75-9bd1-bb39d308e0bb"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-previous","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"When an element with this attribute is clicked, the previous month will be displayed in the date picker modal.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"ad240274-ad4d-4b40-8819-a4042364944b"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-next","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"When an element with this attribute is clicked, the next month will be displayed in the date picker modal.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"5c3052bd-e545-4836-9fe2-a110e801a011"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-month-selector","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph"}]}]}]},{"type":"paragraph","content":[{"text":"When an element with this attribute is clicked, the month selector will be displayed in the date picker modal to quickly jump to a particular month rather than using pagination.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"5f116fde-510a-4973-a82a-bb97ed5e3470"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Value","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch-date","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"string","type":"text","marks":[{"type":"code"}]},{"text":" (ISO date format)","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"When an element with this attribute is clicked, the specified date will be selected and displayed in the input element.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Events","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"d07a9c9e-3260-4cd6-879a-8f54df53e2cd"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Event Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Data Type","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"hawksearch:date-picker-changed","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[340.0]},"content":[{"type":"paragraph","content":[{"text":"Date","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"This event fires whenever the user selects a date.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Handlebars Helpers","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"653e47bb-d20f-45b8-bf4c-ed75e97b756d"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[197.0]},"content":[{"type":"paragraph","content":[{"text":"Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[205.0]},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[197.0]},"content":[{"type":"paragraph","content":[{"text":"dayOfMonth","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[205.0]},"content":[{"type":"paragraph","content":[{"text":"Date","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"This helper function returns the zero-padded day of the month from a provided date object.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Default Template","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"

\n \n {{#if modalVisible}}\n

\n {{#if monthSelectorVisible}}\n \n

\n \n

\n {{else}}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {{#each weeks}}\n \n {{#each this}}\n \n {{dayOfMonth date}}\n \n {{/each}}\n \n {{/each}}\n \n

\n {{/if}}\n

","type":"text"}]}],"version":1}

Browser not supported