"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([[9947],{19927:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>Ns,contentTitle:()=>Ts,default:()=>zs,frontMatter:()=>Is,metadata:()=>Ss,toc:()=>Es});var r=t(85893),s=t(11151);function o(e){const n={a:"a",code:"code",em:"em",h3:"h3",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"canceltext",children:"cancelText"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:"The text to display on the picker's cancel button."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"cancel-text"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'Cancel'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"cleartext",children:"clearText"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:'The text to display on the picker\'s "Clear" button.'})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear-text"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'Clear'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"color",children:"color"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The color to use from your application's color palette. Default options are: ",(0,r.jsx)(n.code,{children:'"primary"'}),", ",(0,r.jsx)(n.code,{children:'"secondary"'}),", ",(0,r.jsx)(n.code,{children:'"tertiary"'}),", ",(0,r.jsx)(n.code,{children:'"success"'}),", ",(0,r.jsx)(n.code,{children:'"warning"'}),", ",(0,r.jsx)(n.code,{children:'"danger"'}),", ",(0,r.jsx)(n.code,{children:'"light"'}),", ",(0,r.jsx)(n.code,{children:'"medium"'}),", and ",(0,r.jsx)(n.code,{children:'"dark"'}),". For more information on colors, see ",(0,r.jsx)(n.a,{href:"/docs/theming/basics",children:"theming"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"color"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:'"danger" \uff5c "dark" \uff5c "light" \uff5c "medium" \uff5c "primary" \uff5c "secondary" \uff5c "success" \uff5c "tertiary" \uff5c "warning" \uff5c string \uff5c undefined'})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'primary'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"dayvalues",children:"dayValues"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["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,r.jsx)(n.code,{children:"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,r.jsx)(n.code,{children:"31"})," in February, it will correctly not show days which are not valid for the selected month."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"day-values"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number \uff5c number[] \uff5c string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"disabled",children:"disabled"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the user cannot interact with the datetime."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"disabled"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"donetext",children:"doneText"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:'The text to display on the picker\'s "Done" button.'})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"done-text"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'Done'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"firstdayofweek",children:"firstDayOfWeek"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The first day of the week to use for ",(0,r.jsx)(n.code,{children:"ion-datetime"}),". The default value is ",(0,r.jsx)(n.code,{children:"0"})," and represents Sunday."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"first-day-of-week"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"0"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"formatoptions",children:"formatOptions"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options",children:"Intl.DateTimeFormatOptions"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined \uff5c { date: DateTimeFormatOptions; time?: DateTimeFormatOptions \uff5c undefined; } \uff5c { date?: DateTimeFormatOptions \uff5c undefined; time: DateTimeFormatOptions; }"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"highlighteddates",children:"highlightedDates"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Used to apply custom text and background colors to specific dates.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"Only applies to the ",(0,r.jsx)(n.code,{children:"date"}),", ",(0,r.jsx)(n.code,{children:"date-time"}),", and ",(0,r.jsx)(n.code,{children:"time-date"})," presentations, with ",(0,r.jsx)(n.code,{children:'preferWheel="false"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"((dateIsoString: string) => DatetimeHighlightStyle \uff5c undefined) \uff5c DatetimeHighlight[] \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"hourcycle",children:"hourCycle"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The hour cycle of the ",(0,r.jsx)(n.code,{children:"ion-datetime"}),". If no value is set, this is specified by the current locale."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hour-cycle"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:'"h11" \uff5c "h12" \uff5c "h23" \uff5c "h24" \uff5c undefined'})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"hourvalues",children:"hourValues"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Values used to create the list of selectable hours. By default the hour values range from ",(0,r.jsx)(n.code,{children:"0"})," to ",(0,r.jsx)(n.code,{children:"23"})," for 24-hour, or ",(0,r.jsx)(n.code,{children:"1"})," to ",(0,r.jsx)(n.code,{children:"12"})," for 12-hour. However, to control exactly which hours to display, the ",(0,r.jsx)(n.code,{children:"hourValues"})," input can take a number, an array of numbers, or a string of comma separated numbers."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hour-values"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number \uff5c number[] \uff5c string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"isdateenabled",children:"isDateEnabled"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Returns if an individual date (calendar day) is enabled or disabled.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"If ",(0,r.jsx)(n.code,{children:"true"}),", the day will be enabled/interactive. If ",(0,r.jsx)(n.code,{children:"false"}),", the day will be disabled/non-interactive.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"((dateIsoString: string) => boolean) \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"locale",children:"locale"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The locale to use for ",(0,r.jsx)(n.code,{children:"ion-datetime"}),". This impacts month and day name formatting. The ",(0,r.jsx)(n.code,{children:'"default"'})," value refers to the default locale set by your device."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"locale"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'default'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"max",children:"max"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The maximum datetime allowed. Value must be a date string following the ",(0,r.jsx)(n.a,{href:"https://www.w3.org/TR/NOTE-datetime",children:"ISO 8601 datetime format standard"}),", ",(0,r.jsx)(n.code,{children:"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,r.jsx)(n.code,{children:"1994"}),". Defaults to the end of this year."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"max"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"min",children:"min"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The minimum datetime allowed. Value must be a date string following the ",(0,r.jsx)(n.a,{href:"https://www.w3.org/TR/NOTE-datetime",children:"ISO 8601 datetime format standard"}),", such as ",(0,r.jsx)(n.code,{children:"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,r.jsx)(n.code,{children:"1994"}),". Defaults to the beginning of the year, 100 years ago from today."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"min"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"minutevalues",children:"minuteValues"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Values used to create the list of selectable minutes. By default the minutes range from ",(0,r.jsx)(n.code,{children:"0"})," to ",(0,r.jsx)(n.code,{children:"59"}),". However, to control exactly which minutes to display, the ",(0,r.jsx)(n.code,{children:"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,r.jsx)(n.code,{children:'minuteValues="0,15,30,45"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"minute-values"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number \uff5c number[] \uff5c string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"mode",children:"mode"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:"The mode determines which platform styles to use."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"mode"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:'"ios" \uff5c "md"'})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"monthvalues",children:"monthValues"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Values used to create the list of selectable months. By default the month values range from ",(0,r.jsx)(n.code,{children:"1"})," to ",(0,r.jsx)(n.code,{children:"12"}),". However, to control exactly which months to display, the ",(0,r.jsx)(n.code,{children:"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,r.jsx)(n.code,{children:'monthValues="6,7,8"'}),". Note that month numbers do ",(0,r.jsx)(n.em,{children:"not"})," have a zero-based index, meaning January's value is ",(0,r.jsx)(n.code,{children:"1"}),", and December's is ",(0,r.jsx)(n.code,{children:"12"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"month-values"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number \uff5c number[] \uff5c string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"multiple",children:"multiple"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", multiple dates can be selected at once. Only applies to ",(0,r.jsx)(n.code,{children:'presentation="date"'})," and ",(0,r.jsx)(n.code,{children:'preferWheel="false"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"multiple"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"name",children:"name"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:"The name of the control, which is submitted with the form data."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"name"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"this.inputId"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"preferwheel",children:"preferWheel"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", a wheel picker will be rendered instead of a calendar grid where possible. If ",(0,r.jsx)(n.code,{children:"false"}),", a calendar grid will be rendered instead of a wheel picker where possible.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"A wheel picker can be rendered instead of a grid when ",(0,r.jsx)(n.code,{children:"presentation"})," is one of the following values: ",(0,r.jsx)(n.code,{children:'"date"'}),", ",(0,r.jsx)(n.code,{children:'"date-time"'}),", or ",(0,r.jsx)(n.code,{children:'"time-date"'}),".",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"A wheel picker will always be rendered regardless of the ",(0,r.jsx)(n.code,{children:"preferWheel"})," value when ",(0,r.jsx)(n.code,{children:"presentation"})," is one of the following values: ",(0,r.jsx)(n.code,{children:'"time"'}),", ",(0,r.jsx)(n.code,{children:'"month"'}),", ",(0,r.jsx)(n.code,{children:'"month-year"'}),", or ",(0,r.jsx)(n.code,{children:'"year"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"prefer-wheel"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"presentation",children:"presentation"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Which values you want to select. ",(0,r.jsx)(n.code,{children:'"date"'})," will show a calendar picker to select the month, day, and year. ",(0,r.jsx)(n.code,{children:'"time"'})," will show a time picker to select the hour, minute, and (optionally) AM/PM. ",(0,r.jsx)(n.code,{children:'"date-time"'})," will show the date picker first and time picker second. ",(0,r.jsx)(n.code,{children:'"time-date"'})," will show the time picker first and date picker second."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"presentation"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:'"date" \uff5c "date-time" \uff5c "month" \uff5c "month-year" \uff5c "time" \uff5c "time-date" \uff5c "year"'})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'date-time'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"readonly",children:"readonly"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the datetime appears normal but the selected date cannot be changed."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"readonly"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"showclearbutton",children:"showClearButton"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),', a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the ',(0,r.jsx)(n.code,{children:"ion-datetime"})," component. Developers can also use the ",(0,r.jsx)(n.code,{children:"button"})," slot if they want to customize these buttons. If custom buttons are set in the ",(0,r.jsx)(n.code,{children:"button"})," slot then the default buttons will not be rendered."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"show-clear-button"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"showdefaultbuttons",children:"showDefaultButtons"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),', the default "Cancel" and "OK" buttons will be rendered at the bottom of the ',(0,r.jsx)(n.code,{children:"ion-datetime"})," component. Developers can also use the ",(0,r.jsx)(n.code,{children:"button"})," slot if they want to customize these buttons. If custom buttons are set in the ",(0,r.jsx)(n.code,{children:"button"})," slot then the default buttons will not be rendered."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"show-default-buttons"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"showdefaulttimelabel",children:"showDefaultTimeLabel"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),', the default "Time" label will be rendered for the time selector of the ',(0,r.jsx)(n.code,{children:"ion-datetime"})," component. Developers can also use the ",(0,r.jsx)(n.code,{children:"time-label"})," slot if they want to customize this label. If a custom label is set in the ",(0,r.jsx)(n.code,{children:"time-label"})," slot then the default label will not be rendered."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"show-default-time-label"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"showdefaulttitle",children:"showDefaultTitle"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", a header will be shown above the calendar picker. This will include both the slotted title, and the selected date."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"show-default-title"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"size",children:"size"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["If ",(0,r.jsx)(n.code,{children:"cover"}),", the ",(0,r.jsx)(n.code,{children:"ion-datetime"})," will expand to cover the full width of its container. If ",(0,r.jsx)(n.code,{children:"fixed"}),", the ",(0,r.jsx)(n.code,{children:"ion-datetime"})," will have a fixed width."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"size"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:'"cover" \uff5c "fixed"'})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'fixed'"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"titleselecteddatesformatter",children:"titleSelectedDatesFormatter"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:['A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".',(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"See ",(0,r.jsx)(n.a,{href:"https://ionicframework.com/docs/troubleshooting/runtime#accessing-this",children:"https://ionicframework.com/docs/troubleshooting/runtime#accessing-this"})," if you need to access ",(0,r.jsx)(n.code,{children:"this"})," from within the callback."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"((selectedDates: string[]) => string) \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"value",children:"value"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when ",(0,r.jsx)(n.code,{children:'multiple="true"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"value"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"null \uff5c string \uff5c string[] \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"yearvalues",children:"yearValues"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Values used to create the list of selectable years. By default the year values range between the ",(0,r.jsx)(n.code,{children:"min"})," and ",(0,r.jsx)(n.code,{children:"max"})," datetime inputs. However, to control exactly which years to display, the ",(0,r.jsx)(n.code,{children:"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,r.jsx)(n.code,{children:'yearValues="2008,2012,2016,2020,2024"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Attribute"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"year-values"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Type"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"number \uff5c number[] \uff5c string \uff5c undefined"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Default"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"undefined"})})]})]})]})]})}function i(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}function c(e){const n={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Description"}),(0,r.jsx)(n.th,{children:"Bubbles"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"ionBlur"})}),(0,r.jsx)(n.td,{children:"Emitted when the datetime loses focus."}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"ionCancel"})}),(0,r.jsx)(n.td,{children:"Emitted when the datetime selection was cancelled."}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"ionChange"})}),(0,r.jsxs)(n.td,{children:["Emitted when the value (selected date) has changed.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"This event will not emit when programmatically setting the ",(0,r.jsx)(n.code,{children:"value"})," property."]}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"ionFocus"})}),(0,r.jsx)(n.td,{children:"Emitted when the datetime has focus."}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})})]})]})]})}function a(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}function d(e){const n={code:"code",h3:"h3",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"cancel",children:"cancel"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:"Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Signature"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"cancel(closeOverlay?: boolean) => Promise<void>"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"confirm",children:"confirm"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsxs)(n.td,{children:["Confirms the selected datetime value, updates the ",(0,r.jsx)(n.code,{children:"value"})," property, and optionally closes the popover or modal that the datetime was presented in."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Signature"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"confirm(closeOverlay?: boolean) => Promise<void>"})})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"reset",children:"reset"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{}),(0,r.jsx)(n.th,{})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Description"})}),(0,r.jsx)(n.td,{children:"Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.strong,{children:"Signature"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"reset(startDate?: string) => Promise<void>"})})]})]})]})]})}function l(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}function h(e){const n={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"calendar-day"})}),(0,r.jsx)(n.td,{children:"The individual buttons that display a day inside of the datetime calendar."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"calendar-day active"})}),(0,r.jsx)(n.td,{children:"The currently selected calendar day."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"calendar-day disabled"})}),(0,r.jsx)(n.td,{children:"The calendar day that is disabled."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"calendar-day today"})}),(0,r.jsx)(n.td,{children:"The calendar day that contains the current day."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"month-year-button"})}),(0,r.jsx)(n.td,{children:"The button that opens the month/year picker when using a grid style layout."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"time-button"})}),(0,r.jsxs)(n.td,{children:["The button that opens the time picker when using a grid style layout with ",(0,r.jsx)(n.code,{children:'presentation="date-time"'})," or ",(0,r.jsx)(n.code,{children:'"time-date"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"time-button active"})}),(0,r.jsx)(n.td,{children:"The time picker button when the picker is open."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"wheel-item"})}),(0,r.jsx)(n.td,{children:"The individual items when using a wheel style layout, or in the month/year picker when using a grid style layout."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"wheel-item active"})}),(0,r.jsx)(n.td,{children:"The currently selected wheel-item."})]})]})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}var m=t(74866),p=t(85162);function x(e){const n={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(m.Z,{groupId:"mode",defaultValue:"ios",values:[{value:"ios",label:"iOS"},{value:"md",label:"MD"}],children:[(0,r.jsx)(p.Z,{value:"ios",children:(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--background"})}),(0,r.jsx)(n.td,{children:"The primary background of the datetime component."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--background-rgb"})}),(0,r.jsx)(n.td,{children:"The primary background of the datetime component in RGB format."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--title-color"})}),(0,r.jsx)(n.td,{children:"The text color of the title."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--wheel-fade-background-rgb"})}),(0,r.jsxs)(n.td,{children:["The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. ",(0,r.jsx)(n.code,{children:"255, 255, 255"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--wheel-highlight-background"})}),(0,r.jsx)(n.td,{children:"The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--wheel-highlight-border-radius"})}),(0,r.jsx)(n.td,{children:"The border radius of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."})]})]})]})}),(0,r.jsx)(p.Z,{value:"md",children:(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--background"})}),(0,r.jsx)(n.td,{children:"The primary background of the datetime component."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--background-rgb"})}),(0,r.jsx)(n.td,{children:"The primary background of the datetime component in RGB format."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--title-color"})}),(0,r.jsx)(n.td,{children:"The text color of the title."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--wheel-fade-background-rgb"})}),(0,r.jsxs)(n.td,{children:["The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. ",(0,r.jsx)(n.code,{children:"255, 255, 255"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--wheel-highlight-background"})}),(0,r.jsx)(n.td,{children:"The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"--wheel-highlight-border-radius"})}),(0,r.jsx)(n.td,{children:"The border radius of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."})]})]})]})})]})}function j(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(x,{...e})}):x(e)}function f(e){const n={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"buttons"})}),(0,r.jsx)(n.td,{children:"The buttons in the datetime."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"time-label"})}),(0,r.jsx)(n.td,{children:"The label for the time selector in the datetime."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"title"})}),(0,r.jsx)(n.td,{children:"The title of the datetime."})]})]})]})}function g(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}var b=t(82238);function v(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime></ion-datetime>\n"})})}function y(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(v,{...e})}):v(e)}function w(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime></IonDatetime>;\n}\nexport default Example;\n"})})}function D(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(w,{...e})}):w(e)}function C(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function k(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(C,{...e})}):C(e)}function I(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime></ion-datetime>\n"})})}function T(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(I,{...e})}):I(e)}function S(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:y,react:D,vue:k,angular:T},src:"usage/v8/datetime/basic/demo.html"})}function N(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(S,{...e})}):S()}function E(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>\n'})})}function _(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(E,{...e})}):E(e)}function z(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:'import React from \'react\';\nimport { IonDatetime } from \'@ionic/react\';\nfunction Example() {\n  return <IonDatetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></IonDatetime>;\n}\nexport default Example;\n'})})}function O(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(z,{...e})}):z(e)}function A(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n'})})}function M(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(A,{...e})}):A(e)}function B(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>\n'})})}function Z(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(B,{...e})}):B(e)}function R(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:_,react:O,vue:M,angular:Z},src:"usage/v8/datetime/date-constraints/max-min/demo.html"})}function V(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(R,{...e})}):R()}function P(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>\n'})})}function L(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(P,{...e})}):P(e)}function W(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime minuteValues=\"0,15,30,45\" dayValues=\"5,10,15,20,25,30\"></IonDatetime>;\n}\nexport default Example;\n"})})}function H(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(W,{...e})}):W(e)}function F(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n'})})}function U(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(F,{...e})}):F(e)}function Y(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>\n'})})}function $(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Y,{...e})}):Y(e)}function G(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:L,react:H,vue:U,angular:$},src:"usage/v8/datetime/date-constraints/values/demo.html"})}function q(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(G,{...e})}):G()}function J(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime></ion-datetime>\n\n<script>\n  const datetime = document.querySelector('ion-datetime');\n  datetime.isDateEnabled = (dateString) => {\n    const date = new Date(dateString);\n    const utcDay = date.getUTCDay();\n\n    /**\n     * Date will be enabled if it is not\n     * Sunday or Saturday\n     */\n    return utcDay !== 0 && utcDay !== 6;\n  };\n<\/script>\n"})})}function K(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(J,{...e})}):J(e)}function X(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  const isWeekday = (dateString: string) => {\n    const date = new Date(dateString);\n    const utcDay = date.getUTCDay();\n\n    /**\n     * Date will be enabled if it is not\n     * Sunday or Saturday\n     */\n    return utcDay !== 0 && utcDay !== 6;\n  };\n\n  return <IonDatetime isDateEnabled={isWeekday}></IonDatetime>;\n}\nexport default Example;\n"})})}function Q(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(X,{...e})}):X(e)}function ee(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime :is-date-enabled=\"isWeekday\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n    setup() {\n      const isWeekday = (dateString: string) => {\n        const date = new Date(dateString);\n        const utcDay = date.getUTCDay();\n\n        /**\n         * Date will be enabled if it is not\n         * Sunday or Saturday\n         */\n        return utcDay !== 0 && utcDay !== 6;\n      };\n\n      return { isWeekday };\n    },\n  });\n<\/script>\n"})})}function ne(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ee,{...e})}):ee(e)}function te(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime [isDateEnabled]="isWeekday"></ion-datetime>\n'})})}function re(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(te,{...e})}):te(e)}function se(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n})\nexport class ExampleComponent {\n  isWeekday = (dateString: string) => {\n    const date = new Date(dateString);\n    const utcDay = date.getUTCDay();\n\n    /**\n     * Date will be enabled if it is not\n     * Sunday or Saturday\n     */\n    return utcDay !== 0 && utcDay !== 6;\n  };\n}\n"})})}function oe(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(se,{...e})}):se(e)}function ie(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:K,react:Q,vue:ne,angular:{files:{"src/app/example.component.html":re,"src/app/example.component.ts":oe}}},src:"usage/v8/datetime/date-constraints/advanced/demo.html"})}function ce(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ie,{...e})}):ie()}function ae(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime value=\"2023-11-02T01:22:00\">\n  <span slot=\"title\">Select Date</span>\n</ion-datetime>\n\n<script>\n  const datetime = document.querySelector('ion-datetime');\n  datetime.formatOptions = {\n    time: { hour: '2-digit', minute: '2-digit' },\n    date: { day: '2-digit', month: 'long' },\n  };\n<\/script>\n"})})}function de(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ae,{...e})}):ae(e)}function le(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\n\nfunction Example() {\n  return (\n    <IonDatetime\n      value=\"2023-11-02T01:22:00\"\n      formatOptions={{\n        time: { hour: '2-digit', minute: '2-digit' },\n        date: { day: '2-digit', month: 'long' },\n      }}\n    >\n      <span slot=\"title\">Select Date</span>\n    </IonDatetime>\n  );\n}\nexport default Example;\n"})})}function he(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(le,{...e})}):le(e)}function ue(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime value=\"2023-11-02T01:22:00\" :format-options=\"formatOptions\">\n    <span slot=\"title\">Select Date</span>\n  </ion-datetime>\n</template>\n\n<script lang=\"ts\" setup>\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  const formatOptions = {\n    time: { hour: '2-digit', minute: '2-digit' },\n    date: { day: '2-digit', month: 'long' },\n  };\n<\/script>\n"})})}function me(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ue,{...e})}):ue(e)}function pe(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime\n  value=\"2023-11-02T01:22:00\"\n  [formatOptions]=\"{\n      time: { hour: '2-digit', minute: '2-digit' },\n      date: { day: '2-digit', month: 'long' },\n    }\"\n>\n  <span slot=\"title\">Select Date</span>\n</ion-datetime>\n"})})}function xe(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(pe,{...e})}):pe(e)}function je(e){return(0,r.jsx)(b.Z,{version:"8",size:"large",code:{javascript:de,react:he,vue:me,angular:xe},src:"usage/v8/datetime/format-options/demo.html"})}function fe(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(je,{...e})}):je()}function ge(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="es-ES"></ion-datetime>\n'})})}function be(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ge,{...e})}):ge(e)}function ve(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime locale=\"es-ES\"></IonDatetime>;\n}\nexport default Example;\n"})})}function ye(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ve,{...e})}):ve(e)}function we(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime locale=\"es-ES\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function De(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(we,{...e})}):we(e)}function Ce(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="es-ES"></ion-datetime>\n'})})}function ke(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ce,{...e})}):Ce(e)}function Ie(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:be,react:ye,vue:De,angular:ke},src:"usage/v8/datetime/localization/custom-locale/demo.html"})}function Te(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ie,{...e})}):Ie()}function Se(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>\n'})})}function Ne(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Se,{...e})}):Se(e)}function Ee(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime locale=\"en-GB\" hourCycle=\"h12\"></IonDatetime>;\n}\nexport default Example;\n"})})}function _e(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ee,{...e})}):Ee(e)}function ze(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n'})})}function Oe(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ze,{...e})}):ze(e)}function Ae(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>\n'})})}function Me(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ae,{...e})}):Ae(e)}function Be(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:Ne,react:_e,vue:Oe,angular:Me},src:"usage/v8/datetime/localization/hour-cycle/demo.html"})}function Ze(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Be,{...e})}):Be()}function Re(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime first-day-of-week="1"></ion-datetime>\n'})})}function Ve(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Re,{...e})}):Re(e)}function Pe(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime firstDayOfWeek={1}></IonDatetime>;\n}\nexport default Example;\n"})})}function Le(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Pe,{...e})}):Pe(e)}function We(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime :first-day-of-week=\"1\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function He(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(We,{...e})}):We(e)}function Fe(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime [firstDayOfWeek]="1"></ion-datetime>\n'})})}function Ue(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Fe,{...e})}):Fe(e)}function Ye(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:Ve,react:Le,vue:He,angular:Ue},src:"usage/v8/datetime/localization/first-day-of-week/demo.html"})}function $e(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ye,{...e})}):Ye()}function Ge(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>\n'})})}function qe(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ge,{...e})}):Ge(e)}function Je(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime locale=\"en-GB-u-hc-h12\"></IonDatetime>;\n}\nexport default Example;\n"})})}function Ke(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Je,{...e})}):Je(e)}function Xe(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime locale=\"en-GB-u-hc-h12\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function Qe(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Xe,{...e})}):Xe(e)}function en(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>\n'})})}function nn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(en,{...e})}):en(e)}function tn(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:qe,react:Ke,vue:Qe,angular:nn},src:"usage/v8/datetime/localization/locale-extension-tags/demo.html"})}function rn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(tn,{...e})}):tn()}function sn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="es-ES">\n  <span slot="time-label">Tiempo</span>\n</ion-datetime>\n'})})}function on(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(sn,{...e})}):sn(e)}function cn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return (\n    <IonDatetime locale=\"es-ES\">\n      <span slot=\"time-label\">Tiempo</span>\n    </IonDatetime>\n  );\n}\nexport default Example;\n"})})}function an(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(cn,{...e})}):cn(e)}function dn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime locale="es-ES">\n    <span slot="time-label">Tiempo</span>\n  </ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n'})})}function ln(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(dn,{...e})}):dn(e)}function hn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime locale="es-ES">\n  <span slot="time-label">Tiempo</span>\n</ion-datetime>\n'})})}function un(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(hn,{...e})}):hn(e)}function mn(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:on,react:an,vue:ln,angular:un},src:"usage/v8/datetime/localization/time-label/demo.html"})}function pn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(mn,{...e})}):mn()}function xn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="month-year"></ion-datetime>\n'})})}function jn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(xn,{...e})}):xn(e)}function fn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime presentation=\"month-year\"></IonDatetime>;\n}\nexport default Example;\n"})})}function gn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(fn,{...e})}):fn(e)}function bn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"month-year\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function vn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(bn,{...e})}):bn(e)}function yn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="month-year"></ion-datetime>\n'})})}function wn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(yn,{...e})}):yn(e)}function Dn(e){return(0,r.jsx)(b.Z,{version:"8",size:"240px",code:{javascript:jn,react:gn,vue:vn,angular:wn},src:"usage/v8/datetime/presentation/month-and-year/demo.html"})}function Cn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Dn,{...e})}):Dn()}function kn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="time"></ion-datetime>\n'})})}function In(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(kn,{...e})}):kn(e)}function Tn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime presentation=\"time\"></IonDatetime>;\n}\nexport default Example;\n"})})}function Sn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Tn,{...e})}):Tn(e)}function Nn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"time\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function En(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Nn,{...e})}):Nn(e)}function _n(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="time"></ion-datetime>\n'})})}function zn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(_n,{...e})}):_n(e)}function On(e){return(0,r.jsx)(b.Z,{version:"8",code:{javascript:In,react:Sn,vue:En,angular:zn},src:"usage/v8/datetime/presentation/time/demo.html"})}function An(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(On,{...e})}):On()}function Mn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date"></ion-datetime>\n'})})}function Bn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Mn,{...e})}):Mn(e)}function Zn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime presentation=\"date\"></IonDatetime>;\n}\nexport default Example;\n"})})}function Rn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Zn,{...e})}):Zn(e)}function Vn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"date\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function Pn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Vn,{...e})}):Vn(e)}function Ln(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date"></ion-datetime>\n'})})}function Wn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ln,{...e})}):Ln(e)}function Hn(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:Bn,react:Rn,vue:Pn,angular:Wn},src:"usage/v8/datetime/presentation/date/demo.html"})}function Fn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Hn,{...e})}):Hn()}function Un(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime show-default-title="true"></ion-datetime>\n'})})}function Yn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Un,{...e})}):Un(e)}function $n(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime showDefaultTitle={true}></IonDatetime>;\n}\nexport default Example;\n"})})}function Gn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)($n,{...e})}):$n(e)}function qn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime :show-default-title=\"true\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function Jn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(qn,{...e})}):qn(e)}function Kn(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime [showDefaultTitle]="true"></ion-datetime>\n'})})}function Xn(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Kn,{...e})}):Kn(e)}function Qn(e){return(0,r.jsx)(b.Z,{version:"8",size:"large",code:{javascript:Yn,react:Gn,vue:Jn,angular:Xn},src:"usage/v8/datetime/title/showing-default-title/demo.html"})}function et(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Qn,{...e})}):Qn()}function nt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime>\n  <span slot="title">Select a Reservation Date</span>\n</ion-datetime>\n'})})}function tt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(nt,{...e})}):nt(e)}function rt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return (\n    <IonDatetime>\n      <span slot=\"title\">Select a Reservation Date</span>\n    </IonDatetime>\n  );\n}\nexport default Example;\n"})})}function st(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(rt,{...e})}):rt(e)}function ot(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime>\n    <span slot=\"title\">Select a Reservation Date</span>\n  </ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function it(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ot,{...e})}):ot(e)}function ct(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime>\n  <span slot="title">Select a Reservation Date</span>\n</ion-datetime>\n'})})}function at(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ct,{...e})}):ct(e)}function dt(e){return(0,r.jsx)(b.Z,{version:"8",size:"large",code:{javascript:tt,react:st,vue:it,angular:at},src:"usage/v8/datetime/title/customizing-title/demo.html"})}function lt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(dt,{...e})}):dt()}function ht(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime show-default-buttons="true"></ion-datetime>\n'})})}function ut(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ht,{...e})}):ht(e)}function mt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime showDefaultButtons={true}></IonDatetime>;\n}\nexport default Example;\n"})})}function pt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(mt,{...e})}):mt(e)}function xt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime :show-default-buttons=\"true\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function jt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(xt,{...e})}):xt(e)}function ft(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime [showDefaultButtons]="true"></ion-datetime>\n'})})}function gt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ft,{...e})}):ft(e)}function bt(e){return(0,r.jsx)(b.Z,{version:"8",size:"500px",code:{javascript:ut,react:pt,vue:jt,angular:gt},src:"usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html"})}function vt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(bt,{...e})}):bt()}function yt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime>\n  <ion-buttons slot="buttons">\n    <ion-button color="danger" onclick="datetime.reset()">Reset</ion-button>\n    <ion-button color="primary" onclick="datetime.cancel()">Never mind</ion-button>\n    <ion-button color="primary" onclick="datetime.confirm()">All Set</ion-button>\n  </ion-buttons>\n</ion-datetime>\n\n<script>\n  var datetime = document.querySelector(\'ion-datetime\');\n<\/script>\n'})})}function wt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(yt,{...e})}):yt(e)}function Dt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:'import React, { useRef } from \'react\';\nimport { IonButtons, IonButton, IonDatetime } from \'@ionic/react\';\nfunction Example() {\n  const datetime = useRef<null | HTMLIonDatetimeElement>(null);\n  const reset = () => {\n    datetime.current?.reset();\n  };\n  const cancel = () => {\n    datetime.current?.cancel();\n  };\n  const confirm = () => {\n    datetime.current?.confirm();\n  };\n  return (\n    <IonDatetime ref={datetime}>\n      <IonButtons slot="buttons">\n        <IonButton color="danger" onClick={reset}>\n          Reset\n        </IonButton>\n        <IonButton color="primary" onClick={cancel}>\n          Never mind\n        </IonButton>\n        <IonButton color="primary" onClick={confirm}>\n          All Set\n        </IonButton>\n      </IonButtons>\n    </IonDatetime>\n  );\n}\nexport default Example;\n'})})}function Ct(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Dt,{...e})}):Dt(e)}function kt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime ref="datetime">\n    <ion-buttons slot="buttons">\n      <ion-button color="danger" @click="reset()">Reset</ion-button>\n      <ion-button color="primary" @click="cancel()">Never mind</ion-button>\n      <ion-button color="primary" @click="confirm()">All Set</ion-button>\n    </ion-buttons>\n  </ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonButtons, IonButton, IonDatetime } from \'@ionic/vue\';\n  import { defineComponent, ref } from \'vue\';\n\n  export default defineComponent({\n    components: { IonButtons, IonButton, IonDatetime },\n    setup() {\n      const datetime = ref();\n      const reset = () => datetime.value.$el.reset();\n      const cancel = () => datetime.value.$el.cancel();\n      const confirm = () => datetime.value.$el.confirm();\n      return { datetime, reset, cancel, confirm };\n    },\n  });\n<\/script>\n'})})}function It(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(kt,{...e})}):kt(e)}function Tt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime #datetime>\n  <ion-buttons slot="buttons">\n    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>\n    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>\n    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>\n  </ion-buttons>\n</ion-datetime>\n'})})}function St(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Tt,{...e})}):Tt(e)}function Nt(e){return(0,r.jsx)(b.Z,{version:"8",size:"500px",code:{javascript:wt,react:Ct,vue:It,angular:St},src:"usage/v8/datetime/buttons/customizing-buttons/demo.html"})}function Et(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Nt,{...e})}):Nt()}function _t(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>\n'})})}function zt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(_t,{...e})}):_t(e)}function Ot(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React, { useRef } from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime showDefaultButtons={true} doneText=\"All set\" cancelText=\"Never mind\"></IonDatetime>;\n}\nexport default Example;\n"})})}function At(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ot,{...e})}):Ot(e)}function Mt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime :show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n'})})}function Bt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Mt,{...e})}):Mt(e)}function Zt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>\n'})})}function Rt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Zt,{...e})}):Zt(e)}function Vt(e){return(0,r.jsx)(b.Z,{version:"8",size:"500px",code:{javascript:zt,react:At,vue:Bt,angular:Rt},src:"usage/v8/datetime/buttons/customizing-button-texts/demo.html"})}function Pt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Vt,{...e})}):Vt()}function Lt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime presentation=\"date\" value=\"2023-01-01\"></ion-datetime>\n\n<script>\n  var datetime = document.querySelector('ion-datetime');\n  datetime.highlightedDates = [\n    {\n      date: '2023-01-05',\n      textColor: '#800080',\n      backgroundColor: '#ffc0cb',\n    },\n    {\n      date: '2023-01-10',\n      textColor: '#09721b',\n      backgroundColor: '#c8e5d0',\n    },\n    {\n      date: '2023-01-20',\n      textColor: 'var(--ion-color-secondary-contrast)',\n      backgroundColor: 'var(--ion-color-secondary)',\n    },\n    {\n      date: '2023-01-23',\n      textColor: 'rgb(68, 10, 184)',\n      backgroundColor: 'rgb(211, 200, 229)',\n    },\n  ];\n<\/script>\n"})})}function Wt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Lt,{...e})}):Lt(e)}function Ht(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return (\n    <IonDatetime\n      presentation=\"date\"\n      value=\"2023-01-01\"\n      highlightedDates={[\n        {\n          date: '2023-01-05',\n          textColor: '#800080',\n          backgroundColor: '#ffc0cb',\n        },\n        {\n          date: '2023-01-10',\n          textColor: '#09721b',\n          backgroundColor: '#c8e5d0',\n        },\n        {\n          date: '2023-01-20',\n          textColor: 'var(--ion-color-secondary-contrast)',\n          backgroundColor: 'var(--ion-color-secondary)',\n        },\n        {\n          date: '2023-01-23',\n          textColor: 'rgb(68, 10, 184)',\n          backgroundColor: 'rgb(211, 200, 229)',\n        },\n      ]}\n    ></IonDatetime>\n  );\n}\nexport default Example;\n"})})}function Ft(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ht,{...e})}):Ht(e)}function Ut(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"date\" value=\"2023-01-01\" :highlighted-dates=\"highlightedDates\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n    setup() {\n      const highlightedDates = [\n        {\n          date: '2023-01-05',\n          textColor: '#800080',\n          backgroundColor: '#ffc0cb',\n        },\n        {\n          date: '2023-01-10',\n          textColor: '#09721b',\n          backgroundColor: '#c8e5d0',\n        },\n        {\n          date: '2023-01-20',\n          textColor: 'var(--ion-color-secondary-contrast)',\n          backgroundColor: 'var(--ion-color-secondary)',\n        },\n        {\n          date: '2023-01-23',\n          textColor: 'rgb(68, 10, 184)',\n          backgroundColor: 'rgb(211, 200, 229)',\n        },\n      ];\n\n      return { highlightedDates };\n    },\n  });\n<\/script>\n"})})}function Yt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ut,{...e})}):Ut(e)}function $t(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date" value="2023-01-01" [highlightedDates]="highlightedDates"></ion-datetime>\n'})})}function Gt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)($t,{...e})}):$t(e)}function qt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n})\nexport class ExampleComponent {\n  highlightedDates = [\n    {\n      date: '2023-01-05',\n      textColor: '#800080',\n      backgroundColor: '#ffc0cb',\n    },\n    {\n      date: '2023-01-10',\n      textColor: '#09721b',\n      backgroundColor: '#c8e5d0',\n    },\n    {\n      date: '2023-01-20',\n      textColor: 'var(--ion-color-secondary-contrast)',\n      backgroundColor: 'var(--ion-color-secondary)',\n    },\n    {\n      date: '2023-01-23',\n      textColor: 'rgb(68, 10, 184)',\n      backgroundColor: 'rgb(211, 200, 229)',\n    },\n  ];\n}\n"})})}function Jt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(qt,{...e})}):qt(e)}function Kt(e){return(0,r.jsx)(b.Z,{size:"medium",version:"8",code:{javascript:Wt,react:Ft,vue:Yt,angular:{files:{"src/app/example.component.html":Gt,"src/app/example.component.ts":Jt}}},src:"usage/v8/datetime/highlightedDates/array/demo.html"})}function Xt(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Kt,{...e})}):Kt()}function Qt(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime presentation=\"date\"></ion-datetime>\n\n<script>\n  var datetime = document.querySelector('ion-datetime');\n  datetime.highlightedDates = (isoString) => {\n    const date = new Date(isoString);\n    const utcDay = date.getUTCDate();\n\n    if (utcDay % 5 === 0) {\n      return {\n        textColor: '#800080',\n        backgroundColor: '#ffc0cb',\n      };\n    }\n\n    if (utcDay % 3 === 0) {\n      return {\n        textColor: 'var(--ion-color-secondary-contrast)',\n        backgroundColor: 'var(--ion-color-secondary)',\n      };\n    }\n\n    return undefined;\n  };\n<\/script>\n"})})}function er(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Qt,{...e})}):Qt(e)}function nr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return (\n    <IonDatetime\n      presentation=\"date\"\n      highlightedDates={(isoString) => {\n        const date = new Date(isoString);\n        const utcDay = date.getUTCDate();\n\n        if (utcDay % 5 === 0) {\n          return {\n            textColor: '#800080',\n            backgroundColor: '#ffc0cb',\n          };\n        }\n\n        if (utcDay % 3 === 0) {\n          return {\n            textColor: 'var(--ion-color-secondary-contrast)',\n            backgroundColor: 'var(--ion-color-secondary)',\n          };\n        }\n\n        return undefined;\n      }}\n    ></IonDatetime>\n  );\n}\nexport default Example;\n"})})}function tr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(nr,{...e})}):nr(e)}function rr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"date\" :highlighted-dates=\"highlightedDates\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n    setup() {\n      const highlightedDates = (isoString) => {\n        const date = new Date(isoString);\n        const utcDay = date.getUTCDate();\n\n        if (utcDay % 5 === 0) {\n          return {\n            textColor: '#800080',\n            backgroundColor: '#ffc0cb',\n          };\n        }\n\n        if (utcDay % 3 === 0) {\n          return {\n            textColor: 'var(--ion-color-secondary-contrast)',\n            backgroundColor: 'var(--ion-color-secondary)',\n          };\n        }\n\n        return undefined;\n      };\n\n      return { highlightedDates };\n    },\n  });\n<\/script>\n"})})}function sr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(rr,{...e})}):rr(e)}function or(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>\n'})})}function ir(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(or,{...e})}):or(e)}function cr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n})\nexport class ExampleComponent {\n  highlightedDates = (isoString) => {\n    const date = new Date(isoString);\n    const utcDay = date.getUTCDate();\n\n    if (utcDay % 5 === 0) {\n      return {\n        textColor: '#800080',\n        backgroundColor: '#ffc0cb',\n      };\n    }\n\n    if (utcDay % 3 === 0) {\n      return {\n        textColor: 'var(--ion-color-secondary-contrast)',\n        backgroundColor: 'var(--ion-color-secondary)',\n      };\n    }\n\n    return undefined;\n  };\n}\n"})})}function ar(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(cr,{...e})}):cr(e)}function dr(e){return(0,r.jsx)(b.Z,{size:"medium",version:"8",code:{javascript:er,react:tr,vue:sr,angular:{files:{"src/app/example.component.html":ir,"src/app/example.component.ts":ar}}},src:"usage/v8/datetime/highlightedDates/callback/demo.html"})}function lr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(dr,{...e})}):dr()}function hr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime presentation=\"date\" multiple=\"true\"></ion-datetime>\n\n<script>\n  const datetime = document.querySelector('ion-datetime');\n  datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];\n<\/script>\n"})})}function ur(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(hr,{...e})}):hr(e)}function mr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React, { useRef, useEffect } from 'react';\nimport { IonDatetime } from '@ionic/react';\n\nfunction Example() {\n  const datetime = useRef<null | HTMLIonDatetimeElement>(null);\n\n  useEffect(() => {\n    if (!datetime.current) return;\n    datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];\n  }, []);\n\n  return <IonDatetime ref={datetime} presentation=\"date\" multiple={true}></IonDatetime>;\n}\nexport default Example;\n"})})}function pr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(mr,{...e})}):mr(e)}function xr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"date\" :multiple=\"true\" :value=\"['2022-06-03', '2022-06-13', '2022-06-29']\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n"})})}function jr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(xr,{...e})}):xr(e)}function fr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime presentation=\"date\" [multiple]=\"true\" [value]=\"['2022-06-03', '2022-06-13', '2022-06-29']\"></ion-datetime>\n"})})}function gr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(fr,{...e})}):fr(e)}function br(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:ur,react:pr,vue:jr,angular:gr},src:"usage/v8/datetime/multiple/demo.html"})}function vr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(br,{...e})}):br()}function yr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime color="rose"></ion-datetime>\n\n<style>\n  ion-datetime {\n    --background: #fff1f2;\n    --background-rgb: 255, 241, 242;\n\n    border-radius: 16px;\n    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;\n  }\n</style>\n'})})}function wr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(yr,{...e})}):yr(e)}function Dr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\n\nimport './main.css';\n\nfunction Example() {\n  return <IonDatetime color=\"rose\"></IonDatetime>;\n}\nexport default Example;\n"})})}function Cr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Dr,{...e})}):Dr(e)}function kr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"ion-datetime {\n  --background: #fff1f2;\n  --background-rgb: 255, 241, 242;\n\n  border-radius: 16px;\n  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;\n}\n"})})}function Ir(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(kr,{...e})}):kr(e)}function Tr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime color=\"rose\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n\n<style>\n  ion-datetime {\n    --background: #fff1f2;\n    --background-rgb: 255, 241, 242;\n\n    border-radius: 16px;\n    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;\n  }\n</style>\n"})})}function Sr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Tr,{...e})}):Tr(e)}function Nr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime color="rose"></ion-datetime>\n'})})}function Er(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Nr,{...e})}):Nr(e)}function _r(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"ion-datetime {\n  --background: #fff1f2;\n  --background-rgb: 255, 241, 242;\n\n  border-radius: 16px;\n  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;\n}\n"})})}function zr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(_r,{...e})}):_r(e)}function Or(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* Ionic Variables and Theming\n * ---------------------------------------------------------------\n * Any overrides to theme variables should be placed in this file.\n * For more information, please see:\n * http://ionicframework.com/docs/theming/\n */\n\n/* This sets the CSS variables for the rose color */\n:root {\n  --ion-color-rose: #831843;\n  --ion-color-rose-rgb: 131, 24, 67;\n  --ion-color-rose-contrast: #ffffff;\n  --ion-color-rose-contrast-rgb: 255, 255, 255;\n  --ion-color-rose-shade: #73153b;\n  --ion-color-rose-tint: #8f2f56;\n}\n\n/* This overrides the global CSS variables for both modes */\n:root.ios,\n:root.md {\n  --ion-background-color: #ffffff;\n  --ion-background-color-rgb: 255, 255, 255;\n\n  --ion-text-color: #881337;\n  --ion-text-color-rgb: 136, 19, 55;\n\n  --ion-text-color-step-50: #8e1e40;\n  --ion-text-color-step-100: #94294a;\n  --ion-text-color-step-150: #9a3453;\n  --ion-text-color-step-200: #a03f5c;\n  --ion-text-color-step-250: #a64b66;\n  --ion-text-color-step-300: #ac566f;\n  --ion-text-color-step-350: #b26178;\n  --ion-text-color-step-400: #b86c82;\n  --ion-text-color-step-450: #be778b;\n  --ion-text-color-step-500: #c48295;\n  --ion-text-color-step-550: #c98d9e;\n  --ion-text-color-step-600: #cf98a7;\n  --ion-text-color-step-650: #d5a3b1;\n  --ion-text-color-step-700: #dbaeba;\n  --ion-text-color-step-750: #e1bac3;\n  --ion-text-color-step-800: #e7c5cd;\n  --ion-text-color-step-850: #edd0d6;\n  --ion-text-color-step-900: #f3dbdf;\n  --ion-text-color-step-950: #f9e6e9;\n\n  --ion-background-color-step-50: #f9e6e9;\n  --ion-background-color-step-100: #f3dbdf;\n  --ion-background-color-step-150: #edd0d6;\n  --ion-background-color-step-200: #e7c5cd;\n  --ion-background-color-step-250: #e1bac3;\n  --ion-background-color-step-300: #dbaeba;\n  --ion-background-color-step-350: #d5a3b1;\n  --ion-background-color-step-400: #cf98a7;\n  --ion-background-color-step-450: #c98d9e;\n  --ion-background-color-step-500: #c48295;\n  --ion-background-color-step-550: #be778b;\n  --ion-background-color-step-600: #b86c82;\n  --ion-background-color-step-650: #b26178;\n  --ion-background-color-step-700: #ac566f;\n  --ion-background-color-step-750: #a64b66;\n  --ion-background-color-step-800: #a03f5c;\n  --ion-background-color-step-850: #9a3453;\n  --ion-background-color-step-900: #94294a;\n  --ion-background-color-step-950: #8e1e40;\n}\n\n/* This adds the rose color */\n.ion-color-rose {\n  --ion-color-base: var(--ion-color-rose);\n  --ion-color-base-rgb: var(--ion-color-rose-rgb);\n  --ion-color-contrast: var(--ion-color-rose-contrast);\n  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);\n  --ion-color-shade: var(--ion-color-rose-shade);\n  --ion-color-tint: var(--ion-color-rose-tint);\n}\n"})})}function Ar(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Or,{...e})}):Or(e)}function Mr(e){return(0,r.jsx)(b.Z,{version:"8",size:"450px",code:{javascript:{files:{"index.html":wr,"theme/variables.css":Ar}},react:{files:{"src/main.tsx":Cr,"src/main.css":Ir,"src/theme/variables.css":Ar}},vue:{files:{"src/components/Example.vue":Sr,"src/theme/variables.css":Ar}},angular:{files:{"src/app/example.component.html":Er,"src/app/example.component.css":zr,"src/theme/variables.css":Ar}}},src:"usage/v8/datetime/styling/global-theming/demo.html"})}function Br(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Mr,{...e})}):Mr()}function Zr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<ion-datetime presentation=\"date\"></ion-datetime>\n\n<script>\n  const datetime = document.querySelector('ion-datetime');\n\n  const date = new Date();\n\n  // Set the value of the datetime to 2 days\n  // before the current day\n  let dayChange = -2;\n\n  // If the day we are going to set the value to\n  // is in the previous month then set the day 2 days\n  // later instead so it remains in the same month\n  if (date.getDate() + dayChange <= 0) {\n    dayChange = -dayChange;\n  }\n\n  // Set the value of the datetime to the day\n  // calculated above\n  date.setDate(date.getDate() + dayChange);\n  datetime.value = date.toISOString();\n<\/script>\n\n<style>\n  /*\n  * Custom Datetime Day Parts\n  * -------------------------------------------\n  */\n\n  ion-datetime::part(calendar-day) {\n    color: #da5296;\n  }\n\n  ion-datetime::part(calendar-day today) {\n    color: #8462d1;\n  }\n\n  ion-datetime::part(calendar-day):focus {\n    background-color: rgb(154 209 98 / 0.2);\n    box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);\n  }\n\n  /*\n  * Custom Material Design Datetime Day Parts\n  * -------------------------------------------\n  */\n\n  ion-datetime.md::part(calendar-day active),\n  ion-datetime.md::part(calendar-day active):focus {\n    background-color: #9ad162;\n    border-color: #9ad162;\n    color: #fff;\n  }\n\n  ion-datetime.md::part(calendar-day today) {\n    border-color: #8462d1;\n  }\n\n  /*\n  * Custom iOS Datetime Day Parts\n  * -------------------------------------------\n  */\n\n  ion-datetime.ios::part(calendar-day active),\n  ion-datetime.ios::part(calendar-day active):focus {\n    background-color: rgb(154 209 98 / 0.2);\n    color: #9ad162;\n  }\n</style>\n"})})}function Rr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Zr,{...e})}):Zr(e)}function Vr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React, { useEffect, useState } from 'react';\nimport { IonDatetime } from '@ionic/react';\n\nimport './main.css';\n\nfunction Example() {\n  const [datetime, setDatetime] = useState<string | null>(null);\n\n  useEffect(() => {\n    const date = new Date();\n\n    // Set the value of the datetime to 2 days\n    // before the current day\n    let dayChange = -2;\n\n    // If the day we are going to set the value to\n    // is in the previous month then set the day 2 days\n    // later instead so it remains in the same month\n    if (date.getDate() + dayChange <= 0) {\n      dayChange = -dayChange;\n    }\n\n    // Set the value of the datetime to the day\n    // calculated above\n    date.setDate(date.getDate() + dayChange);\n    setDatetime(date.toISOString());\n  }, []);\n\n  return <IonDatetime presentation=\"date\" value={datetime}></IonDatetime>;\n}\nexport default Example;\n"})})}function Pr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Vr,{...e})}):Vr(e)}function Lr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/*\n* Custom Datetime Day Parts\n* -------------------------------------------\n*/\n\nion-datetime::part(calendar-day) {\n  color: #da5296;\n}\n\nion-datetime::part(calendar-day today) {\n  color: #8462d1;\n}\n\nion-datetime::part(calendar-day):focus {\n  background-color: rgb(154 209 98 / 0.2);\n  box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);\n}\n\n/*\n* Custom Material Design Datetime Day Parts\n* -------------------------------------------\n*/\n\nion-datetime.md::part(calendar-day active),\nion-datetime.md::part(calendar-day active):focus {\n  background-color: #9ad162;\n  border-color: #9ad162;\n  color: #fff;\n}\n\nion-datetime.md::part(calendar-day today) {\n  border-color: #8462d1;\n}\n\n/*\n* Custom iOS Datetime Day Parts\n* -------------------------------------------\n*/\n\nion-datetime.ios::part(calendar-day active),\nion-datetime.ios::part(calendar-day active):focus {\n  background-color: rgb(154 209 98 / 0.2);\n  color: #9ad162;\n}\n"})})}function Wr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Lr,{...e})}):Lr(e)}function Hr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:"<template>\n  <ion-datetime presentation=\"date\" :value=\"datetime\"></ion-datetime>\n</template>\n\n<script lang=\"ts\">\n  import { IonDatetime } from '@ionic/vue';\n  import { defineComponent, ref } from 'vue';\n\n  export default defineComponent({\n    components: {\n      IonDatetime,\n    },\n    setup() {\n      let datetime = ref('');\n\n      const date = new Date();\n\n      // Set the value of the datetime to 2 days\n      // before the current day\n      let dayChange = -2;\n\n      // If the day we are going to set the value to\n      // is in the previous month then set the day 2 days\n      // later instead so it remains in the same month\n      if (date.getDate() + dayChange <= 0) {\n        dayChange = -dayChange;\n      }\n\n      // Set the value of the datetime to the day\n      // calculated above\n      date.setDate(date.getDate() + dayChange);\n      datetime = date.toISOString();\n\n      return {\n        datetime,\n      };\n    },\n  });\n<\/script>\n\n<style scoped>\n  /*\n  * Custom Datetime Day Parts\n  * -------------------------------------------\n  */\n\n  ion-datetime::part(calendar-day) {\n    color: #da5296;\n  }\n\n  ion-datetime::part(calendar-day today) {\n    color: #8462d1;\n  }\n\n  ion-datetime::part(calendar-day):focus {\n    background-color: rgb(154 209 98 / 0.2);\n    box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);\n  }\n\n  /*\n  * Custom Material Design Datetime Day Parts\n  * -------------------------------------------\n  */\n\n  ion-datetime.md::part(calendar-day active),\n  ion-datetime.md::part(calendar-day active):focus {\n    background-color: #9ad162;\n    border-color: #9ad162;\n    color: #fff;\n  }\n\n  ion-datetime.md::part(calendar-day today) {\n    border-color: #8462d1;\n  }\n\n  /*\n  * Custom iOS Datetime Day Parts\n  * -------------------------------------------\n  */\n\n  ion-datetime.ios::part(calendar-day active),\n  ion-datetime.ios::part(calendar-day active):focus {\n    background-color: rgb(154 209 98 / 0.2);\n    color: #9ad162;\n  }\n</style>\n"})})}function Fr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Hr,{...e})}):Hr(e)}function Ur(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date" [(ngModel)]="datetime"></ion-datetime>\n'})})}function Yr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Ur,{...e})}):Ur(e)}function $r(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/*\n* Custom Datetime Day Parts\n* -------------------------------------------\n*/\n\nion-datetime::part(calendar-day) {\n  color: #da5296;\n}\n\nion-datetime::part(calendar-day today) {\n  color: #8462d1;\n}\n\nion-datetime::part(calendar-day):focus {\n  background-color: rgb(154 209 98 / 0.2);\n  box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);\n}\n\n/*\n* Custom Material Design Datetime Day Parts\n* -------------------------------------------\n*/\n\nion-datetime.md::part(calendar-day active),\nion-datetime.md::part(calendar-day active):focus {\n  background-color: #9ad162;\n  border-color: #9ad162;\n  color: #fff;\n}\n\nion-datetime.md::part(calendar-day today) {\n  border-color: #8462d1;\n}\n\n/*\n* Custom iOS Datetime Day Parts\n* -------------------------------------------\n*/\n\nion-datetime.ios::part(calendar-day active),\nion-datetime.ios::part(calendar-day active):focus {\n  background-color: rgb(154 209 98 / 0.2);\n  color: #9ad162;\n}\n"})})}function Gr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)($r,{...e})}):$r(e)}function qr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\n\n// ViewEncapsulation is turned off for this demo due to\n// a lack of support for styling multiple css shadow parts\n// See https://github.com/angular/angular/issues/22515\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ExampleComponent implements OnInit {\n  public datetime;\n\n  ngOnInit() {\n    const date = new Date();\n\n    // Set the value of the datetime to 2 days\n    // before the current day\n    let dayChange = -2;\n\n    // If the day we are going to set the value to\n    // is in the previous month then set the day 2 days\n    // later instead so it remains in the same month\n    if (date.getDate() + dayChange <= 0) {\n      dayChange = -dayChange;\n    }\n\n    // Set the value of the datetime to the day\n    // calculated above\n    date.setDate(date.getDate() + dayChange);\n    this.datetime = date.toISOString();\n  }\n}\n"})})}function Jr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(qr,{...e})}):qr(e)}function Kr(e){return(0,r.jsx)(b.Z,{version:"8",code:{javascript:Rr,react:{files:{"src/main.tsx":Pr,"src/main.css":Wr}},vue:Fr,angular:{files:{"src/app/example.component.html":Yr,"src/app/example.component.css":Gr,"src/app/example.component.ts":Jr}}},src:"usage/v8/datetime/styling/calendar-days/demo.html",size:"medium"})}function Xr(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Kr,{...e})}):Kr()}function Qr(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<style>\n  ion-datetime {\n    --background: rgb(245, 235, 247);\n    --background-rgb: 245, 235, 247;\n    --wheel-highlight-background: rgb(218, 216, 255);\n    --wheel-highlight-border-radius: 48px;\n    --wheel-fade-background-rgb: 245, 235, 247;\n  }\n\n  ion-datetime::part(wheel-item) {\n    color: rgb(255, 66, 97);\n  }\n\n  ion-datetime::part(wheel-item active) {\n    color: rgb(128, 30, 171);\n  }\n</style>\n\n<ion-datetime presentation="date" prefer-wheel="true"></ion-datetime>\n'})})}function es(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Qr,{...e})}):Qr(e)}function ns(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\n\nimport './main.css';\n\nfunction Example() {\n  return <IonDatetime presentation=\"date\" preferWheel={true}></IonDatetime>;\n}\nexport default Example;\n"})})}function ts(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ns,{...e})}):ns(e)}function rs(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"ion-datetime {\n  --background: rgb(245, 235, 247);\n  --background-rgb: 245, 235, 247;\n  --wheel-highlight-background: rgb(218, 216, 255);\n  --wheel-highlight-border-radius: 48px;\n  --wheel-fade-background-rgb: 245, 235, 247;\n}\n\nion-datetime::part(wheel-item) {\n  color: rgb(255, 66, 97);\n}\n\nion-datetime::part(wheel-item active) {\n  color: rgb(128, 30, 171);\n}\n"})})}function ss(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(rs,{...e})}):rs(e)}function os(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime presentation="date" :prefer-wheel="true"></ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n\n<style scoped>\n  ion-datetime {\n    --background: rgb(245, 235, 247);\n    --background-rgb: 245, 235, 247;\n    --wheel-highlight-background: rgb(218, 216, 255);\n    --wheel-highlight-border-radius: 48px;\n    --wheel-fade-background-rgb: 245, 235, 247;\n  }\n\n  ion-datetime::part(wheel-item) {\n    color: rgb(255, 66, 97);\n  }\n\n  ion-datetime::part(wheel-item active) {\n    color: rgb(128, 30, 171);\n  }\n</style>\n'})})}function is(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(os,{...e})}):os(e)}function cs(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date" [preferWheel]="true"></ion-datetime>\n'})})}function as(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(cs,{...e})}):cs(e)}function ds(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"ion-datetime {\n  --background: rgb(245, 235, 247);\n  --background-rgb: 245, 235, 247;\n  --wheel-highlight-background: rgb(218, 216, 255);\n  --wheel-highlight-border-radius: 48px;\n  --wheel-fade-background-rgb: 245, 235, 247;\n}\n\nion-datetime::part(wheel-item) {\n  color: rgb(255, 66, 97);\n}\n\nion-datetime::part(wheel-item active) {\n  color: rgb(128, 30, 171);\n}\n"})})}function ls(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ds,{...e})}):ds(e)}function hs(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { Component, ViewEncapsulation } from '@angular/core';\n\n// ViewEncapsulation is turned off for this demo due to\n// a lack of support for styling multiple css shadow parts\n// See https://github.com/angular/angular/issues/22515\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ExampleComponent {}\n"})})}function us(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(hs,{...e})}):hs(e)}function ms(e){return(0,r.jsx)(b.Z,{version:"8",code:{javascript:es,react:{files:{"src/main.tsx":ts,"src/main.css":ss}},vue:is,angular:{files:{"src/app/example.component.html":as,"src/app/example.component.css":ls,"src/app/example.component.ts":us}}},src:"usage/v8/datetime/styling/wheel-styling/demo.html",size:"250px"})}function ps(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ms,{...e})}):ms()}var xs=t(85346);function js(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>\n'})})}function fs(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(js,{...e})}):js(e)}function gs(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonDatetime } from '@ionic/react';\nfunction Example() {\n  return <IonDatetime presentation=\"date-time\" preferWheel={true}></IonDatetime>;\n}\nexport default Example;\n"})})}function bs(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(gs,{...e})}):gs(e)}function vs(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-datetime presentation="date-time" :prefer-wheel="true"></ion-datetime>\n</template>\n\n<script lang="ts">\n  import { IonDatetime } from \'@ionic/vue\';\n  import { defineComponent } from \'vue\';\n\n  export default defineComponent({\n    components: { IonDatetime },\n  });\n<\/script>\n'})})}function ys(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(vs,{...e})}):vs(e)}function ws(e){const n={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>\n'})})}function Ds(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(ws,{...e})}):ws(e)}function Cs(e){return(0,r.jsx)(b.Z,{version:"8",size:"medium",code:{javascript:fs,react:bs,vue:ys,angular:Ds},src:"usage/v8/datetime/presentation/wheel/demo.html"})}function ks(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(Cs,{...e})}):Cs()}const Is={title:"ion-datetime"},Ts=void 0,Ss={id:"api/datetime",title:"ion-datetime",description:"ion-datetime: Ionic API Input for Datetime Format Picker",source:"@site/docs/api/datetime.md",sourceDirName:"api",slug:"/api/datetime",permalink:"/docs/api/datetime",draft:!1,unlisted:!1,editUrl:"https://github.com/ionic-team/ionic-docs/tree/main/docs/api/datetime.md",tags:[],version:"current",frontMatter:{title:"ion-datetime"},sidebar:"api",previous:{title:"ion-content",permalink:"/docs/api/content"},next:{title:"ion-datetime-button",permalink:"/docs/api/datetime-button"}},Ns={},Es=[{value:"Overview",id:"overview",level:2},{value:"ISO 8601 Datetime Format: <code>YYYY-MM-DDTHH:mmZ</code>",id:"iso-8601-datetime-format-yyyy-mm-ddthhmmz",level:3},{value:"Basic Usage",id:"basic-usage",level:2},{value:"Usage with Datetime Button",id:"usage-with-datetime-button",level:2},{value:"Setting Values Asynchronously",id:"setting-values-asynchronously",level:2},{value:"Date Constraints",id:"date-constraints",level:2},{value:"Max and Min Dates",id:"max-and-min-dates",level:3},{value:"Selecting Specific Values",id:"selecting-specific-values",level:3},{value:"Advanced Date Constraints",id:"advanced-date-constraints",level:3},{value:"Localization",id:"localization",level:2},{value:"Custom Locale",id:"custom-locale",level:3},{value:"Hour Cycle",id:"hour-cycle",level:3},{value:"First Day of the Week",id:"first-day-of-the-week",level:3},{value:"Time Label",id:"time-label",level:3},{value:"Locale Extension Tags",id:"locale-extension-tags",level:3},{value:"Presentation",id:"presentation",level:2},{value:"Month and Year Selection",id:"month-and-year-selection",level:3},{value:"Time Selection",id:"time-selection",level:3},{value:"Date Selection",id:"date-selection",level:3},{value:"Wheel Style Pickers",id:"wheel-style-pickers",level:3},{value:"Multiple Date Selection",id:"multiple-date-selection",level:2},{value:"Titles",id:"titles",level:2},{value:"Showing the Default Title",id:"showing-the-default-title",level:3},{value:"Customizing the Title",id:"customizing-the-title",level:3},{value:"Format Options",id:"format-options",level:2},{value:"Buttons",id:"buttons",level:2},{value:"Showing Confirmation Buttons",id:"showing-confirmation-buttons",level:3},{value:"Customizing Button Texts",id:"customizing-button-texts",level:3},{value:"Customizing Button Elements",id:"customizing-button-elements",level:3},{value:"Highlighting Specific Dates",id:"highlighting-specific-dates",level:2},{value:"Using Array",id:"using-array",level:3},{value:"Using Callback",id:"using-callback",level:3},{value:"Styling",id:"styling",level:2},{value:"Global Theming",id:"global-theming",level:3},{value:"Calendar Days",id:"calendar-days",level:3},{value:"Wheel Pickers",id:"wheel-pickers",level:3},{value:"Time Zones",id:"time-zones",level:2},{value:"Parsing Date Values",id:"parsing-date-values",level:3},{value:"Advanced Datetime Validation and Manipulation",id:"advanced-datetime-validation-and-manipulation",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Keyboard Interactions",id:"keyboard-interactions",level:3},{value:"Date Grid",id:"date-grid",level:4},{value:"Time, Month, and Year Wheels",id:"time-month-and-year-wheels",level:4},{value:"Interfaces",id:"interfaces",level:2},{value:"DatetimeChangeEventDetail",id:"datetimechangeeventdetail",level:3},{value:"DatetimeCustomEvent",id:"datetimecustomevent",level:3},{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}];function _s(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components},{Head:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t,{children:[(0,r.jsx)("title",{children:"ion-datetime: Ionic API Input for Datetime Format Picker"}),(0,r.jsx)("meta",{name:"description",content:"Datetimes present a picker interface to select dates and times. Ionic's API Datetime input component easily displays a preferred format, and manages values."})]}),"\n","\n",(0,r.jsx)(xs.Z,{type:"shadow"}),"\n",(0,r.jsxs)(n.p,{children:["Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native ",(0,r.jsx)(n.code,{children:"input"})," elements of ",(0,r.jsx)(n.code,{children:"datetime-local"}),", however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values."]}),"\n",(0,r.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsxs)(n.p,{children:["Historically, handling datetime values within JavaScript, or even within HTML\ninputs, has always been a challenge. Specifically, JavaScript's ",(0,r.jsx)(n.code,{children:"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."]}),"\n",(0,r.jsx)(n.p,{children:"Fortunately, Ionic Framework's datetime input has been designed so developers can avoid\nthe common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience."}),"\n",(0,r.jsxs)(n.h3,{id:"iso-8601-datetime-format-yyyy-mm-ddthhmmz",children:["ISO 8601 Datetime Format: ",(0,r.jsx)(n.code,{children:"YYYY-MM-DDTHH:mmZ"})]}),"\n",(0,r.jsxs)(n.p,{children:["Ionic Framework uses the ",(0,r.jsx)(n.a,{href:"https://www.w3.org/TR/NOTE-datetime",children:"ISO 8601 datetime format"}),"\nfor its value. The value is simply a string, rather than using JavaScript's\n",(0,r.jsx)(n.code,{children:"Date"})," object. Using the ISO datetime format makes it easy to serialize\nand parse within JSON objects and databases."]}),"\n",(0,r.jsxs)(n.p,{children:["Below are some examples of ISO 8601 formats that can be used with ",(0,r.jsx)(n.code,{children:"ion-datetime"}),":"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Description"}),(0,r.jsx)(n.th,{children:"Format"}),(0,r.jsx)(n.th,{children:"Datetime Value Example"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Year"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"YYYY"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"1994"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Year and Month"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"YYYY-MM"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"1994-12"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Complete Date"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"YYYY-MM-DD"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"1994-12-15"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Date and Time"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"YYYY-MM-DDTHH:mm"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"1994-12-15T13:47"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"UTC Timezone"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"YYYY-MM-DDTHH:mm:ssZ"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"1994-12-15T13:47:20Z"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Timezone Offset"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"YYYY-MM-DDTHH:mm:ssTZD"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"1994-12-15T13:47:20+05:00"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Hour and Minute"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"HH:mm"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"13:47"})})]})]})]}),"\n",(0,r.jsxs)(n.p,{children:["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,r.jsx)(n.code,{children:"01"}),". Additionally, the hour is\nalways in the 24-hour format, so ",(0,r.jsx)(n.code,{children:"00"})," is ",(0,r.jsx)(n.code,{children:"12am"})," on a 12-hour clock, ",(0,r.jsx)(n.code,{children:"13"})," means\n",(0,r.jsx)(n.code,{children:"1pm"}),", and ",(0,r.jsx)(n.code,{children:"23"})," means ",(0,r.jsx)(n.code,{children:"11pm"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, ",(0,r.jsx)(n.code,{children:"ion-datetime"})," does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored."]})}),"\n",(0,r.jsx)(n.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,r.jsx)(N,{}),"\n",(0,r.jsx)(n.h2,{id:"usage-with-datetime-button",children:"Usage with Datetime Button"}),"\n",(0,r.jsxs)(n.p,{children:["If you need to present a datetime in an overlay such as a modal or a popover, we recommend using ",(0,r.jsx)(n.a,{href:"./datetime-button",children:"ion-datetime-button"}),". ",(0,r.jsx)(n.code,{children:"ion-datetime-button"})," should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay."]}),"\n",(0,r.jsx)(n.h2,{id:"setting-values-asynchronously",children:"Setting Values Asynchronously"}),"\n",(0,r.jsxs)(n.p,{children:["If its ",(0,r.jsx)(n.code,{children:"value"})," is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the ",(0,r.jsx)(n.code,{children:"value"})," in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's ",(0,r.jsx)(n.code,{children:"value"})," is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating."]}),"\n",(0,r.jsx)(n.h2,{id:"date-constraints",children:"Date Constraints"}),"\n",(0,r.jsx)(n.h3,{id:"max-and-min-dates",children:"Max and Min Dates"}),"\n",(0,r.jsxs)(n.p,{children:["To customize the minimum and maximum datetime values, the ",(0,r.jsx)(n.code,{children:"min"})," and ",(0,r.jsx)(n.code,{children:"max"})," component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user."]}),"\n",(0,r.jsx)(n.p,{children:"The following example restricts date selection to March 2022 through May 2022 only."}),"\n",(0,r.jsx)(V,{}),"\n",(0,r.jsx)(n.h3,{id:"selecting-specific-values",children:"Selecting Specific Values"}),"\n",(0,r.jsxs)(n.p,{children:["While the ",(0,r.jsx)(n.code,{children:"min"})," and ",(0,r.jsx)(n.code,{children:"max"})," properties allow you to restrict date selection to a certain range, the ",(0,r.jsx)(n.code,{children:"monthValues"}),", ",(0,r.jsx)(n.code,{children:"dayValues"}),", ",(0,r.jsx)(n.code,{children:"yearValues"}),", ",(0,r.jsx)(n.code,{children:"hourValues"}),", and ",(0,r.jsx)(n.code,{children:"minuteValues"})," properties allow you choose specific days and times that users can select."]}),"\n",(0,r.jsx)(n.p,{children:"The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5."}),"\n",(0,r.jsx)(q,{}),"\n",(0,r.jsx)(n.h3,{id:"advanced-date-constraints",children:"Advanced Date Constraints"}),"\n",(0,r.jsxs)(n.p,{children:["With the ",(0,r.jsx)(n.code,{children:"isDateEnabled"})," property, developers can customize the ",(0,r.jsx)(n.code,{children:"ion-datetime"})," to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.\nThe ",(0,r.jsx)(n.code,{children:"isDateEnabled"})," property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank."]}),"\n",(0,r.jsxs)(n.p,{children:["The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as ",(0,r.jsx)(n.code,{children:"date-fns"}),"."]}),"\n",(0,r.jsx)(ce,{}),"\n",(0,r.jsx)(n.h2,{id:"localization",children:"Localization"}),"\n",(0,r.jsxs)(n.p,{children:["Ionic Framework makes use of the ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat",children:"Intl.DatetimeFormat"})," Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device."]}),"\n",(0,r.jsx)(n.h3,{id:"custom-locale",children:"Custom Locale"}),"\n",(0,r.jsxs)(n.p,{children:["For instances where you need a specific locale, you can use the ",(0,r.jsx)(n.code,{children:"locale"})," property to set it. The locale controls both the language and the date and time formats that are displayed."]}),"\n",(0,r.jsx)(n.p,{children:"The following example shows how to set the locale to Spanish (Spain)."}),"\n",(0,r.jsx)(Te,{}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["The time label is not automatically localized. See ",(0,r.jsx)(n.a,{href:"#time-label",children:"Time Label"})," for more information."]})}),"\n",(0,r.jsx)(n.h3,{id:"hour-cycle",children:"Hour Cycle"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"ion-datetime"})," will use the hour cycle that is specified by the ",(0,r.jsx)(n.code,{children:"locale"})," property by default. For example, if ",(0,r.jsx)(n.code,{children:"locale"})," is set to ",(0,r.jsx)(n.code,{children:"en-US"}),", then ",(0,r.jsx)(n.code,{children:"ion-datetime"})," will use a 12 hour cycle."]}),"\n",(0,r.jsx)(n.p,{children:"There are 4 primary hour cycle types:"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Hour cycle type"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'h12'"})}),(0,r.jsx)(n.td,{children:"Hour system using 1\u201312; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'h23'"})}),(0,r.jsx)(n.td,{children:"Hour system using 0\u201323; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'h11'"})}),(0,r.jsx)(n.td,{children:"Hour system using 0\u201311; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'h24'"})}),(0,r.jsx)(n.td,{children:"Hour system using 1\u201324; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00."})]})]})]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["Source: ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle",children:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle"})]})}),"\n",(0,r.jsxs)(n.p,{children:["There may be scenarios where you need to have more control over which hour cycle is used. This is where the ",(0,r.jsx)(n.code,{children:"hourCycle"})," property can help."]}),"\n",(0,r.jsxs)(n.p,{children:["In the following example, we can use the ",(0,r.jsx)(n.code,{children:"hourCycle"})," property to force ",(0,r.jsx)(n.code,{children:"ion-datetime"})," to use the 12 hour cycle even though the locale is ",(0,r.jsx)(n.code,{children:"en-GB"}),", which uses a 24 hour cycle by default:"]}),"\n",(0,r.jsx)(Ze,{}),"\n",(0,r.jsx)(n.h3,{id:"first-day-of-the-week",children:"First Day of the Week"}),"\n",(0,r.jsxs)(n.p,{children:["For ",(0,r.jsx)(n.code,{children:"ion-datetime"}),", the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: ",(0,r.jsx)(n.a,{href:"https://github.com/tc39/ecma402/issues/6",children:"TC39 GitHub"}),")."]}),"\n",(0,r.jsx)($e,{}),"\n",(0,r.jsx)(n.h3,{id:"time-label",children:"Time Label"}),"\n",(0,r.jsxs)(n.p,{children:["The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the ",(0,r.jsx)(n.code,{children:"time-label"})," slot."]}),"\n",(0,r.jsx)(pn,{}),"\n",(0,r.jsx)(n.h3,{id:"locale-extension-tags",children:"Locale Extension Tags"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"ion-datetime"})," also supports ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale",children:"locale extension tags"})," as part of the ",(0,r.jsx)(n.code,{children:"Intl.Locale"})," API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale",children:"Intl.Locale API"})," in their apps."]}),"\n",(0,r.jsxs)(n.p,{children:["For example, if you wanted to use a 12 hour cycle with the ",(0,r.jsx)(n.code,{children:"en-GB"})," locale, you could provide extension tags instead of using both the ",(0,r.jsx)(n.code,{children:"locale"})," and ",(0,r.jsx)(n.code,{children:"hourCycle"})," properties:"]}),"\n",(0,r.jsx)(rn,{}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["Be sure to check the ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility",children:"Browser Compatibility Chart"}),"  for ",(0,r.jsx)(n.code,{children:"Intl.Locale"})," before using it in your app."]})}),"\n",(0,r.jsx)(n.h2,{id:"presentation",children:"Presentation"}),"\n",(0,r.jsxs)(n.p,{children:["By default, ",(0,r.jsx)(n.code,{children:"ion-datetime"})," allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute."]}),"\n",(0,r.jsxs)(n.p,{children:["Some use cases may call for only date selection or only time selection. The ",(0,r.jsx)(n.code,{children:"presentation"})," property allows you to specify which pickers to show and the order to show them in. For example, setting ",(0,r.jsx)(n.code,{children:"date-time"})," will have the calendar picker appear before the time picker. Setting ",(0,r.jsx)(n.code,{children:"time-date"})," will have the calendar picker appear after the time picker."]}),"\n",(0,r.jsx)(n.h3,{id:"month-and-year-selection",children:"Month and Year Selection"}),"\n",(0,r.jsxs)(n.p,{children:["Month and year selection is available by passing ",(0,r.jsx)(n.code,{children:"month-year"}),", ",(0,r.jsx)(n.code,{children:"month"}),", or ",(0,r.jsx)(n.code,{children:"year"})," to the ",(0,r.jsx)(n.code,{children:"presentation"})," property."]}),"\n",(0,r.jsxs)(n.p,{children:["This example shows a datetime with the ",(0,r.jsx)(n.code,{children:"month-year"})," configuration."]}),"\n",(0,r.jsx)(Cn,{}),"\n",(0,r.jsx)(n.h3,{id:"time-selection",children:"Time Selection"}),"\n",(0,r.jsxs)(n.p,{children:["Time selection is available by passing ",(0,r.jsx)(n.code,{children:"date-time"}),", ",(0,r.jsx)(n.code,{children:"time-date"}),", or ",(0,r.jsx)(n.code,{children:"time"})," to the ",(0,r.jsx)(n.code,{children:"presentation"})," property."]}),"\n",(0,r.jsxs)(n.p,{children:["This example shows a datetime with the ",(0,r.jsx)(n.code,{children:"time"})," configuration."]}),"\n",(0,r.jsx)(An,{}),"\n",(0,r.jsx)(n.h3,{id:"date-selection",children:"Date Selection"}),"\n",(0,r.jsxs)(n.p,{children:["Date selection is available by passing ",(0,r.jsx)(n.code,{children:"date-time"}),", ",(0,r.jsx)(n.code,{children:"time-date"}),", or ",(0,r.jsx)(n.code,{children:"date"})," to the ",(0,r.jsx)(n.code,{children:"presentation"})," property."]}),"\n",(0,r.jsxs)(n.p,{children:["This example shows a datetime with the ",(0,r.jsx)(n.code,{children:"date"})," configuration."]}),"\n",(0,r.jsx)(Fn,{}),"\n",(0,r.jsx)(n.h3,{id:"wheel-style-pickers",children:"Wheel Style Pickers"}),"\n",(0,r.jsxs)(n.p,{children:["By default, Ionic will prefer to show a grid style layout when using ",(0,r.jsx)(n.code,{children:"presentation"}),". However, it is possible to show a wheel style using the ",(0,r.jsx)(n.code,{children:"preferWheel"})," property. When ",(0,r.jsx)(n.code,{children:"preferWheel"})," is ",(0,r.jsx)(n.code,{children:"true"}),", Ionic will prefer to show the wheel style layout when possible."]}),"\n",(0,r.jsxs)(n.p,{children:["Certain ",(0,r.jsx)(n.code,{children:"presentation"})," options have both grid and wheel styles that developers can choose from with the ",(0,r.jsx)(n.code,{children:"preferWheel"})," property. Other ",(0,r.jsx)(n.code,{children:"presentation"})," values only have a wheel style and will never show a grid style. The table below shows which ",(0,r.jsx)(n.code,{children:"presentation"})," values have grid or wheel styles."]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:(0,r.jsx)(n.code,{children:"presentation"})}),(0,r.jsx)(n.th,{children:"Has Grid Style?"}),(0,r.jsx)(n.th,{children:"Has Wheel Style?"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"date"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Yes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"date-time"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Yes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"month"})}),(0,r.jsx)(n.td,{children:"No"}),(0,r.jsx)(n.td,{children:"Yes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"month-year"})}),(0,r.jsx)(n.td,{children:"No"}),(0,r.jsx)(n.td,{children:"Yes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"time"})}),(0,r.jsx)(n.td,{children:"No"}),(0,r.jsx)(n.td,{children:"Yes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"time-date"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Yes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"year"})}),(0,r.jsx)(n.td,{children:"No"}),(0,r.jsx)(n.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsxs)(n.p,{children:["The example below shows the wheel picker with ",(0,r.jsx)(n.code,{children:'presentation="date-time"'}),"."]}),"\n","\n","\n",(0,r.jsx)(ks,{}),"\n",(0,r.jsx)(n.h2,{id:"multiple-date-selection",children:"Multiple Date Selection"}),"\n",(0,r.jsxs)(n.p,{children:["If the ",(0,r.jsx)(n.code,{children:"multiple"})," property is set to ",(0,r.jsx)(n.code,{children:"true"}),", multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["This property is only supported when using ",(0,r.jsx)(n.code,{children:'presentation="date"'})," and ",(0,r.jsx)(n.code,{children:'preferWheel="false"'}),"."]})}),"\n",(0,r.jsx)(vr,{}),"\n",(0,r.jsx)(n.h2,{id:"titles",children:"Titles"}),"\n",(0,r.jsxs)(n.p,{children:["By default, ",(0,r.jsx)(n.code,{children:"ion-datetime"})," does not show any header or title associated with the component. Developers can use the ",(0,r.jsx)(n.code,{children:"showDefaultTitle"})," property to show the default title/header configuration. They can also use the ",(0,r.jsx)(n.code,{children:"title"})," slot to customize what is rendered in the header."]}),"\n",(0,r.jsx)(n.h3,{id:"showing-the-default-title",children:"Showing the Default Title"}),"\n",(0,r.jsx)(et,{}),"\n",(0,r.jsx)(n.h3,{id:"customizing-the-title",children:"Customizing the Title"}),"\n",(0,r.jsx)(lt,{}),"\n",(0,r.jsx)(n.h2,{id:"format-options",children:"Format Options"}),"\n",(0,r.jsxs)(n.p,{children:["You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing ",(0,r.jsx)(n.code,{children:"formatOptions"}),". The ",(0,r.jsx)(n.code,{children:"date"})," and ",(0,r.jsx)(n.code,{children:"time"})," in the ",(0,r.jsx)(n.code,{children:"formatOptions"})," property should each be an ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options",children:(0,r.jsx)(n.code,{children:"Intl.DateTimeFormatOptions"})})," object. If ",(0,r.jsx)(n.code,{children:"formatOptions"})," is not provided, default formats will be used for dates and times."]}),"\n",(0,r.jsxs)(n.p,{children:["Datetime ",(0,r.jsx)(n.a,{href:"#time-zones",children:"does not manipulate or set"})," the time zone. If ",(0,r.jsx)(n.code,{children:"timeZone"})," or ",(0,r.jsx)(n.code,{children:"timeZoneName"})," are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone."]}),"\n",(0,r.jsxs)(n.p,{children:["Be careful with the options you provide, as they may not match the selected presentation. For example, providing ",(0,r.jsx)(n.code,{children:"minute: 'numeric'"})," for a presentation of ",(0,r.jsx)(n.code,{children:"month"})," may lead to unexpected behavior, displaying a month where only a time might be expected."]}),"\n",(0,r.jsx)(fe,{}),"\n",(0,r.jsx)(n.h2,{id:"buttons",children:"Buttons"}),"\n",(0,r.jsxs)(n.p,{children:["By default, ",(0,r.jsx)(n.code,{children:"ionChange"})," is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting ",(0,r.jsx)(n.code,{children:"ionChange"}),", you can either set the ",(0,r.jsx)(n.code,{children:"showDefaultButtons"})," property to ",(0,r.jsx)(n.code,{children:"true"})," or use the ",(0,r.jsx)(n.code,{children:"buttons"})," slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the ",(0,r.jsx)(n.code,{children:"confirm"})," method on ",(0,r.jsx)(n.code,{children:"ion-datetime"})," for ",(0,r.jsx)(n.code,{children:"ionChange"})," to be emitted."]}),"\n",(0,r.jsx)(n.h3,{id:"showing-confirmation-buttons",children:"Showing Confirmation Buttons"}),"\n",(0,r.jsxs)(n.p,{children:["The default Done and Cancel buttons are already preconfigured to call the ",(0,r.jsx)(n.a,{href:"#confirm",children:(0,r.jsx)(n.code,{children:"confirm"})})," and ",(0,r.jsx)(n.a,{href:"#cancel",children:(0,r.jsx)(n.code,{children:"cancel"})})," methods, respectively."]}),"\n",(0,r.jsx)(vt,{}),"\n",(0,r.jsx)(n.h3,{id:"customizing-button-texts",children:"Customizing Button Texts"}),"\n",(0,r.jsxs)(n.p,{children:["For simple use cases, developers can provide custom button text to the confirmation and cancel values through the ",(0,r.jsx)(n.code,{children:"doneText"})," and ",(0,r.jsx)(n.code,{children:"cancelText"})," properties. We recommend doing this when you only need to change the button text and do not need any custom behavior."]}),"\n",(0,r.jsx)(Pt,{}),"\n",(0,r.jsx)(n.h3,{id:"customizing-button-elements",children:"Customizing Button Elements"}),"\n",(0,r.jsx)(n.p,{children:"Developers can provide their own buttons for advanced custom behavior."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"ion-datetime"})," has ",(0,r.jsx)(n.code,{children:"confirm"}),", ",(0,r.jsx)(n.code,{children:"cancel"}),", and ",(0,r.jsx)(n.code,{children:"reset"})," methods that developers can call when clicking on custom buttons. The ",(0,r.jsx)(n.code,{children:"reset"})," method also allows developers to provide a date to reset the datetime to."]}),"\n",(0,r.jsx)(Et,{}),"\n",(0,r.jsx)(n.h2,{id:"highlighting-specific-dates",children:"Highlighting Specific Dates"}),"\n",(0,r.jsxs)(n.p,{children:["Using the ",(0,r.jsx)(n.code,{children:"highlightedDates"})," property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use."]}),"\n",(0,r.jsxs)(n.p,{children:["When specifying colors, any valid CSS color format can be used. This includes hex codes, ",(0,r.jsx)(n.code,{children:"rgba"}),", ",(0,r.jsx)(n.a,{href:"../theming/colors",children:"color variables"}),", etc."]}),"\n",(0,r.jsx)(n.p,{children:"To maintain a consistent user experience, the style of selected date(s) will always override custom highlights."}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["This property is only supported when ",(0,r.jsx)(n.code,{children:'preferWheel="false"'}),", and using a ",(0,r.jsx)(n.code,{children:"presentation"})," of either ",(0,r.jsx)(n.code,{children:'"date"'}),", ",(0,r.jsx)(n.code,{children:'"date-time"'}),", or ",(0,r.jsx)(n.code,{children:'"time-date"'}),"."]})}),"\n",(0,r.jsx)(n.h3,{id:"using-array",children:"Using Array"}),"\n",(0,r.jsx)(n.p,{children:"An array is better when the highlights apply to fixed dates, such as due dates."}),"\n",(0,r.jsx)(Xt,{}),"\n",(0,r.jsx)(n.h3,{id:"using-callback",children:"Using Callback"}),"\n",(0,r.jsx)(n.p,{children:"A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings."}),"\n",(0,r.jsx)(lr,{}),"\n",(0,r.jsx)(n.h2,{id:"styling",children:"Styling"}),"\n",(0,r.jsx)(n.h3,{id:"global-theming",children:"Global Theming"}),"\n",(0,r.jsxs)(n.p,{children:["Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the ",(0,r.jsx)(n.a,{href:"../theming/colors#new-color-creator",children:"Color Creator"})," and the ",(0,r.jsx)(n.a,{href:"../theming/themes#stepped-color-generator",children:"Stepped Color Generator"})," to create a rose color palette that we can use for ",(0,r.jsx)(n.code,{children:"ion-datetime"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The benefit of this approach is that every component, not just ",(0,r.jsx)(n.code,{children:"ion-datetime"}),", can automatically take advantage of this theme."]}),"\n",(0,r.jsx)(Br,{}),"\n",(0,r.jsx)(n.h3,{id:"calendar-days",children:"Calendar Days"}),"\n",(0,r.jsxs)(n.p,{children:["The calendar days in a grid-style ",(0,r.jsx)(n.code,{children:"ion-datetime"})," can be styled using CSS shadow parts."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsx)(n.p,{children:"The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day."})}),"\n",(0,r.jsx)(Xr,{}),"\n",(0,r.jsx)(n.h3,{id:"wheel-pickers",children:"Wheel Pickers"}),"\n",(0,r.jsxs)(n.p,{children:["The wheels used in ",(0,r.jsx)(n.code,{children:"ion-datetime"})," can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes."]}),"\n",(0,r.jsx)(ps,{}),"\n",(0,r.jsx)(n.h2,{id:"time-zones",children:"Time Zones"}),"\n",(0,r.jsxs)(n.p,{children:["Ionic's ",(0,r.jsx)(n.code,{children:"ion-datetime"})," follows the ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local",children:"datetime-local"}),' behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones.']}),"\n",(0,r.jsxs)(n.p,{children:["We recommend using a library such as ",(0,r.jsx)(n.a,{href:"https://github.com/marnusw/date-fns-tz",children:"date-fns-tz"})," to convert a datetime value to the desired time zone."]}),"\n",(0,r.jsx)(n.p,{children:"Below is an example of formatting an ISO-8601 string to display in the time zone set on a user's device:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"import { format, utcToZonedTime } from 'date-fns-tz';\n\n// Get the time zone set on the user's device\nconst userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n// Create a date object from a UTC date string\nconst date = new Date('2014-10-25T10:46:20Z');\n\n// Use date-fns-tz to convert from UTC to a zoned time\nconst zonedTime = utcToZonedTime(date, userTimeZone);\n\n// Create a formatted string from the zoned time\nformat(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });\n"})}),"\n",(0,r.jsx)(n.h3,{id:"parsing-date-values",children:"Parsing Date Values"}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"ionChange"})," event will emit the date value as an ISO-8601 string in the event payload. It is the developer's responsibility to format it based on their application needs. We recommend using ",(0,r.jsx)(n.a,{href:"https://date-fns.org",children:"date-fns"})," to format the date value."]}),"\n",(0,r.jsx)(n.p,{children:"Below is an example of formatting an ISO-8601 string to display the month, date and year:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"import { format, parseISO } from 'date-fns';\n\n/**\n * This is provided in the event\n * payload from the `ionChange` event.\n *\n * The value is an ISO-8601 date string.\n */\nconst dateFromIonDatetime = '2021-06-04T14:23:00-04:00';\nconst formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');\n\nconsole.log(formattedString); // Jun 4, 2021\n"})}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://date-fns.org/docs/format",children:"https://date-fns.org/docs/format"})," for a list of all the valid format tokens."]}),"\n",(0,r.jsx)(n.h2,{id:"advanced-datetime-validation-and-manipulation",children:"Advanced Datetime Validation and Manipulation"}),"\n",(0,r.jsxs)(n.p,{children:["The datetime picker provides the simplicity of selecting an exact format, and\npersists the datetime values as a string using the standardized ",(0,r.jsx)(n.a,{href:"https://www.w3.org/TR/NOTE-datetime",children:"ISO 8601\ndatetime format"}),". However, it's important\nto note that ",(0,r.jsx)(n.code,{children:"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,r.jsx)(n.a,{href:"https://date-fns.org",children:"date-fns"})," to work with\ndates in JavaScript."]}),"\n",(0,r.jsx)(n.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsx)(n.h3,{id:"keyboard-interactions",children:"Keyboard Interactions"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"ion-datetime"})," has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does:"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Key"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"Tab"})}),(0,r.jsx)(n.td,{children:"Moves focus to the next focusable element."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)("kbd",{children:"Shift"})," + ",(0,r.jsx)("kbd",{children:"Tab"})]}),(0,r.jsx)(n.td,{children:"Moves focus to the previous focusable element."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)("kbd",{children:"Space"})," or ",(0,r.jsx)("kbd",{children:"Enter"})]}),(0,r.jsx)(n.td,{children:"Clicks the focusable element."})]})]})]}),"\n",(0,r.jsx)(n.h4,{id:"date-grid",children:"Date Grid"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Key"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"ArrowUp"})}),(0,r.jsx)(n.td,{children:"Moves focus to the same day of the previous week."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"ArrowDown"})}),(0,r.jsx)(n.td,{children:"Moves focus to the same day of the next week."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"ArrowRight"})}),(0,r.jsx)(n.td,{children:"Moves focus to the next day."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"ArrowLeft"})}),(0,r.jsx)(n.td,{children:"Moves focus to the previous day."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"Home"})}),(0,r.jsx)(n.td,{children:"Moves focus to the first day of the current week."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"End"})}),(0,r.jsx)(n.td,{children:"Moves focus to the last day of the current week."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"PageUp"})}),(0,r.jsx)(n.td,{children:"Changes the grid of dates to the previous month."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)("kbd",{children:"PageDown"})}),(0,r.jsx)(n.td,{children:"Changes the grid of dates to the next month."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)("kbd",{children:"Shift"})," + ",(0,r.jsx)("kbd",{children:"PageUp"})]}),(0,r.jsx)(n.td,{children:"Changes the grid of dates to the previous year."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)("kbd",{children:"Shift"})," + ",(0,r.jsx)("kbd",{children:"PageDown"})]}),(0,r.jsx)(n.td,{children:"Changes the grid of dates to the next year."})]})]})]}),"\n",(0,r.jsx)(n.h4,{id:"time-month-and-year-wheels",children:"Time, Month, and Year Wheels"}),"\n",(0,r.jsxs)(n.p,{children:["The wheel picker in Datetime uses ",(0,r.jsx)(n.a,{href:"./picker",children:"Picker"})," internally. See ",(0,r.jsx)(n.a,{href:"./picker#accessibility",children:"Picker Accessibility"})," for more information on accessibility features with the wheel picker."]}),"\n",(0,r.jsx)(n.h2,{id:"interfaces",children:"Interfaces"}),"\n",(0,r.jsx)(n.h3,{id:"datetimechangeeventdetail",children:"DatetimeChangeEventDetail"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"interface DatetimeChangeEventDetail {\n  value?: string | null;\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"datetimecustomevent",children:"DatetimeCustomEvent"}),"\n",(0,r.jsxs)(n.p,{children:["While not required, this interface can be used in place of the ",(0,r.jsx)(n.code,{children:"CustomEvent"})," interface for stronger typing with Ionic events emitted from this component."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"interface DatetimeCustomEvent extends CustomEvent {\n  detail: DatetimeChangeEventDetail;\n  target: HTMLIonDatetimeElement;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(i,{}),"\n",(0,r.jsx)(n.h2,{id:"events",children:"Events"}),"\n",(0,r.jsx)(a,{}),"\n",(0,r.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,r.jsx)(l,{}),"\n",(0,r.jsx)(n.h2,{id:"css-shadow-parts",children:"CSS Shadow Parts"}),"\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)(n.h2,{id:"css-custom-properties",children:"CSS Custom Properties"}),"\n",(0,r.jsx)(j,{}),"\n",(0,r.jsx)(n.h2,{id:"slots",children:"Slots"}),"\n",(0,r.jsx)(g,{})]})}function zs(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(_s,{...e})}):_s(e)}},74866:(e,n,t)=>{t.d(n,{Z:()=>w});var r=t(67294),s=t(36905),o=t(12466),i=t(16550),c=t(20469),a=t(91980),d=t(67392),l=t(50012);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=n??function(e){return h(e).map((e=>{let{props:{value:n,label:t,attributes:r,default:s}}=e;return{value:n,label:t,attributes:r,default:s}}))}(t);return function(e){const n=(0,d.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[n,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const s=(0,i.k6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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 t??null}({queryString:n,groupId:t});return[(0,a._X)(o),(0,r.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(s.location.search);n.set(o,e),s.replace({...s.location,search:n.toString()})}),[o,s])]}function x(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,o=u(e),[i,a]=(0,r.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!m({value:n,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const r=t.find((e=>e.default))??t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:o}))),[d,h]=p({queryString:t,groupId:s}),[x,j]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,o]=(0,l.Nk)(t);return[s,(0,r.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:s}),f=(()=>{const e=d??x;return m({value:e,tabValues:o})?e:null})();(0,c.Z)((()=>{f&&a(f)}),[f]);return{selectedValue:i,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);a(e),h(e),j(e)}),[h,j,o]),tabValues:o}}var j=t(72389);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=t(85893);function b(e){let{className:n,block:t,selectedValue:r,selectValue:i,tabValues:c}=e;const a=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.o5)(),l=e=>{const n=e.currentTarget,t=a.indexOf(n),s=c[t].value;s!==r&&(d(n),i(s))},h=e=>{let n=null;switch(e.key){case"Enter":l(e);break;case"ArrowRight":{const t=a.indexOf(e.currentTarget)+1;n=a[t]??a[0];break}case"ArrowLeft":{const t=a.indexOf(e.currentTarget)-1;n=a[t]??a[a.length-1];break}}n?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":t},n),children:c.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>a.push(e),onKeyDown:h,onClick:l,...o,className:(0,s.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":r===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:s}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==s})))})}function y(e){const n=x(e);return(0,g.jsxs)("div",{className:(0,s.Z)("tabs-container",f.tabList),children:[(0,g.jsx)(b,{...e,...n}),(0,g.jsx)(v,{...e,...n})]})}function w(e){const n=(0,j.Z)();return(0,g.jsx)(y,{...e,children:h(e.children)},String(n))}},82238:(e,n,t)=>{t.d(n,{Z:()=>O});var r=t(67294),s=t(44996),o=t(79979);const i="Ionic Docs Example",c=async(e,n)=>{const t=`v${n}`,r=await Promise.all(e.map((e=>fetch(`/docs/code/stackblitz/${t}/${e}`))));return await Promise.all(r.map((e=>e.text())))},a=async(e,n)=>{const t=await c(["html/index.ts",n?.includeIonContent?"html/index.withContent.html":"html/index.html","html/variables.css","html/package.json"],n.version),r="index.html",s={"index.ts":t[0],[r]:t[1],"theme/variables.css":t[2],...n?.files},a=t[3];s[r]=t[1].replace(/{{ TEMPLATE }}/g,e).replace("</head>",`\n  <script>\n    window.Ionic = {\n      config: {\n        mode: '${n?.mode}'\n      }\n    }\n  <\/script>\n</head>\n`);let d={};try{d={...d,...JSON.parse(a).dependencies,...n?.dependencies}}catch(l){console.error("Failed to parse package.json contents",l)}o.Z.openProject({template:"typescript",title:n?.title??i,description:n?.description??"",files:s,dependencies:d})},d=async(e,n)=>{const t=await c(["angular/main.ts","angular/app.module.ts","angular/app.component.ts","angular/app.component.css",n?.includeIonContent?"angular/app.component.withContent.html":"angular/app.component.html","angular/example.component.ts","angular/styles.css","angular/global.css","angular/variables.css","angular/angular.json","angular/tsconfig.json","angular/package.json"],n.version),r="src/app/app.module.ts",s={"src/main.ts":t[0],"src/polyfills.ts":"import 'zone.js';",[r]:t[1],"src/app/app.component.ts":t[2],"src/app/app.component.css":t[3],"src/app/app.component.html":t[4],"src/app/example.component.ts":t[5],"src/app/example.component.html":e,"src/app/example.component.css":"","src/index.html":"<app-root></app-root>","src/styles.css":t[6],"src/global.css":t[7],"src/theme/variables.css":t[8],"angular.json":t[9],"tsconfig.json":t[10],...n?.files,...n?.dependencies},a=t[11];s[r]=s[r].replace("IonicModule.forRoot({})",`IonicModule.forRoot({ mode: '${n?.mode}' })`);let d={};try{d={...d,...JSON.parse(a).dependencies,...n?.dependencies}}catch(l){console.error("Failed to parse package.json contents",l)}o.Z.openProject({template:"angular-cli",title:n?.title??i,description:n?.description??"",files:s,dependencies:d})},l=async(e,n)=>{const t=await c(["react/index.tsx",n?.includeIonContent?"react/app.withContent.tsx":"react/app.tsx","react/variables.css","react/tsconfig.json","react/package.json","react/package-lock.json","react/index.html","react/vite.config.js","react/browserslistrc","react/eslintrc.js"],n.version),r=JSON.parse(t[4]);n?.dependencies&&(r.dependencies={...r.dependencies,...n.dependencies});const s="src/App.tsx",a={".eslintrc.js":t[9],".browserslistrc":t[8],"vite.config.js":t[7],"index.html":t[6],"src/index.tsx":t[0],[s]:t[1],"src/main.tsx":e,"src/theme/variables.css":t[2],"tsconfig.json":t[3],"package.json":JSON.stringify(r,null,2),"package-lock.json":t[5],...n?.files,...n?.dependencies,".stackblitzrc":'{\n  "startCommand": "yarn run start"\n}'};a[s]=a[s].replace("setupIonicReact()",`setupIonicReact({ mode: '${n?.mode}' })`),o.Z.openProject({template:"node",title:n?.title??i,description:n?.description??"",files:a})},h=async(e,n)=>{const t=await c(["vue/package.json","vue/package-lock.json","vue/index.html","vue/variables.css","vue/vite.config.ts","vue/main.ts",n?.includeIonContent?"vue/App.withContent.vue":"vue/App.vue","vue/tsconfig.json","vue/tsconfig.node.json","vue/env.d.ts"],n.version),r=JSON.parse(t[0]);n?.dependencies&&(r.dependencies={...r.dependencies,...n.dependencies});const s="src/main.ts",a={"src/App.vue":t[6],"src/components/Example.vue":e,[s]:t[5],"src/env.d.ts":t[9],"src/theme/variables.css":t[3],"index.html":t[2],"vite.config.ts":t[4],"package.json":JSON.stringify(r,null,2),"package-lock.json":t[1],"tsconfig.json":t[7],"tsconfig.node.json":t[8],...n?.files,".stackblitzrc":'{\n  "startCommand": "yarn run dev"\n}'};a[s]=a[s].replace(".use(IonicVue)",`.use(IonicVue, {\n  mode: '${n?.mode}'\n})`),o.Z.openProject({template:"node",title:n?.title??i,description:n?.description??"",files:a})};var u=t(92949);let m=function(e){return e.JavaScript="javascript",e.Angular="angular",e.React="react",e.Vue="vue",e}({}),p=function(e){return e.iOS="ios",e.MD="md",e}({});var x=t(87083),j=(t(18846),t(72389)),f=t(67392),g=t(12466),b=t(86010);const v={tabNav:"tabNav_gxPI",tabList:"tabList_nZAZ",tabItem:"tabItem_VZd9",tabIcon:"tabIcon_DCeC",tabNavItemHidden:"tabNavItemHidden_xnRJ",tabNavItem:"tabNavItem_t9Ol",tabNavItemLeft:"tabNavItemLeft_qnms",tabNavButton:"tabNavButton__N7i","tabs__nav-button--hidden":"tabs__nav-button--hidden_Y4dc"};var y=t(85893);function w(e){const{lazy:n,block:t,defaultValue:s,values:o,groupId:i,className:c}=e,[a,d]=(0,r.useState)(!1),[l,h]=(0,r.useState)(!1),u=(0,r.createRef)(),m=r.Children.map(e.children,(e=>{if((0,r.isValidElement)(e)&&void 0!==e.props.value)return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})),p=o??m.map((e=>{let{props:{value:n,label:t,icon:r,attributes:s}}=e;return{value:n,label:t,attributes:s,icon:r}})),x=(0,f.l)(p,((e,n)=>e.value===n.value));if(x.length>0)throw new Error(`Docusaurus error: Duplicate values "${x.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`);const j=null===s?s:s??m.find((e=>e.props.default))?.props.value??m[0]?.props.value;if(null!==j&&!p.some((e=>e.value===j)))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${j}" but none of its children has the corresponding value. Available values are: ${p.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);const[w,D]=(0,r.useState)(j),C=[],{blockElementScrollPositionUntilNextRender:k}=(0,g.o5)(),I=e=>{const n=e.currentTarget,t=C.indexOf(n),r=p[t].value;r!==w&&(k(n),D(r))},T=e=>{let n=null;switch(e.key){case"ArrowRight":{const t=C.indexOf(e.currentTarget)+1;n=C[t]||C[0];break}case"ArrowLeft":{const t=C.indexOf(e.currentTarget)-1;n=C[t]||C[C.length-1];break}}n?.focus()};(0,r.useEffect)((()=>{d(u.current?.scrollLeft>40),h(u.current?.scrollWidth>u.current?.offsetWidth)}),[i]);const S=void 0===p.find((e=>e.value===w)),N=e=>S?e===p[0].value:e===w;return(0,y.jsxs)("div",{className:(0,b.Z)("tabs-container",v.tabList),children:[(0,y.jsx)("div",{className:(0,b.Z)("tabs-nav",v.tabNav),children:(0,y.jsxs)("ul",{ref:u,role:"tablist","aria-orientation":"horizontal",className:(0,b.Z)("tabs",{"tabs--block":t},c),onScroll:()=>{d(u.current?.scrollLeft>40),h(u.current?.scrollWidth>u.current?.offsetWidth)},children:[a&&(0,y.jsx)("div",{className:(0,b.Z)("tabs__nav-item",v.tabNavItem,v.tabNavItemLeft),children:(0,y.jsx)("button",{className:(0,b.Z)("tabs__nav-button",v.tabNavButton),onClick:()=>{u.current.scrollTo({left:u.current.scrollLeft-150,behavior:"smooth"})},children:(0,y.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,y.jsx)("polyline",{points:"328 112 184 256 328 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})}),p.map((e=>{let{value:n,label:t,icon:r,attributes:s}=e;const o=N(n);return(0,y.jsxs)("li",{role:"tab",tabIndex:o?0:-1,"aria-selected":o,ref:e=>C.push(e),onKeyDown:T,onFocus:I,onClick:I,...s,className:(0,b.Z)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":o}),children:[r&&(0,y.jsx)("span",{className:(0,b.Z)("tabs__icon",v.tabIcon),children:r}),t??n]},n)})),l&&(0,y.jsx)("div",{className:(0,b.Z)("tabs__nav-item",v.tabNavItem),children:(0,y.jsx)("button",{className:(0,b.Z)("tabs__nav-button",v.tabNavButton),onClick:()=>{u.current.scrollTo({left:u.current.scrollLeft+150,behavior:"smooth"})},children:(0,y.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,y.jsx)("polyline",{points:"184 112 328 256 184 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})})]})}),n?(0,r.cloneElement)(m.filter((e=>N(e.props.value)))[0],{className:"margin-top--md"}):(0,y.jsx)("div",{className:"margin-top--md",children:m.map(((e,n)=>(0,r.cloneElement)(e,{key:n,className:`${e.props.className} ${N(e.props.value)?"":"hidden"}`})))})]})}function D(e){const n=(0,j.Z)();return(0,y.jsx)(w,{...e},String(n))}var C=t(85162);const k=()=>(0,y.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,y.jsx)("path",{d:"M3.75 8.625L0.75 6L3.75 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,y.jsx)("path",{d:"M8.25 8.625L11.25 6L8.25 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),I=()=>(0,y.jsx)("svg",{width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,y.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.78201 5.84221V7.56845C7.05944 7.71231 7.38757 7.82017 7.76639 7.8921C8.1452 7.96403 8.54444 8 8.96417 8C9.37323 8 9.7618 7.96045 10.1299 7.88131C10.4981 7.80221 10.8209 7.67183 11.0983 7.49021C11.3758 7.30862 11.5954 7.07124 11.7572 6.77814C11.9191 6.48503 12 6.12272 12 5.69117C12 5.37828 11.9538 5.10407 11.8613 4.86852C11.7688 4.63297 11.6354 4.42348 11.4611 4.24007C11.2869 4.05666 11.0779 3.8921 10.8342 3.74645C10.5906 3.60079 10.3158 3.46324 10.0099 3.33379C9.78583 3.24028 9.58486 3.14948 9.40701 3.06138C9.22916 2.97324 9.078 2.88335 8.9535 2.79166C8.829 2.69993 8.73297 2.60283 8.6654 2.50035C8.59783 2.39783 8.56401 2.28186 8.56401 2.15238C8.56401 2.03372 8.59425 1.92672 8.65473 1.83141C8.71521 1.7361 8.80057 1.65431 8.91082 1.58597C9.0211 1.51766 9.15624 1.46459 9.3163 1.42683C9.47639 1.38907 9.6542 1.37021 9.84985 1.37021C9.99211 1.37021 10.1424 1.381 10.3007 1.40255C10.459 1.42414 10.6181 1.45741 10.7782 1.50234C10.9383 1.54731 11.0939 1.60397 11.2451 1.67228C11.3962 1.74062 11.5358 1.81972 11.6639 1.90966V0.29669C11.4042 0.196 11.1206 0.121379 10.8129 0.0728276C10.5052 0.0242758 10.1522 0 9.75382 0C9.34831 0 8.96417 0.0440687 8.60138 0.132172C8.23858 0.220276 7.91935 0.357828 7.64366 0.544828C7.368 0.731862 7.15016 0.970103 6.9901 1.25962C6.83005 1.5491 6.75 1.89524 6.75 2.29803C6.75 2.81231 6.89673 3.25107 7.19018 3.61431C7.4836 3.97752 7.9291 4.285 8.52668 4.53676C8.76143 4.63386 8.98019 4.72914 9.18293 4.82266C9.38567 4.91617 9.56086 5.01328 9.70844 5.11397C9.85606 5.21465 9.97255 5.32434 10.0579 5.44303C10.1433 5.56169 10.186 5.69655 10.186 5.84762C10.186 5.9591 10.1593 6.06248 10.1059 6.15779C10.0526 6.2531 9.97166 6.33579 9.86318 6.40593C9.75471 6.47607 9.61953 6.5309 9.4577 6.57045C9.29584 6.61003 9.10647 6.62979 8.88948 6.62979C8.51956 6.62979 8.15322 6.56417 7.79039 6.4329C7.42759 6.30165 7.09145 6.10476 6.78201 5.84221ZM3.91295 1.58903H6.10227V0.172414H0V1.58903H2.17861V7.89655H3.91295V1.58903Z",fill:"#3178C6"})}),T=()=>(0,y.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 512 512",children:[(0,y.jsx)("polygon",{fill:"#33475A",points:"256 144.03 200.51 47.92 121.08 47.92 256 281.61 390.92 47.92 311.49 47.92 256 144.03"}),(0,y.jsx)("polygon",{fill:"#3FB27F",points:"409.4 47.92 256 313.61 102.6 47.92 15.74 47.92 256 464.08 496.26 47.92 409.4 47.92"})]}),S=()=>(0,y.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:(0,y.jsx)("path",{d:"M20.414,2H5V30H27V8.586ZM7,28V4H19v6h6V28Z",fill:"#3178C6"})}),N=()=>(0,y.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:[(0,y.jsx)("polygon",{points:"5.902 27.201 3.656 2 28.344 2 26.095 27.197 15.985 30 5.902 27.201",fill:"#1572b6"}),(0,y.jsx)("polygon",{points:"16 27.858 24.17 25.593 26.092 4.061 16 4.061 16 27.858",fill:"#33a9dc"}),(0,y.jsx)("polygon",{points:"16 13.191 20.09 13.191 20.372 10.026 16 10.026 16 6.935 16.011 6.935 23.75 6.935 23.676 7.764 22.917 16.282 16 16.282 16 13.191",fill:"#fff"}),(0,y.jsx)("polygon",{points:"16.019 21.218 16.005 21.222 12.563 20.292 12.343 17.827 10.67 17.827 9.24 17.827 9.673 22.68 16.004 24.438 16.019 24.434 16.019 21.218",fill:"#ebebeb"}),(0,y.jsx)("polygon",{points:"19.827 16.151 19.455 20.29 16.008 21.22 16.008 24.436 22.344 22.68 22.391 22.158 22.928 16.151 19.827 16.151",fill:"#fff"}),(0,y.jsx)("polygon",{points:"16.011 6.935 16.011 8.855 16.011 10.018 16.011 10.026 8.555 10.026 8.555 10.026 8.545 10.026 8.483 9.331 8.342 7.764 8.268 6.935 16.011 6.935",fill:"#ebebeb"}),(0,y.jsx)("polygon",{points:"16 13.191 16 15.111 16 16.274 16 16.282 12.611 16.282 12.611 16.282 12.601 16.282 12.539 15.587 12.399 14.02 12.325 13.191 16 13.191",fill:"#ebebeb"})]}),E=()=>(0,y.jsxs)("div",{className:"icon__dots",children:[(0,y.jsx)("svg",{viewBox:"0 0 64 64",children:(0,y.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,y.jsx)("svg",{viewBox:"0 0 64 64",children:(0,y.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,y.jsx)("svg",{viewBox:"0 0 64 64",children:(0,y.jsx)("circle",{transform:"translate(32,32)",r:"6"})})]}),_=(0,r.forwardRef)(((e,n)=>{let{isSelected:t,handleClick:r,title:s,label:o,disabled:i}=e;const c=(0,y.jsx)("button",{title:i?void 0:s,disabled:i,className:"playground__control-button "+(t?"playground__control-button--selected":""),onClick:r,"data-text":o,ref:n,children:o});return i?(0,y.jsx)(x.ZP,{theme:"playground",arrow:!1,placement:"bottom",content:`Unavailable for ${o}`,children:(0,y.jsx)("div",{children:c})}):c})),z=e=>{let{language:n,usageTarget:t,setAndSaveUsageTarget:s,disabled:o}=e;const i=(0,r.useRef)(null),c=m[n];return(0,y.jsx)(_,{isSelected:t===c,handleClick:()=>{s(c,i.current)},title:`Show ${n} code`,label:n,disabled:o,ref:i})};function O(e){let{code:n,title:o,description:i,src:c,size:f="small",mode:b,devicePreview:v,showConsole:w,includeIonContent:O=!0,version:Z}=e;if(!n||0===Object.keys(n).length)return void console.warn("No code usage examples provided for this Playground example.");if(void 0!==b&&"ios"!==b&&"md"!==b)return void console.warn(`Invalid mode provided: ${b}. Accepted values are: "ios" or "md".`);if(void 0===Z)return void console.warn('You must specify a `version` for the Playground example. For example: <Playground version="7" />');const{colorMode:W}=(0,u.I)(),H=(0,j.Z)(),F=(0,r.useRef)(null),U=(0,r.useRef)(null),Y=(0,r.useRef)(null),$=(0,r.useRef)(null),G=(0,r.useRef)(null),{blockElementScrollPositionUntilNextRender:q}=(0,g.o5)(),J=()=>{if(b)return b;if(H){const e=localStorage.getItem(V);if(e)return e}return p.iOS},K=()=>{if(H){const e=localStorage.getItem(R);if(e&&void 0!==n[e])return e}return void 0!==n[m.Angular]?m.Angular:Object.keys(n)[0]},X=A[f]||f,[Q,ee]=(0,r.useState)(K()),[ne,te]=(0,r.useState)(J()),[re,se]=(0,r.useState)({}),[oe,ie]=(0,r.useState)(!1),[ce,ae]=(0,r.useState)(!1),[de,le]=(0,r.useState)("dark"===W),[he,ue]=(0,r.useState)([]),[me,pe]=(0,r.useState)([]),[xe,je]=(0,r.useState)(0),[fe,ge]=(0,r.useState)(!1),be=e=>{te(e),H&&(localStorage.setItem(V,e),window.dispatchEvent(new CustomEvent(L,{detail:e})))},ve=(e,n)=>{ee(e),H&&(localStorage.setItem(R,e),q(n),window.dispatchEvent(new CustomEvent(P,{detail:e})))},ye=async()=>{if(Y.current&&$.current){await Promise.all([M(Y.current),M($.current)]);const e={darkMode:de};Y.current&&Y.current.contentWindow.postMessage(e),$.current&&$.current.contentWindow.postMessage(e)}},we=(e,n)=>{"ios"===n?Y.current=e:$.current=e,Y.current&&$.current&&ye()};(0,r.useEffect)((()=>{le("dark"===W)}),[W]),(0,r.useEffect)((()=>{ye()}),[de]),(0,r.useEffect)((()=>{(async()=>{await Promise.all([M(Y.current),M($.current)]),ae(!0)})()}),[oe]),(0,r.useEffect)((()=>{w&&(Y.current&&Y.current.contentWindow.addEventListener("console",(e=>{pe((n=>[...n,e.detail])),G.current.scrollTo(0,G.current.scrollHeight)})),$.current&&$.current.contentWindow.addEventListener("console",(e=>{ue((n=>[...n,e.detail])),G.current.scrollTo(0,G.current.scrollHeight)})))}),[ce,xe]),(0,r.useEffect)((()=>{t.e(801).then(t.bind(t,801)).then((e=>e.defineCustomElement()))})),(0,r.useEffect)((()=>{new IntersectionObserver((e=>{const n=e[0];ge(n.isIntersecting),n.isIntersecting&&(te(J()),ee(K()),oe||ie(!0))}),{threshold:0}).observe(F.current)}));const De=e=>{const n=e.detail;Object.values(p).includes(n)&&te(n)},Ce=e=>{const n=e.detail;Object.values(m).includes(n)&&ee(n)};(0,r.useEffect)((()=>(H&&fe&&(window.addEventListener(L,De),window.addEventListener(P,Ce)),()=>{window.removeEventListener(L,De),window.removeEventListener(P,Ce)})),[H,fe]);const ke=ne===p.iOS,Ie=ne===p.MD,Te=(0,s.Z)(`${c}?ionic:mode=${p.iOS}`),Se=(0,s.Z)(`${c}?ionic:mode=${p.MD}`);const Ne=void 0!==n[Q]?.files;function Ee(e,n){let t=n;return t=t.replace(/[^a-zA-Z0-9]/g,"_"),`playground_${e}_${t}`}function _e(e){switch(e.slice(e.lastIndexOf(".")+1)){case"ts":case"tsx":return(0,y.jsx)(I,{});case"html":return(0,y.jsx)(k,{});case"vue":return(0,y.jsx)(T,{});case"css":return(0,y.jsx)(N,{});default:return(0,y.jsx)(S,{})}}(0,r.useEffect)((()=>{const e={};Object.keys(n).forEach((t=>{if("function"==typeof n[t]){const r=n[t];e[t]=(0,y.jsx)(r,{})}else if("object"==typeof n[t]){const r={};for(const e of Object.keys(n[t].files)){const s=n[t].files[e];r[`${e}`]=(0,y.jsx)(s,{})}e[t]=r}})),se(e)}),[]);const ze=(0,r.useMemo)((()=>Object.keys(m).sort()),[]);return(0,y.jsxs)("div",{className:"playground",ref:F,children:[(0,y.jsxs)("div",{className:"playground__container "+(w?"playground__container--has-console":""),children:[(0,y.jsxs)("div",{className:"playground__control-toolbar",children:[(0,y.jsx)("div",{className:"playground__control-group",children:ze.map((e=>{const t=m[e],r=void 0!==n[t];return(0,y.jsx)(z,{language:e,usageTarget:Q,setAndSaveUsageTarget:ve,disabled:!r},`code-block-${e}`)}))}),(0,y.jsxs)("div",{className:"playground__control-group",children:[(0,y.jsx)(_,{disabled:b&&"md"===b,isSelected:ke,handleClick:()=>be(p.iOS),title:"iOS mode",label:"iOS"}),(0,y.jsx)(_,{disabled:b&&"ios"===b,isSelected:Ie,handleClick:()=>be(p.MD),title:"MD mode",label:"MD"})]}),(0,y.jsxs)("div",{className:"playground__control-group playground__control-group--end",children:[(0,y.jsx)(x.ZP,{theme:"playground",arrow:!1,placement:"bottom",content:"Open in StackBlitz",children:(0,y.jsx)("button",{className:"playground__icon-button playground__icon-button--primary",onClick:function(e){const t={title:o,description:i,includeIonContent:O,mode:ke?"ios":"md",version:Z},r=U.current.querySelector("code").outerText;switch(Ne&&(t.files=Object.keys(re[Q]).map((e=>{const n=F.current.querySelector(`#${Ee(Q,e)} code`);let t=n.outerText;if(0===t.trim().length){const e=document.createElement("div");e.innerHTML=n.innerHTML,t=e.outerText}return{[e]:t}})).reduce(((e,n)=>({...e,...n})),{}),t.dependencies=n[Q].dependencies),Q){case m.Angular:d(r,t);break;case m.JavaScript:a(r,t);break;case m.React:l(r,t);break;case m.Vue:h(r,t)}},children:(0,y.jsx)("svg",{"aria-hidden":"true",width:"10",height:"14",viewBox:"0 0 10 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,y.jsx)("path",{d:"M5.53812 5.91743L7.52915 1L1 8.01835H4.42601L2.42601 13L9 5.91743H5.53812Z",stroke:"#73849A",strokeLinejoin:"round"})})})}),(0,y.jsx)(x.ZP,{theme:"playground",arrow:!1,placement:"bottom",content:Ne?"For multi-file examples, use the copy buttons on the code blocks":"Copy source code",children:(0,y.jsx)("button",{className:"playground__icon-button playground__icon-button--primary "+(Ne?"playground__icon-button--disabled":""),"aria-disabled":Ne,onClick:function(){if(Ne)return;U.current.querySelector("button").click()},children:(0,y.jsxs)("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[(0,y.jsx)("path",{d:"M2.06667 9V9C1.47756 9 1 8.52244 1 7.93333V3C1 1.89543 1.89543 1 3 1H7.93333C8.52244 1 9 1.47756 9 2.06667V2.06667",stroke:"current"}),(0,y.jsx)("rect",{x:"3",y:"3",width:"8",height:"8",rx:"1.5",stroke:"current"})]})})}),(0,y.jsx)(x.ZP,{theme:"playground",arrow:!1,placement:"bottom",content:"Reset demo",children:(0,y.jsx)("button",{className:"playground__icon-button",onClick:async function(){Y.current&&Y.current.contentWindow.location.reload(),$.current&&$.current.contentWindow.location.reload(),pe([]),ue([]),await Promise.all([B(Y.current),B($.current)]),je((e=>e+1))},children:(0,y.jsxs)("svg",{"aria-hidden":"true",width:"10",height:"12",viewBox:"0 0 10 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,y.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M2.22215 2.96247C3.0444 2.42025 4.01109 2.13084 5 2.13084C5.63538 2.13084 6.08146 2.15202 6.39321 2.18615C6.68142 2.2177 6.92148 2.26571 7.08584 2.36392C7.17445 2.41686 7.31584 2.52988 7.35221 2.73039C7.38869 2.93151 7.29402 3.07964 7.24155 3.14415C7.18678 3.21149 7.126 3.25445 7.09468 3.275C7.07632 3.28704 7.06001 3.29656 7.04754 3.30345C7.0412 3.30696 7.03557 3.30995 7.03082 3.3124C7.02933 3.31317 7.02792 3.31389 7.0266 3.31456C7.0258 3.31496 7.02503 3.31535 7.02429 3.31572C7.02331 3.31621 7.02238 3.31667 7.0215 3.3171L7.02023 3.31773C7.01994 3.31787 7.01905 3.31831 6.81818 2.91589L7.01905 3.31831C6.79385 3.42779 6.52136 3.33637 6.41043 3.11412C6.40662 3.1065 6.40305 3.09881 6.39972 3.09108C6.36829 3.08669 6.33284 3.08224 6.29298 3.07787C6.02849 3.04892 5.61974 3.02804 5 3.02804C4.1909 3.02804 3.39996 3.26482 2.72721 3.70846C2.05447 4.15209 1.53013 4.78264 1.22049 5.52038C0.910864 6.25812 0.82985 7.0699 0.987699 7.85307C1.14555 8.63625 1.53517 9.35564 2.10729 9.92028C2.67942 10.4849 3.40835 10.8694 4.2019 11.0252C4.99546 11.181 5.81801 11.1011 6.56552 10.7955C7.31304 10.4899 7.95195 9.97241 8.40147 9.30847C8.85098 8.64452 9.09091 7.86394 9.09091 7.06542C9.09091 6.81767 9.29442 6.61682 9.54545 6.61682C9.79649 6.61682 10 6.81767 10 7.06542C10 8.04139 9.70675 8.99544 9.15735 9.80692C8.60794 10.6184 7.82705 11.2509 6.91342 11.6244C5.99979 11.9979 4.99445 12.0956 4.02455 11.9052C3.05464 11.7148 2.16373 11.2448 1.46447 10.5547C0.765206 9.86458 0.289002 8.98532 0.0960758 8.02811C-0.0968502 7.07089 0.00216639 6.07871 0.380605 5.17704C0.759043 4.27536 1.3999 3.50469 2.22215 2.96247Z",fill:"#73849A"}),(0,y.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.67859 0.131391C4.8561 -0.0437971 5.1439 -0.0437971 5.32141 0.131391L7.59414 2.37438C7.77165 2.54957 7.77165 2.83361 7.59414 3.00879L5.32141 5.25178C5.1439 5.42697 4.8561 5.42697 4.67859 5.25178C4.50108 5.0766 4.50108 4.79256 4.67859 4.61737L6.6299 2.69159L4.67859 0.765805C4.50108 0.590616 4.50108 0.30658 4.67859 0.131391Z",fill:"#73849A"})]})})}),(0,y.jsx)(x.ZP,{theme:"playground",arrow:!1,placement:"bottom",content:"Report an issue",children:(0,y.jsx)("a",{className:"playground__icon-button",href:"https://github.com/ionic-team/ionic-docs/issues/new/choose","aria-label":"Report an issue",target:"_blank",rel:"noreferrer",children:(0,y.jsx)("svg",{"aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,y.jsx)("path",{d:"M6 0C2.68661 0 0 2.75625 0 6.15268C0 8.87143 1.71964 11.175 4.10357 11.9893C4.14107 11.9973 4.17321 12 4.20536 12C4.42768 12 4.51339 11.8366 4.51339 11.6946C4.51339 11.5473 4.50804 11.1616 4.50536 10.6473C4.28036 10.6982 4.07946 10.7196 3.9 10.7196C2.74554 10.7196 2.48304 9.82232 2.48304 9.82232C2.20982 9.1125 1.81607 8.92232 1.81607 8.92232C1.29375 8.55536 1.81339 8.54464 1.85357 8.54464H1.85625C2.45893 8.59821 2.775 9.18214 2.775 9.18214C3.075 9.70714 3.47679 9.85446 3.83571 9.85446C4.11696 9.85446 4.37143 9.76339 4.52143 9.69375C4.575 9.29732 4.73036 9.02679 4.90179 8.87143C3.57054 8.71607 2.16964 8.18839 2.16964 5.83125C2.16964 5.15893 2.40268 4.60982 2.78571 4.18125C2.72411 4.02589 2.51786 3.39911 2.84464 2.55268C2.84464 2.55268 2.8875 2.53929 2.97857 2.53929C3.19554 2.53929 3.68571 2.62232 4.49464 3.18482C4.97411 3.04821 5.48571 2.98125 5.99732 2.97857C6.50625 2.98125 7.02054 3.04821 7.5 3.18482C8.30893 2.62232 8.79911 2.53929 9.01607 2.53929C9.10714 2.53929 9.15 2.55268 9.15 2.55268C9.47679 3.39911 9.27054 4.02589 9.20893 4.18125C9.59196 4.6125 9.825 5.16161 9.825 5.83125C9.825 8.19375 8.42143 8.71339 7.08482 8.86607C7.29911 9.05625 7.49196 9.43125 7.49196 10.0045C7.49196 10.8268 7.48393 11.4911 7.48393 11.692C7.48393 11.8366 7.56696 12 7.78929 12C7.82143 12 7.85893 11.9973 7.89643 11.9893C10.283 11.175 12 8.86875 12 6.15268C12 2.75625 9.31339 0 6 0Z",fill:"#73849A"})})})})]})]}),oe?[(0,y.jsxs)("div",{className:"playground__preview",children:[!ce&&(0,y.jsx)("div",{className:"playground__loading",children:(0,y.jsx)(E,{})}),v?[(0,y.jsx)("div",{className:ke?"frame-visible":"frame-hidden","aria-hidden":ke?null:"true",children:(0,y.jsx)("device-preview",{mode:"ios",children:(0,y.jsx)("iframe",{height:X,ref:e=>we(e,"ios"),src:Te})})},"ios-iframe"),(0,y.jsx)("div",{className:Ie?"frame-visible":"frame-hidden","aria-hidden":Ie?null:"true",children:(0,y.jsx)("device-preview",{mode:"md",children:(0,y.jsx)("iframe",{height:X,ref:e=>we(e,"md"),src:Se})})},"md-iframe")]:[(0,y.jsx)("iframe",{height:X,className:ke?"":"frame-hidden",ref:e=>we(e,"ios"),src:Te,"aria-hidden":ke?null:"true"},"ios-iframe"),(0,y.jsx)("iframe",{height:X,className:Ie?"":"frame-hidden",ref:e=>we(e,"md"),src:Se,"aria-hidden":Ie?null:"true"},"md-iframe")]]},"preview")]:[]]}),w&&function(){const e=ne===p.iOS?me:he;return(0,y.jsxs)("div",{className:"playground__console",children:[(0,y.jsx)("div",{className:"playground__console-header",children:(0,y.jsx)("code",{children:"Console"})}),(0,y.jsx)("div",{className:"playground__console-body",ref:G,children:0===e.length?(0,y.jsx)("div",{className:"playground__console-item playground__console-item--placeholder",children:(0,y.jsx)("code",{children:"Console messages will appear here when logged from the example above."})}):e.map(((e,n)=>(0,y.jsxs)("div",{className:`playground__console-item playground__console-item--${e.type}`,children:["log"!==e.type&&(0,y.jsx)("div",{className:"playground__console-icon",children:"warning"===e.type?"\u26a0":"\u274c"}),(0,y.jsx)("code",{children:e.message})]},n)))})]})}(),(0,y.jsx)("div",{ref:U,className:"playground__code-block",children:function(){if(n[Q])return Ne?null==re[Q]?null:(0,y.jsx)(D,{groupId:Q,className:"playground__tabs",children:Object.keys(re[Q]).map((e=>(0,y.jsx)(C.Z,{className:"playground__tab-item",value:e,label:e,icon:_e(e),children:(0,y.jsx)("div",{id:Ee(Q,e),children:re[Q][e]})},e)))}):re[Q]}()})]})}const A={xsmall:"100px",small:"200px",medium:"400px",large:"600px",xlarge:"800px"},M=e=>Z(e)?Promise.resolve():new Promise((n=>{e&&e.contentWindow.addEventListener("demoReady",(()=>{n()}))})),B=e=>new Promise((n=>{const t=()=>{e.removeEventListener("load",t),n()};e&&e.addEventListener("load",t)})),Z=e=>!!e&&!0===e.contentWindow.demoReady,R="playground_usage_target",V="playground_mode",P="playground-usage-target-updated",L="playground-event-updated"},85346:(e,n,t)=>{t.d(n,{Z:()=>a});t(67294);var r=t(86010),s=t(44996),o=t(39960);const i={encapsulationPill:"encapsulationPill_weMM"};var c=t(85893);function a(e){let{type:n,...t}=e;const a=(0,s.Z)(`reference/glossary#${n}`);return(0,c.jsx)(o.Z,{to:a,...t,className:(0,r.Z)(t.className,"encapsulation-pill",i.encapsulationPill),children:n})}}}]);