"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([[38467],{3905:(t,e,n)=>{n.d(e,{Zo:()=>p,kt:()=>N});var a=n(67294);function l(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function r(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(Object(n),!0).forEach((function(e){l(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,a,l=function(t,e){if(null==t)return{};var n,a,l={},i=Object.keys(t);for(a=0;a<i.length;a++)n=i[a],e.indexOf(n)>=0||(l[n]=t[n]);return l}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(a=0;a<i.length;a++)n=i[a],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(l[n]=t[n])}return l}var m=a.createContext({}),d=function(t){var e=a.useContext(m),n=e;return t&&(n="function"==typeof t?t(e):r(r({},e),t)),n},p=function(t){var e=d(t.components);return a.createElement(m.Provider,{value:e},t.children)},s="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},k=a.forwardRef((function(t,e){var n=t.components,l=t.mdxType,i=t.originalType,m=t.parentName,p=o(t,["components","mdxType","originalType","parentName"]),s=d(n),k=l,N=s["".concat(m,".").concat(k)]||s[k]||u[k]||i;return n?a.createElement(N,r(r({ref:e},p),{},{components:n})):a.createElement(N,r({ref:e},p))}));function N(t,e){var n=arguments,l=e&&e.mdxType;if("string"==typeof t||l){var i=n.length,r=new Array(i);r[0]=k;var o={};for(var m in e)hasOwnProperty.call(e,m)&&(o[m]=e[m]);o.originalType=t,o[s]="string"==typeof t?t:l,r[1]=o;for(var d=2;d<i;d++)r[d]=n[d];return a.createElement.apply(null,r)}return a.createElement.apply(null,n)}k.displayName="MDXCreateElement"},85162:(t,e,n)=>{n.d(e,{Z:()=>r});var a=n(67294),l=n(86010);const i={tabItem:"tabItem_Ymn6"};function r(t){let{children:e,hidden:n,className:r}=t;return a.createElement("div",{role:"tabpanel",className:(0,l.Z)(i.tabItem,r),hidden:n},e)}},74866:(t,e,n)=>{n.d(e,{Z:()=>D});var a=n(87462),l=n(67294),i=n(86010),r=n(12466),o=n(16550),m=n(91980),d=n(67392),p=n(50012);function s(t){return function(t){return l.Children.map(t,(t=>{if(!t||(0,l.isValidElement)(t)&&function(t){const{props:e}=t;return!!e&&"object"==typeof e&&"value"in e}(t))return t;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof t.type?t.type:t.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}(t).map((t=>{let{props:{value:e,label:n,attributes:a,default:l}}=t;return{value:e,label:n,attributes:a,default:l}}))}function u(t){const{values:e,children:n}=t;return(0,l.useMemo)((()=>{const t=e??s(n);return function(t){const e=(0,d.l)(t,((t,e)=>t.value===e.value));if(e.length>0)throw new Error(`Docusaurus error: Duplicate values "${e.map((t=>t.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(t),t}),[e,n])}function k(t){let{value:e,tabValues:n}=t;return n.some((t=>t.value===e))}function N(t){let{queryString:e=!1,groupId:n}=t;const a=(0,o.k6)(),i=function(t){let{queryString:e=!1,groupId:n}=t;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,m._X)(i),(0,l.useCallback)((t=>{if(!i)return;const e=new URLSearchParams(a.location.search);e.set(i,t),a.replace({...a.location,search:e.toString()})}),[i,a])]}function h(t){const{defaultValue:e,queryString:n=!1,groupId:a}=t,i=u(t),[r,o]=(0,l.useState)((()=>function(t){let{defaultValue:e,tabValues:n}=t;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!k({value:e,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map((t=>t.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const a=n.find((t=>t.default))??n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:e,tabValues:i}))),[m,d]=N({queryString:n,groupId:a}),[s,h]=function(t){let{groupId:e}=t;const n=function(t){return t?`docusaurus.tab.${t}`:null}(e),[a,i]=(0,p.Nk)(n);return[a,(0,l.useCallback)((t=>{n&&i.set(t)}),[n,i])]}({groupId:a}),c=(()=>{const t=m??s;return k({value:t,tabValues:i})?t:null})();(0,l.useLayoutEffect)((()=>{c&&o(c)}),[c]);return{selectedValue:r,selectValue:(0,l.useCallback)((t=>{if(!k({value:t,tabValues:i}))throw new Error(`Can't select invalid tab value=${t}`);o(t),d(t),h(t)}),[d,h,i]),tabValues:i}}var c=n(72389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(t){let{className:e,block:n,selectedValue:o,selectValue:m,tabValues:d}=t;const p=[],{blockElementScrollPositionUntilNextRender:s}=(0,r.o5)(),u=t=>{const e=t.currentTarget,n=p.indexOf(e),a=d[n].value;a!==o&&(s(e),m(a))},k=t=>{let e=null;switch(t.key){case"Enter":u(t);break;case"ArrowRight":{const n=p.indexOf(t.currentTarget)+1;e=p[n]??p[0];break}case"ArrowLeft":{const n=p.indexOf(t.currentTarget)-1;e=p[n]??p[p.length-1];break}}e?.focus()};return l.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},e)},d.map((t=>{let{value:e,label:n,attributes:r}=t;return l.createElement("li",(0,a.Z)({role:"tab",tabIndex:o===e?0:-1,"aria-selected":o===e,key:e,ref:t=>p.push(t),onKeyDown:k,onClick:u},r,{className:(0,i.Z)("tabs__item",g.tabItem,r?.className,{"tabs__item--active":o===e})}),n??e)})))}function y(t){let{lazy:e,children:n,selectedValue:a}=t;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){const t=i.find((t=>t.props.value===a));return t?(0,l.cloneElement)(t,{className:"margin-top--md"}):null}return l.createElement("div",{className:"margin-top--md"},i.map(((t,e)=>(0,l.cloneElement)(t,{key:e,hidden:t.props.value!==a}))))}function f(t){const e=h(t);return l.createElement("div",{className:(0,i.Z)("tabs-container",g.tabList)},l.createElement(b,(0,a.Z)({},t,e)),l.createElement(y,(0,a.Z)({},t,e)))}function D(t){const e=(0,c.Z)();return l.createElement(f,(0,a.Z)({key:String(e)},t))}},75082:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>T,contentTitle:()=>I,default:()=>V,frontMatter:()=>C,metadata:()=>w,toc:()=>x});var a=n(87462),l=(n(67294),n(3905)),i=n(74866),r=n(85162);const o={toc:[{value:"cancelText",id:"canceltext",level:3},{value:"dayNames",id:"daynames",level:3},{value:"dayShortNames",id:"dayshortnames",level:3},{value:"dayValues",id:"dayvalues",level:3},{value:"disabled",id:"disabled",level:3},{value:"displayFormat",id:"displayformat",level:3},{value:"displayTimezone",id:"displaytimezone",level:3},{value:"doneText",id:"donetext",level:3},{value:"hourValues",id:"hourvalues",level:3},{value:"max",id:"max",level:3},{value:"min",id:"min",level:3},{value:"minuteValues",id:"minutevalues",level:3},{value:"mode",id:"mode",level:3},{value:"monthNames",id:"monthnames",level:3},{value:"monthShortNames",id:"monthshortnames",level:3},{value:"monthValues",id:"monthvalues",level:3},{value:"name",id:"name",level:3},{value:"pickerFormat",id:"pickerformat",level:3},{value:"pickerOptions",id:"pickeroptions",level:3},{value:"placeholder",id:"placeholder",level:3},{value:"readonly",id:"readonly",level:3},{value:"value",id:"value",level:3},{value:"yearValues",id:"yearvalues",level:3}]},m="wrapper";function d(t){let{components:e,...n}=t;return(0,l.kt)(m,(0,a.Z)({},o,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h3",{id:"canceltext"},"cancelText"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The text to display on the picker's cancel button.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"cancel-text"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"'Cancel'"))))),(0,l.kt)("h3",{id:"daynames"},"dayNames"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"day-names"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c string[] \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"dayshortnames"},"dayShortNames"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. Defaults to: ",(0,l.kt)("inlineCode",{parentName:"td"},"['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"day-short-names"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c string[] \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"dayvalues"},"dayValues"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the ",(0,l.kt)("inlineCode",{parentName:"td"},"dayValues")," input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like ",(0,l.kt)("inlineCode",{parentName:"td"},"31")," in February, it will correctly not show days which are not valid for the selected month.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"day-values"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"number \uff5c number[] \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"disabled"},"disabled"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"If ",(0,l.kt)("inlineCode",{parentName:"td"},"true"),", the user cannot interact with the datetime.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"disabled"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"boolean"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"false"))))),(0,l.kt)("h3",{id:"displayformat"},"displayFormat"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The display format of the date and time as text that shows within the item. When the ",(0,l.kt)("inlineCode",{parentName:"td"},"pickerFormat")," input is not used, then the ",(0,l.kt)("inlineCode",{parentName:"td"},"displayFormat")," is used for both display the formatted text, and determining the datetime picker's columns. See the ",(0,l.kt)("inlineCode",{parentName:"td"},"pickerFormat")," input description for more info. Defaults to ",(0,l.kt)("inlineCode",{parentName:"td"},"MMM D, YYYY"),".")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"display-format"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"'MMM D, YYYY'"))))),(0,l.kt)("h3",{id:"displaytimezone"},"displayTimezone"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The timezone to use for display purposes only. See ",(0,l.kt)("a",{parentName:"td",href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString"},"Date.prototype.toLocaleString()")," for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"display-timezone"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"donetext"},"doneText"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},'The text to display on the picker\'s "Done" button.')),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"done-text"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"'Done'"))))),(0,l.kt)("h3",{id:"hourvalues"},"hourValues"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Values used to create the list of selectable hours. By default the hour values range from ",(0,l.kt)("inlineCode",{parentName:"td"},"0")," to ",(0,l.kt)("inlineCode",{parentName:"td"},"23")," for 24-hour, or ",(0,l.kt)("inlineCode",{parentName:"td"},"1")," to ",(0,l.kt)("inlineCode",{parentName:"td"},"12")," for 12-hour. However, to control exactly which hours to display, the ",(0,l.kt)("inlineCode",{parentName:"td"},"hourValues")," input can take a number, an array of numbers, or a string of comma separated numbers.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"hour-values"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"number \uff5c number[] \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"max"},"max"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The maximum datetime allowed. Value must be a date string following the ",(0,l.kt)("a",{parentName:"td",href:"https://www.w3.org/TR/NOTE-datetime"},"ISO 8601 datetime format standard"),", ",(0,l.kt)("inlineCode",{parentName:"td"},"1996-12-19"),". The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as ",(0,l.kt)("inlineCode",{parentName:"td"},"1994"),". Defaults to the end of this year.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"max"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"min"},"min"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The minimum datetime allowed. Value must be a date string following the ",(0,l.kt)("a",{parentName:"td",href:"https://www.w3.org/TR/NOTE-datetime"},"ISO 8601 datetime format standard"),", such as ",(0,l.kt)("inlineCode",{parentName:"td"},"1996-12-19"),". The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as ",(0,l.kt)("inlineCode",{parentName:"td"},"1994"),". Defaults to the beginning of the year, 100 years ago from today.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"min"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"minutevalues"},"minuteValues"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Values used to create the list of selectable minutes. By default the minutes range from ",(0,l.kt)("inlineCode",{parentName:"td"},"0")," to ",(0,l.kt)("inlineCode",{parentName:"td"},"59"),". However, to control exactly which minutes to display, the ",(0,l.kt)("inlineCode",{parentName:"td"},"minuteValues")," input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be ",(0,l.kt)("inlineCode",{parentName:"td"},'minuteValues="0,15,30,45"'),".")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"minute-values"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"number \uff5c number[] \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"mode"},"mode"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The mode determines which platform styles to use.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"mode"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},'"ios" \uff5c "md"'))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"monthnames"},"monthNames"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Full names for each month name. This can be used to provide locale month names. Defaults to English.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"month-names"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c string[] \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"monthshortnames"},"monthShortNames"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"month-short-names"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c string[] \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"monthvalues"},"monthValues"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Values used to create the list of selectable months. By default the month values range from ",(0,l.kt)("inlineCode",{parentName:"td"},"1")," to ",(0,l.kt)("inlineCode",{parentName:"td"},"12"),". However, to control exactly which months to display, the ",(0,l.kt)("inlineCode",{parentName:"td"},"monthValues")," input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be ",(0,l.kt)("inlineCode",{parentName:"td"},'monthValues="6,7,8"'),". Note that month numbers do ",(0,l.kt)("em",{parentName:"td"},"not")," have a zero-based index, meaning January's value is ",(0,l.kt)("inlineCode",{parentName:"td"},"1"),", and December's is ",(0,l.kt)("inlineCode",{parentName:"td"},"12"),".")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"month-values"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"number \uff5c number[] \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"name"},"name"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The name of the control, which is submitted with the form data.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"name"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"this.inputId"))))),(0,l.kt)("h3",{id:"pickerformat"},"pickerFormat"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use ",(0,l.kt)("inlineCode",{parentName:"td"},"displayFormat"),".")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"picker-format"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"pickeroptions"},"pickerOptions"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Any additional options that the picker interface can accept. See the ",(0,l.kt)("a",{parentName:"td",href:"../picker"},"Picker API docs")," for the picker options.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined \uff5c { columns?: PickerColumn[] \uff5c undefined; buttons?: PickerButton[] \uff5c undefined; cssClass?: string \uff5c string[] \uff5c undefined; showBackdrop?: boolean \uff5c undefined; backdropDismiss?: boolean \uff5c undefined; animated?: boolean \uff5c undefined; mode?: Mode \uff5c undefined; keyboardClose?: boolean \uff5c undefined; id?: string \uff5c undefined; htmlAttributes?: PickerAttributes \uff5c undefined; enterAnimation?: AnimationBuilder \uff5c undefined; leaveAnimation?: AnimationBuilder \uff5c undefined; }"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"placeholder"},"placeholder"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The text to display when there's no date selected yet. Using lowercase to match the input attribute")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"placeholder"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"null \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"readonly"},"readonly"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"If ",(0,l.kt)("inlineCode",{parentName:"td"},"true"),", the datetime appears normal but is not interactive.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"readonly"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"boolean"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"false"))))),(0,l.kt)("h3",{id:"value"},"value"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"The value of the datetime as a valid ISO 8601 datetime string.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"value"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"null \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,l.kt)("h3",{id:"yearvalues"},"yearValues"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Values used to create the list of selectable years. By default the year values range between the ",(0,l.kt)("inlineCode",{parentName:"td"},"min")," and ",(0,l.kt)("inlineCode",{parentName:"td"},"max")," datetime inputs. However, to control exactly which years to display, the ",(0,l.kt)("inlineCode",{parentName:"td"},"yearValues")," input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be ",(0,l.kt)("inlineCode",{parentName:"td"},'yearValues="2024,2020,2016,2012,2008"'),".")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Attribute")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"year-values"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Type")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"number \uff5c number[] \uff5c string \uff5c undefined"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"undefined"))))))}d.isMDXComponent=!0;const p={toc:[]},s="wrapper";function u(t){let{components:e,...n}=t;return(0,l.kt)(s,(0,a.Z)({},p,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Name"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"ionBlur")),(0,l.kt)("td",{parentName:"tr",align:null},"Emitted when the datetime loses focus.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"ionCancel")),(0,l.kt)("td",{parentName:"tr",align:null},"Emitted when the datetime selection was cancelled.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"ionChange")),(0,l.kt)("td",{parentName:"tr",align:null},"Emitted when the value (selected date) has changed.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"ionFocus")),(0,l.kt)("td",{parentName:"tr",align:null},"Emitted when the datetime has focus.")))))}u.isMDXComponent=!0;const k={toc:[{value:"open",id:"open",level:3}]},N="wrapper";function h(t){let{components:e,...n}=t;return(0,l.kt)(N,(0,a.Z)({},k,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h3",{id:"open"},"open"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null}),(0,l.kt)("th",{parentName:"tr",align:null}))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Description")),(0,l.kt)("td",{parentName:"tr",align:null},"Opens the datetime overlay.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("strong",{parentName:"td"},"Signature")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"open() => Promise<void>"))))))}h.isMDXComponent=!0;const c={toc:[]},g="wrapper";function b(t){let{components:e,...n}=t;return(0,l.kt)(g,(0,a.Z)({},c,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Name"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"placeholder")),(0,l.kt)("td",{parentName:"tr",align:null},"The placeholder of the datetime.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"text")),(0,l.kt)("td",{parentName:"tr",align:null},"The value of the datetime.")))))}b.isMDXComponent=!0;const y={toc:[]},f="wrapper";function D(t){let{components:e,...n}=t;return(0,l.kt)(f,(0,a.Z)({},y,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Name"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"--padding-bottom")),(0,l.kt)("td",{parentName:"tr",align:null},"Bottom padding of the datetime")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"--padding-end")),(0,l.kt)("td",{parentName:"tr",align:null},"Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"--padding-start")),(0,l.kt)("td",{parentName:"tr",align:null},"Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"--padding-top")),(0,l.kt)("td",{parentName:"tr",align:null},"Top padding of the datetime")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"--placeholder-color")),(0,l.kt)("td",{parentName:"tr",align:null},"Color of the datetime placeholder")))))}D.isMDXComponent=!0;const v={toc:[]},Y="wrapper";function M(t){let{components:e,...n}=t;return(0,l.kt)(Y,(0,a.Z)({},v,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"No slots available for this component."))}M.isMDXComponent=!0;const C={sidebar_label:"ion-datetime",demoUrl:"/docs/demos/api/datetime/index.html",demoSourceUrl:"https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/datetime/index.html"},I="ion-datetime",w={unversionedId:"api/datetime",id:"version-v5/api/datetime",title:"ion-datetime",description:"Datetimes present a picker interface from the bottom of a page, making it easy for",source:"@site/versioned_docs/version-v5/api/datetime.md",sourceDirName:"api",slug:"/api/datetime",permalink:"/docs/v5/api/datetime",draft:!1,editUrl:"https://github.com/ionic-team/ionic-docs/tree/main/docs/api/datetime.md",tags:[],version:"v5",frontMatter:{sidebar_label:"ion-datetime",demoUrl:"/docs/demos/api/datetime/index.html",demoSourceUrl:"https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/datetime/index.html"},sidebar:"version-v5/api",previous:{title:"ion-content",permalink:"/docs/v5/api/content"},next:{title:"ion-picker",permalink:"/docs/v5/api/picker"}},T={},x=[{value:"Display and Picker Formats",id:"display-and-picker-formats",level:2},{value:"Display Format",id:"display-format",level:3},{value:"Display Timezone",id:"display-timezone",level:3},{value:"Picker Format",id:"picker-format",level:3},{value:"Datetime Data",id:"datetime-data",level:3},{value:"ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ",id:"iso-8601-datetime-format-yyyy-mm-ddthhmmz",level:5},{value:"Min and Max Datetimes",id:"min-and-max-datetimes",level:2},{value:"Month Names and Day of the Week Names",id:"month-names-and-day-of-the-week-names",level:2},{value:"Advanced Datetime Validation and Manipulation",id:"advanced-datetime-validation-and-manipulation",level:3},{value:"Usage",id:"usage",level:2},{value:"Properties",id:"properties",level:2},{value:"Events",id:"events",level:2},{value:"Methods",id:"methods",level:2},{value:"CSS Shadow Parts",id:"css-shadow-parts",level:2},{value:"CSS Custom Properties",id:"css-custom-properties",level:2},{value:"Slots",id:"slots",level:2}],S={toc:x},F="wrapper";function V(t){let{components:e,...n}=t;return(0,l.kt)(F,(0,a.Z)({},S,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"ion-datetime"},"ion-datetime"),(0,l.kt)("p",null,"Datetimes present a picker interface from the bottom of a page, making it easy for\nusers to select dates and times. The picker displays scrollable columns that can be\nused to individually select years, months, days, hours and minute values. Datetimes\nare similar to the native ",(0,l.kt)("inlineCode",{parentName:"p"},"input")," elements of type ",(0,l.kt)("inlineCode",{parentName:"p"},"datetime-local"),", however, Ionic's\nDatetime component makes it easy to display the date and time in a preferred format,\nand manage the datetime values."),(0,l.kt)("h2",{id:"display-and-picker-formats"},"Display and Picker Formats"),(0,l.kt)("p",null,"The datetime component displays the values in two places: in the ",(0,l.kt)("inlineCode",{parentName:"p"},"<ion-datetime>")," component,\nand in the picker interface that is presented from the bottom of the screen. The following\nchart lists all of the formats that can be used."),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Format"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"),(0,l.kt)("th",{parentName:"tr",align:null},"Example"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"YYYY")),(0,l.kt)("td",{parentName:"tr",align:null},"Year, 4 digits"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"2018"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"YY")),(0,l.kt)("td",{parentName:"tr",align:null},"Year, 2 digits"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"18"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"M")),(0,l.kt)("td",{parentName:"tr",align:null},"Month"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"1")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"12"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"MM")),(0,l.kt)("td",{parentName:"tr",align:null},"Month, leading zero"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"01")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"12"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"MMM")),(0,l.kt)("td",{parentName:"tr",align:null},"Month, short name"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Jan"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"MMMM")),(0,l.kt)("td",{parentName:"tr",align:null},"Month, full name"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"January"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"D")),(0,l.kt)("td",{parentName:"tr",align:null},"Day"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"1")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"31"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"DD")),(0,l.kt)("td",{parentName:"tr",align:null},"Day, leading zero"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"01")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"31"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"DDD")),(0,l.kt)("td",{parentName:"tr",align:null},"Day, short name"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Fri"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"DDDD")),(0,l.kt)("td",{parentName:"tr",align:null},"Day, full name"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Friday"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"H")),(0,l.kt)("td",{parentName:"tr",align:null},"Hour, 24-hour"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"0")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"23"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"HH")),(0,l.kt)("td",{parentName:"tr",align:null},"Hour, 24-hour, leading zero"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"00")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"23"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"h")),(0,l.kt)("td",{parentName:"tr",align:null},"Hour, 12-hour"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"1")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"12"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"hh")),(0,l.kt)("td",{parentName:"tr",align:null},"Hour, 12-hour, leading zero"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"01")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"12"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"a")),(0,l.kt)("td",{parentName:"tr",align:null},"12-hour time period, lowercase"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"am")," ",(0,l.kt)("inlineCode",{parentName:"td"},"pm"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"A")),(0,l.kt)("td",{parentName:"tr",align:null},"12-hour time period, uppercase"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"AM")," ",(0,l.kt)("inlineCode",{parentName:"td"},"PM"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"m")),(0,l.kt)("td",{parentName:"tr",align:null},"Minute"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"1")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"59"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"mm")),(0,l.kt)("td",{parentName:"tr",align:null},"Minute, leading zero"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"01")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"59"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"s")),(0,l.kt)("td",{parentName:"tr",align:null},"Second"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"1")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"59"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"ss")),(0,l.kt)("td",{parentName:"tr",align:null},"Second, leading zero"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"01")," ... ",(0,l.kt)("inlineCode",{parentName:"td"},"59"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Z")),(0,l.kt)("td",{parentName:"tr",align:null},"UTC Timezone Offset"),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Z or +HH:mm or -HH:mm"))))),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Important"),": See the ",(0,l.kt)("a",{parentName:"p",href:"#month-names-and-day-of-the-week-names"},"Month Names and Day of the Week\nNames")," section below on how to use\ndifferent names for the month and day."),(0,l.kt)("h3",{id:"display-format"},"Display Format"),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"displayFormat")," property specifies how a datetime's value should be\nprinted, as formatted text, within the datetime component."),(0,l.kt)("p",null,"A few examples are provided in the chart below. The formats mentioned\nabove can be passed in to the display format in any combination."),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Display Format"),(0,l.kt)("th",{parentName:"tr",align:null},"Example"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"M-YYYY")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"6-2005"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"MM/YY")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"06/05"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"MMM YYYY")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Jun 2005"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"YYYY, MMMM")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"2005, June"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"MMM DD, YYYY HH:mm")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Jun 17, 2005 11:06"))))),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Important"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"ion-datetime")," will by default display values relative to the user's timezone.\nGiven a value of ",(0,l.kt)("inlineCode",{parentName:"p"},"09:00:00+01:00"),", the datetime component will\ndisplay it as ",(0,l.kt)("inlineCode",{parentName:"p"},"04:00:00-04:00")," for users in a ",(0,l.kt)("inlineCode",{parentName:"p"},"-04:00")," timezone offset.\nTo change the display to use a different timezone, use the displayTimezone property described below."),(0,l.kt)("h3",{id:"display-timezone"},"Display Timezone"),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"displayTimezone"),' property allows you to change the default behavior\nof displaying values relative to the user\'s local timezone. In addition to "UTC" valid\ntime zone values are determined by the browser, and in most cases follow the time zone names\nof the ',(0,l.kt)("a",{parentName:"p",href:"https://www.iana.org/time-zones"},"IANA time zone database"),', such as "Asia/Shanghai",\n"Asia/Kolkata", "America/New_York". In the following example:'),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<ion-datetime value="2019-10-01T15:43:40.394Z" display-timezone="utc"></ion-datetime>\n')),(0,l.kt)("p",null,"The displayed value will not be converted and will be displayed as provided (UTC)."),(0,l.kt)("h3",{id:"picker-format"},"Picker Format"),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"pickerFormat")," property determines which columns should be shown in the picker\ninterface, the order of the columns, and which format to use within each\ncolumn. If ",(0,l.kt)("inlineCode",{parentName:"p"},"pickerFormat")," is not provided then it will use the value of\n",(0,l.kt)("inlineCode",{parentName:"p"},"displayFormat"),". Refer to the chart in the ",(0,l.kt)("a",{parentName:"p",href:"#display-format"},"Display Format")," section\nfor some formatting examples."),(0,l.kt)("h3",{id:"datetime-data"},"Datetime Data"),(0,l.kt)("p",null,"Historically, handling datetime values within JavaScript, or even within HTML\ninputs, has always been a challenge. Specifically, JavaScript's ",(0,l.kt)("inlineCode",{parentName:"p"},"Date")," object is\nnotoriously difficult to correctly parse apart datetime strings or to format\ndatetime values. Even worse is how different browsers and JavaScript versions\nparse various datetime strings differently, especially per locale."),(0,l.kt)("p",null,"Fortunately, Ionic's datetime input has been designed so developers can avoid\nthe common pitfalls, allowing developers to easily format datetime values within\nthe input, and give the user a simple datetime picker for a great user\nexperience."),(0,l.kt)("h5",{id:"iso-8601-datetime-format-yyyy-mm-ddthhmmz"},"ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ"),(0,l.kt)("p",null,"Ionic uses the ",(0,l.kt)("a",{parentName:"p",href:"https://www.w3.org/TR/NOTE-datetime"},"ISO 8601 datetime format"),"\nfor its value. The value is simply a string, rather than using JavaScript's\n",(0,l.kt)("inlineCode",{parentName:"p"},"Date")," object. Using the ISO datetime format makes it easy to serialize\nand parse within JSON objects and databases."),(0,l.kt)("p",null,"An ISO format can be used as a simple year, or just the hour and minute, or get\nmore detailed down to the millisecond and timezone. Any of the ISO formats below\ncan be used, and after a user selects a new value, Ionic will continue to use\nthe same ISO format which datetime value was originally given as."),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Description"),(0,l.kt)("th",{parentName:"tr",align:null},"Format"),(0,l.kt)("th",{parentName:"tr",align:null},"Datetime Value Example"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Year"),(0,l.kt)("td",{parentName:"tr",align:null},"YYYY"),(0,l.kt)("td",{parentName:"tr",align:null},"1994")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Year and Month"),(0,l.kt)("td",{parentName:"tr",align:null},"YYYY-MM"),(0,l.kt)("td",{parentName:"tr",align:null},"1994-12")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Complete Date"),(0,l.kt)("td",{parentName:"tr",align:null},"YYYY-MM-DD"),(0,l.kt)("td",{parentName:"tr",align:null},"1994-12-15")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Date and Time"),(0,l.kt)("td",{parentName:"tr",align:null},"YYYY-MM-DDTHH:mm"),(0,l.kt)("td",{parentName:"tr",align:null},"1994-12-15T13:47")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"UTC Timezone"),(0,l.kt)("td",{parentName:"tr",align:null},"YYYY-MM-DDTHH:mm:ssTZD"),(0,l.kt)("td",{parentName:"tr",align:null},"1994-12-15T13:47:20.789Z")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Timezone Offset"),(0,l.kt)("td",{parentName:"tr",align:null},"YYYY-MM-DDTHH:mm:ssTZD"),(0,l.kt)("td",{parentName:"tr",align:null},"1994-12-15T13:47:20.789+05:00")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Hour and Minute"),(0,l.kt)("td",{parentName:"tr",align:null},"HH:mm"),(0,l.kt)("td",{parentName:"tr",align:null},"13:47")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"Hour, Minute, Second"),(0,l.kt)("td",{parentName:"tr",align:null},"HH:mm:ss"),(0,l.kt)("td",{parentName:"tr",align:null},"13:47:20")))),(0,l.kt)("p",null,"Note that the year is always four-digits, milliseconds (if it's added) is always\nthree-digits, and all others are always two-digits. So the number representing\nJanuary always has a leading zero, such as ",(0,l.kt)("inlineCode",{parentName:"p"},"01"),". Additionally, the hour is\nalways in the 24-hour format, so ",(0,l.kt)("inlineCode",{parentName:"p"},"00")," is ",(0,l.kt)("inlineCode",{parentName:"p"},"12am")," on a 12-hour clock, ",(0,l.kt)("inlineCode",{parentName:"p"},"13")," means\n",(0,l.kt)("inlineCode",{parentName:"p"},"1pm"),", and ",(0,l.kt)("inlineCode",{parentName:"p"},"23")," means ",(0,l.kt)("inlineCode",{parentName:"p"},"11pm"),"."),(0,l.kt)("p",null,"Also note that neither the ",(0,l.kt)("inlineCode",{parentName:"p"},"displayFormat")," nor the ",(0,l.kt)("inlineCode",{parentName:"p"},"pickerFormat"),"\ncan set the datetime value's output, which is the value that is set by the\ncomponent's ",(0,l.kt)("inlineCode",{parentName:"p"},"ngModel"),". The formats are merely for displaying the value as text\nand the picker's interface, but the datetime's value is always persisted as a\nvalid ISO 8601 datetime string."),(0,l.kt)("h2",{id:"min-and-max-datetimes"},"Min and Max Datetimes"),(0,l.kt)("p",null,"Dates are infinite in either direction, so for a user's selection there should\nbe at least some form of restricting the dates that can be selected. By default,\nthe maximum date is to the end of the current year, and the minimum date is from\nthe beginning of the year that was 100 years ago."),(0,l.kt)("p",null,"To customize the minimum and maximum datetime values, the ",(0,l.kt)("inlineCode",{parentName:"p"},"min")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"max"),"\ncomponent properties can be provided which may make more sense for the app's\nuse-case, rather than the default of the last 100 years. Following the same IS0\n8601 format listed in the table above, each component can restrict which dates\ncan be selected by the user. By passing ",(0,l.kt)("inlineCode",{parentName:"p"},"2016")," to the ",(0,l.kt)("inlineCode",{parentName:"p"},"min")," property and ",(0,l.kt)("inlineCode",{parentName:"p"},"2020-10-31"),"\nto the ",(0,l.kt)("inlineCode",{parentName:"p"},"max")," property, the datetime will restrict the date selection between the\nbeginning of 2016, and October 31st of 2020."),(0,l.kt)("h2",{id:"month-names-and-day-of-the-week-names"},"Month Names and Day of the Week Names"),(0,l.kt)("p",null,"At this time, there is no one-size-fits-all standard to automatically choose the\ncorrect language/spelling for a month name, or day of the week name, depending\non the language or locale."),(0,l.kt)("p",null,"The good news is that there is an ",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat"},"Intl.DatetimeFormat"),"\nstandard which ",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat#Browser_compatibility"},"most browsers")," have adopted."),(0,l.kt)("p",null,"However, at this time the standard has not been fully implemented by all popular browsers\nso Ionic is unavailable to take advantage of it yet."),(0,l.kt)("p",null,"Additionally, Angular also provides an internationalization service, but it is still\nunder heavy development so Ionic does not depend on it at this time."),(0,l.kt)("p",null,"The current best practice is to provide an array of names if the app needs to use names other\nthan the default English version of month and day names. The month names and day names can be\neither configured at the app level, or individual ",(0,l.kt)("inlineCode",{parentName:"p"},"ion-datetime")," level."),(0,l.kt)("h3",{id:"advanced-datetime-validation-and-manipulation"},"Advanced Datetime Validation and Manipulation"),(0,l.kt)("p",null,"The datetime picker provides the simplicity of selecting an exact format, and\npersists the datetime values as a string using the standardized ",(0,l.kt)("a",{parentName:"p",href:"https://www.w3.org/TR/NOTE-datetime"},"ISO 8601\ndatetime format"),". However, it's important\nto note that ",(0,l.kt)("inlineCode",{parentName:"p"},"ion-datetime")," does not attempt to solve all situations when\nvalidating and manipulating datetime values. If datetime values need to be\nparsed from a certain format, or manipulated (such as adding 5 days to a date,\nsubtracting 30 minutes, etc.), or even formatting data to a specific locale,\nthen we highly recommend using ",(0,l.kt)("a",{parentName:"p",href:"https://date-fns.org"},"date-fns")," to work with\ndates in JavaScript."),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)(i.Z,{groupId:"framework",defaultValue:"angular",values:[{value:"angular",label:"Angular"},{value:"javascript",label:"Javascript"},{value:"react",label:"React"},{value:"stencil",label:"Stencil"},{value:"vue",label:"Vue"}],mdxType:"Tabs"},(0,l.kt)(r.Z,{value:"angular",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<ion-item>\n  <ion-label>MMMM</ion-label>\n  <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>MM DD YY</ion-label>\n  <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>Disabled</ion-label>\n  <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>YYYY</ion-label>\n  <ion-datetime\n    [pickerOptions]="customPickerOptions"\n    placeholder="Custom Options"\n    displayFormat="YYYY"\n    min="1981"\n    max="2002"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label position="stacked">MMMM YY</ion-label>\n  <ion-datetime\n    displayFormat="MMMM YY"\n    min="1989-06-04"\n    max="2004-08-23"\n    value="1994-12-15T13:47:20.789"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label position="floating">MM/DD/YYYY</ion-label>\n  <ion-datetime\n    displayFormat="MM/DD/YYYY"\n    min="1994-03-14"\n    max="2012-12-09"\n    value="2002-09-23T15:03:46.789"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label position="floating">MM/DD/YYYY</ion-label>\n  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n  <ion-datetime\n    value="1995-04-15"\n    min="1990-02"\n    max="2000"\n    [dayShortNames]="customDayShortNames"\n    displayFormat="DDD. MMM DD, YY"\n    monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>D MMM YYYY H:mm</ion-label>\n  <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>DDDD MMM D, YYYY</ion-label>\n  <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>HH:mm</ion-label>\n  <ion-datetime displayFormat="HH:mm"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>h:mm a</ion-label>\n  <ion-datetime displayFormat="h:mm a"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>hh:mm A (15 min steps)</ion-label>\n  <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>Leap years, summer months</ion-label>\n  <ion-datetime\n    displayFormat="MM/YYYY"\n    pickerFormat="MMMM YYYY"\n    monthValues="6,7,8"\n    [yearValues]="customYearValues"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>Specific days/months/years</ion-label>\n  <ion-datetime\n    monthValues="6,7,8"\n    yearValues="2014,2015"\n    dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"\n    displayFormat="DD/MMM/YYYY"\n  ></ion-datetime>\n</ion-item>\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},"@Component({\u2026})\nexport class MyComponent {\n  customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n  customDayShortNames = ['s\\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\\u00f8r'];\n  customPickerOptions: any;\n\n  constructor() {\n    this.customPickerOptions = {\n      buttons: [{\n        text: 'Save',\n        handler: () => console.log('Clicked Save!')\n      }, {\n        text: 'Log',\n        handler: () => {\n          console.log('Clicked Log. Do not Dismiss.');\n          return false;\n        }\n      }]\n    }\n  }\n\n}\n"))),(0,l.kt)(r.Z,{value:"javascript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<ion-item>\n  <ion-label>MMMM</ion-label>\n  <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>MM DD YY</ion-label>\n  <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>Disabled</ion-label>\n  <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>YYYY</ion-label>\n  <ion-datetime\n    id="customPickerOptions"\n    placeholder="Custom Options"\n    display-format="YYYY"\n    min="1981"\n    max="2002"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label position="stacked">MMMM YY</ion-label>\n  <ion-datetime\n    display-format="MMMM YY"\n    min="1989-06-04"\n    max="2004-08-23"\n    value="1994-12-15T13:47:20.789"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label position="floating">MM/DD/YYYY</ion-label>\n  <ion-datetime\n    display-format="MM/DD/YYYY"\n    min="1994-03-14"\n    max="2012-12-09"\n    value="2002-09-23T15:03:46.789"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label position="floating">MM/DD/YYYY</ion-label>\n  <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n  <ion-datetime\n    id="customDayShortNames"\n    value="1995-04-15"\n    min="1990-02"\n    max="2000"\n    display-format="DDD. MMM DD, YY"\n    month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>D MMM YYYY H:mm</ion-label>\n  <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>DDDD MMM D, YYYY</ion-label>\n  <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>HH:mm</ion-label>\n  <ion-datetime display-format="HH:mm"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>h:mm a</ion-label>\n  <ion-datetime display-format="h:mm a"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>hh:mm A (15 min steps)</ion-label>\n  <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>Leap years, summer months</ion-label>\n  <ion-datetime\n    id="customYearValues"\n    display-format="MM/YYYY"\n    picker-format="MMMM YYYY"\n    month-values="6,7,8"\n  ></ion-datetime>\n</ion-item>\n\n<ion-item>\n  <ion-label>Specific days/months/years</ion-label>\n  <ion-datetime\n    month-values="6,7,8"\n    year-values="2014,2015"\n    day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"\n    display-format="DD/MMM/YYYY"\n  ></ion-datetime>\n</ion-item>\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];\nvar customYearValues = document.getElementById('customYearValues');\ncustomYearValues.yearValues = yearValuesArray;\n\nvar dayShortNamesArray = ['s\\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\\u00f8r'];\nvar customDayShortNames = document.getElementById('customDayShortNames');\ncustomDayShortNames.dayShortNames = dayShortNamesArray;\n\nvar customPickerButtons = {\n  buttons: [\n    {\n      text: 'Save',\n      handler: () => console.log('Clicked Save!'),\n    },\n    {\n      text: 'Log',\n      handler: () => {\n        console.log('Clicked Log. Do not Dismiss.');\n        return false;\n      },\n    },\n  ],\n};\nvar customPickerOptions = document.getElementById('customPickerOptions');\ncustomPickerOptions.pickerOptions = customPickerButtons;\n"))),(0,l.kt)(r.Z,{value:"react",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},'import React, { useState } from \'react\';\nimport {\n  IonContent,\n  IonHeader,\n  IonPage,\n  IonTitle,\n  IonToolbar,\n  IonItem,\n  IonLabel,\n  IonDatetime,\n  IonFooter,\n} from \'@ionic/react\';\n\nconst customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n\nconst customDayShortNames = [\'s\\u00f8n\', \'man\', \'tir\', \'ons\', \'tor\', \'fre\', \'l\\u00f8r\'];\n\nexport const DateTimeExamples: React.FC = () => {\n  const [selectedDate, setSelectedDate] = useState<string>(\'2012-12-15T13:47:20.789\');\n  return (\n    <IonPage>\n      <IonHeader>\n        <IonToolbar>\n          <IonTitle>IonDatetime Examples</IonTitle>\n        </IonToolbar>\n      </IonHeader>\n      <IonContent>\n        <IonItem>\n          <IonLabel>MMMM</IonLabel>\n          <IonDatetime\n            displayFormat="MMMM"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>MM DD YY</IonLabel>\n          <IonDatetime\n            displayFormat="MM DD YY"\n            placeholder="Select Date"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>Disabled</IonLabel>\n          <IonDatetime\n            id="dynamicDisabled"\n            displayFormat="MM DD YY"\n            disabled\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>YYYY</IonLabel>\n          <IonDatetime\n            pickerOptions={{\n              buttons: [\n                {\n                  text: \'Save\',\n                  handler: () => console.log(\'Clicked Save!\'),\n                },\n                {\n                  text: \'Log\',\n                  handler: () => {\n                    console.log(\'Clicked Log. Do not Dismiss.\');\n                    return false;\n                  },\n                },\n              ],\n            }}\n            placeholder="Custom Options"\n            displayFormat="YYYY"\n            min="1981"\n            max="2002"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel position="stacked">MMMM YY</IonLabel>\n          <IonDatetime\n            displayFormat="MMMM YY"\n            min="1989-06-04"\n            max="2004-08-23"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel position="floating">MM/DD/YYYY</IonLabel>\n          <IonDatetime\n            displayFormat="MM/DD/YYYY"\n            min="1994-03-14"\n            max="2012-12-09"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel position="floating">MM/DD/YYYY</IonLabel>\n          <IonDatetime\n            displayFormat="MM/DD/YYYY"\n            min="1994-03-14"\n            max="2012-12-09"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>\n          <IonDatetime\n            min="1990-02"\n            max="2000"\n            dayShortNames={customDayShortNames}\n            displayFormat="DDD. MMM DD, YY"\n            monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>D MMM YYYY H:mm</IonLabel>\n          <IonDatetime\n            displayFormat="D MMM YYYY H:mm"\n            min="1997"\n            max="2010"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>DDDD MMM D, YYYY</IonLabel>\n          <IonDatetime\n            displayFormat="DDDD MMM D, YYYY"\n            min="2005"\n            max="2016"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>HH:mm</IonLabel>\n          <IonDatetime\n            displayFormat="HH:mm"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>h:mm a</IonLabel>\n          <IonDatetime\n            displayFormat="h:mm a"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>hh:mm A (15 min steps)</IonLabel>\n          <IonDatetime\n            displayFormat="h:mm A"\n            minuteValues="0,15,30,45"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>Leap years, summer months</IonLabel>\n          <IonDatetime\n            displayFormat="MM/YYYY"\n            pickerFormat="MMMM YYYY"\n            monthValues="6,7,8"\n            yearValues={customYearValues}\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n\n        <IonItem>\n          <IonLabel>Specific days/months/years</IonLabel>\n          <IonDatetime\n            monthValues="6,7,8"\n            yearValues="2014,2015"\n            dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"\n            displayFormat="DD/MMM/YYYY"\n            value={selectedDate}\n            onIonChange={(e) => setSelectedDate(e.detail.value!)}\n          ></IonDatetime>\n        </IonItem>\n      </IonContent>\n      <IonFooter>\n        <IonToolbar>Selected Date: {selectedDate ?? \'(none)\'}</IonToolbar>\n      </IonFooter>\n    </IonPage>\n  );\n};\n'))),(0,l.kt)(r.Z,{value:"stencil",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},'import { Component, h } from \'@stencil/core\';\n\n@Component({\n  tag: \'datetime-example\',\n  styleUrl: \'datetime-example.css\',\n})\nexport class DatetimeExample {\n  private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n  private customDayShortNames = [\'s\\u00f8n\', \'man\', \'tir\', \'ons\', \'tor\', \'fre\', \'l\\u00f8r\'];\n  private customPickerOptions = {\n    buttons: [\n      {\n        text: \'Save\',\n        handler: () => console.log(\'Clicked Save!\'),\n      },\n      {\n        text: \'Log\',\n        handler: () => {\n          console.log(\'Clicked Log. Do not Dismiss.\');\n          return false;\n        },\n      },\n    ],\n  };\n\n  render() {\n    return [\n      <ion-item>\n        <ion-label>MMMM</ion-label>\n        <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>MM DD YY</ion-label>\n        <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>Disabled</ion-label>\n        <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>YYYY</ion-label>\n        <ion-datetime\n          pickerOptions={this.customPickerOptions}\n          placeholder="Custom Options"\n          displayFormat="YYYY"\n          min="1981"\n          max="2002"\n        ></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label position="stacked">MMMM YY</ion-label>\n        <ion-datetime\n          displayFormat="MMMM YY"\n          min="1989-06-04"\n          max="2004-08-23"\n          value="1994-12-15T13:47:20.789"\n        ></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label position="floating">MM/DD/YYYY</ion-label>\n        <ion-datetime\n          displayFormat="MM/DD/YYYY"\n          min="1994-03-14"\n          max="2012-12-09"\n          value="2002-09-23T15:03:46.789"\n        ></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label position="floating">MM/DD/YYYY</ion-label>\n        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n        <ion-datetime\n          value="1995-04-15"\n          min="1990-02"\n          max="2000"\n          dayShortNames={this.customDayShortNames}\n          displayFormat="DDD. MMM DD, YY"\n          monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"\n        ></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>D MMM YYYY H:mm</ion-label>\n        <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>DDDD MMM D, YYYY</ion-label>\n        <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>HH:mm</ion-label>\n        <ion-datetime displayFormat="HH:mm"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>h:mm a</ion-label>\n        <ion-datetime displayFormat="h:mm a"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>hh:mm A (15 min steps)</ion-label>\n        <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>Leap years, summer months</ion-label>\n        <ion-datetime\n          displayFormat="MM/YYYY"\n          pickerFormat="MMMM YYYY"\n          monthValues="6,7,8"\n          yearValues={this.customYearValues}\n        ></ion-datetime>\n      </ion-item>,\n\n      <ion-item>\n        <ion-label>Specific days/months/years</ion-label>\n        <ion-datetime\n          monthValues="6,7,8"\n          yearValues="2014,2015"\n          dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"\n          displayFormat="DD/MMM/YYYY"\n        ></ion-datetime>\n      </ion-item>,\n    ];\n  }\n}\n'))),(0,l.kt)(r.Z,{value:"vue",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<template>\n  <ion-item>\n    <ion-label>MMMM</ion-label>\n    <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>MM DD YY</ion-label>\n    <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>Disabled</ion-label>\n    <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>YYYY</ion-label>\n    <ion-datetime\n      :picker-options="customPickerOptions"\n      placeholder="Custom Options"\n      display-format="YYYY"\n      min="1981"\n      max="2002"\n    ></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label position="stacked">MMMM YY</ion-label>\n    <ion-datetime\n      display-format="MMMM YY"\n      min="1989-06-04"\n      max="2004-08-23"\n      value="1994-12-15T13:47:20.789"\n    ></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label position="floating">MM/DD/YYYY</ion-label>\n    <ion-datetime\n      display-format="MM/DD/YYYY"\n      min="1994-03-14"\n      max="2012-12-09"\n      value="2002-09-23T15:03:46.789"\n    ></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label position="floating">MM/DD/YYYY</ion-label>\n    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n    <ion-datetime\n      value="1995-04-15"\n      min="1990-02"\n      max="2000"\n      :day-short-names="customDayShortNames"\n      display-format="DDD. MMM DD, YY"\n      month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"\n    ></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>D MMM YYYY H:mm</ion-label>\n    <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>DDDD MMM D, YYYY</ion-label>\n    <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>HH:mm</ion-label>\n    <ion-datetime display-format="HH:mm"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>h:mm a</ion-label>\n    <ion-datetime display-format="h:mm a"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>hh:mm A (15 min steps)</ion-label>\n    <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>Leap years, summer months</ion-label>\n    <ion-datetime\n      display-format="MM/YYYY"\n      picker-format="MMMM YYYY"\n      month-values="6,7,8"\n      :year-values="customYearValues"\n    ></ion-datetime>\n  </ion-item>\n\n  <ion-item>\n    <ion-label>Specific days/months/years</ion-label>\n    <ion-datetime\n      month-values="6,7,8"\n      year-values="2014,2015"\n      day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"\n      display-format="DD/MMM/YYYY"\n    ></ion-datetime>\n  </ion-item>\n</template>\n\n<script>\n  import { IonDatetime, IonItem, IonLabel } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime, IonItem, IonLabel },\n    setup() {\n      const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n      const customDayShortNames = [\'s\\u00f8n\', \'man\', \'tir\', \'ons\', \'tor\', \'fre\', \'l\\u00f8r\'];\n      const customPickerOptions = {\n        buttons: [\n          {\n            text: \'Save\',\n            handler: () => console.log(\'Clicked Save!\'),\n          },\n          {\n            text: \'Log\',\n            handler: () => {\n              console.log(\'Clicked Log. Do not Dismiss.\');\n              return false;\n            },\n          },\n        ],\n      };\n\n      return {\n        customYearValues,\n        customDayShortNames,\n        customPickerOptions,\n      };\n    },\n  });\n<\/script>\n')))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)(d,{mdxType:"Props"}),(0,l.kt)("h2",{id:"events"},"Events"),(0,l.kt)(u,{mdxType:"Events"}),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)(h,{mdxType:"Methods"}),(0,l.kt)("h2",{id:"css-shadow-parts"},"CSS Shadow Parts"),(0,l.kt)(b,{mdxType:"Parts"}),(0,l.kt)("h2",{id:"css-custom-properties"},"CSS Custom Properties"),(0,l.kt)(D,{mdxType:"CustomProps"}),(0,l.kt)("h2",{id:"slots"},"Slots"),(0,l.kt)(M,{mdxType:"Slots"}))}V.isMDXComponent=!0}}]);