{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example08-date-picker","result":{"data":{"examplePageJson":{"title":"8. DatePicker","codeJs":"\n    <span class=\"token keyword\">const</span> gridData <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">c1</span><span class=\"token operator\">:</span> <span class=\"token string\">'1992/03/25'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">c2</span><span class=\"token operator\">:</span> <span class=\"token string\">'12/06/2019'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">c3</span><span class=\"token operator\">:</span> <span class=\"token string\">'2014-04-16'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">c4</span><span class=\"token operator\">:</span> <span class=\"token string\">'2019-11-19 09:00 AM'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">c5</span><span class=\"token operator\">:</span> <span class=\"token string\">'2019-11-19 09:00 AM'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">c6</span><span class=\"token operator\">:</span> <span class=\"token string\">'2019-01'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">c7</span><span class=\"token operator\">:</span> <span class=\"token string\">'2019'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">const</span> grid <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">tui<span class=\"token punctuation\">.</span>Grid</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      <span class=\"token literal-property property\">el</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'grid'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">scrollX</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">scrollY</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">data</span><span class=\"token operator\">:</span> gridData<span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">columns</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'DatePicker (Default)'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c1'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'DatePicker (Using options)'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c2'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">format</span><span class=\"token operator\">:</span> <span class=\"token string\">'dd/MM/yyyy'</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'DatePicker (selectableRanges)'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c3'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">selectableRanges</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">Date</span><span class=\"token punctuation\">(</span><span class=\"token number\">2014</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Date</span><span class=\"token punctuation\">(</span><span class=\"token number\">2014</span><span class=\"token punctuation\">,</span> <span class=\"token number\">5</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Date-TimePicker'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c4'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">format</span><span class=\"token operator\">:</span> <span class=\"token string\">'yyyy-MM-dd HH:mm A'</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">timepicker</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Date-TimePicker With tab'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c5'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">format</span><span class=\"token operator\">:</span> <span class=\"token string\">'yyyy-MM-dd HH:mm A'</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">timepicker</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token literal-property property\">layoutType</span><span class=\"token operator\">:</span> <span class=\"token string\">'tab'</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">inputType</span><span class=\"token operator\">:</span> <span class=\"token string\">'spinbox'</span>\n              <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'MonthPicker'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c6'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">format</span><span class=\"token operator\">:</span> <span class=\"token string\">'yyyy-MM'</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'month'</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'YearPicker'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'c7'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'datePicker'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">format</span><span class=\"token operator\">:</span> <span class=\"token string\">'yyyy'</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'year'</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  ","codeHtml":"\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>grid<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n    "},"file":{"relativePath":"examples/example08-date-picker.html"}},"pageContext":{"id":"tutorial-example08-date-picker","filename":"example08-date-picker"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}