12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { DateTimePicker } from 'welcome-ui/DateTimePicker'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"DateTimePicker","pathToFile":"/DateTimePicker/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"react-datepicker","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#react-datepicker","textDecoration":{"hover":"underline"},"children":"react-datepicker"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is based on the ","position":{"start":{"line":4,"column":1,"offset":23},"end":{"line":4,"column":20,"offset":42}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/Hacker0x01/react-datepicker"},"children":[{"type":"text","value":"react-datepicker","position":{"start":{"line":4,"column":21,"offset":43},"end":{"line":4,"column":37,"offset":59}}}],"position":{"start":{"line":4,"column":20,"offset":42},"end":{"line":4,"column":86,"offset":108}}},{"type":"text","value":" library.","position":{"start":{"line":4,"column":86,"offset":108},"end":{"line":4,"column":95,"offset":117}}}],"position":{"start":{"line":4,"column":1,"offset":23},"end":{"line":4,"column":95,"offset":117}}},"children":["It is based on the ",["$","$L22","a-0",{"href":"https://github.com/Hacker0x01/react-datepicker","isExternal":true,"rel":"noreferrer noopener","target":"_blank","node":"$12:0:props:children:2:props:children:2:props:node:children:1","children":"react-datepicker"}]," library."]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Note","position":{"start":{"line":6,"column":2,"offset":120},"end":{"line":6,"column":6,"offset":124}}}],"position":{"start":{"line":6,"column":1,"offset":119},"end":{"line":6,"column":7,"offset":125}}},{"type":"text","value":": Pass a value of ","position":{"start":{"line":6,"column":7,"offset":125},"end":{"line":6,"column":25,"offset":143}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null","position":{"start":{"line":6,"column":25,"offset":143},"end":{"line":6,"column":31,"offset":149}}}],"position":{"start":{"line":6,"column":25,"offset":143},"end":{"line":6,"column":31,"offset":149}}},{"type":"text","value":" if you don't want the default value of ","position":{"start":{"line":6,"column":31,"offset":149},"end":{"line":6,"column":71,"offset":189}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date.now()","position":{"start":{"line":6,"column":71,"offset":189},"end":{"line":6,"column":83,"offset":201}}}],"position":{"start":{"line":6,"column":71,"offset":189},"end":{"line":6,"column":83,"offset":201}}},{"type":"text","value":".","position":{"start":{"line":6,"column":83,"offset":201},"end":{"line":6,"column":84,"offset":202}}}],"position":{"start":{"line":6,"column":1,"offset":119},"end":{"line":6,"column":84,"offset":202}}},"children":[["$","em","em-0",{"children":"Note"}],": Pass a value of ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"null"}]," if you don't want the default value of ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"Date.now()"}],"."]}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"pass-props-to-childs","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#pass-props-to-childs","textDecoration":{"hover":"underline"},"children":"Pass props to childs"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to pass props to DatePicker or TimePicker you need to see example below","position":{"start":{"line":10,"column":1,"offset":230},"end":{"line":10,"column":84,"offset":313}}}],"position":{"start":{"line":10,"column":1,"offset":230},"end":{"line":10,"column":84,"offset":313}}},"children":"If you want to pass props to DatePicker or TimePicker you need to see example below"}],"\n",["$","$L20","div-0",{"code":"import { DatePicker } from 'welcome-ui/DatePicker'\nimport { DateTimePicker } from 'welcome-ui/DateTimePicker'\nimport { WttjIcon } from 'welcome-ui/Icons'\nimport { TimePicker } from 'welcome-ui/TimePicker'\n\nconst Example = () => {\n return (\n \n } iconPlacement=\"right\" value={new Date()} />\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DateTimePicker","pathToFile":"/DateTimePicker/docs/examples/childs.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"sizes","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#sizes","textDecoration":{"hover":"underline"},"children":"Sizes"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use size propety with option:","position":{"start":{"line":16,"column":1,"offset":400},"end":{"line":16,"column":30,"offset":429}}}],"position":{"start":{"line":16,"column":1,"offset":400},"end":{"line":16,"column":30,"offset":429}}},"children":"Use size propety with option:"}],"\n",["$","$L5","ul-0",{"as":"ul","listStyleType":"disc","mt":"sm","children":["\n",["$","$L5","li-0",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"xs"}]," (24px)"]}],"\n",["$","$L5","li-1",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"sm"}]," (32px)"]}],"\n",["$","$L5","li-2",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"md"}]," (40px - default)"]}],"\n",["$","$L5","li-3",{"as":"li","ml":"xxl","mt":"xs","children":[["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"lg"}]," (48px)"]}],"\n"]}],"\n",["$","$L20","div-1",{"code":"import { DateTimePicker } from 'welcome-ui/DateTimePicker'\nimport { Stack } from 'welcome-ui/Stack'\n\nconst Example = () => {\n return (\n \n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DateTimePicker","pathToFile":"/DateTimePicker/docs/examples/sizes.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"transparent","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#transparent","textDecoration":{"hover":"underline"},"children":"Transparent"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass ","position":{"start":{"line":27,"column":1,"offset":588},"end":{"line":27,"column":6,"offset":593}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transparent","position":{"start":{"line":27,"column":6,"offset":593},"end":{"line":27,"column":19,"offset":606}}}],"position":{"start":{"line":27,"column":6,"offset":593},"end":{"line":27,"column":19,"offset":606}}},{"type":"text","value":" to remove background-color and border-color","position":{"start":{"line":27,"column":19,"offset":606},"end":{"line":27,"column":63,"offset":650}}}],"position":{"start":{"line":27,"column":1,"offset":588},"end":{"line":27,"column":63,"offset":650}}},"children":["Pass ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"transparent"}]," to remove background-color and border-color"]}],"\n",["$","$L20","div-2",{"code":"import { DateTimePicker } from 'welcome-ui/DateTimePicker'\n\nconst Example = () => {\n return \n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"DateTimePicker","pathToFile":"/DateTimePicker/docs/examples/transparent.tsx","withCodeEditor":true}]]}]]}],["$","$L23",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#react-datepicker","id":"react-datepicker","title":"react-datepicker"},{"href":"#pass-props-to-childs","id":"pass-props-to-childs","title":"Pass props to childs"},{"href":"#sizes","id":"sizes","title":"Sizes"},{"href":"#transparent","id":"transparent","title":"Transparent"}]}]}]]