@salesforce-ux/design-system/__internal/chunked/docs/ui/components/datetime-picker/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=function(e){function t(t){for(var i,r,l=t[0],s=t[1],d=t[2],m=0,u=[];m<l.length;m++)r=l[m],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&u.push(n[r][0]),n[r]=0;for(i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i]);for(c&&c(t);u.length;)u.shift()();return o.push.apply(o,d||[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],i=!0,l=1;l<a.length;l++){var s=a[l];0!==n[s]&&(i=!1)}i&&(o.splice(t--,1),e=r(r.s=a[0]))}return e}var i={},n={26:0},o=[];function r(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=i,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(a,i,function(t){return e[t]}.bind(null,i));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var c=s;return o.push([803,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},803:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return A})),a.d(t,"getContents",(function(){return F}));var i=a(0),n=a.n(i),o=a(4),r=a(2),l=a(14),s=a(3),d=a.n(s),c=a(5),m=a.n(c),u=a(1),p=a(23),h=a(24),b=a(26),f=a(11),y=a(29),g=a(7),w=a(8),v=a(17);function x(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var i,n,o=[],r=!0,l=!1;try{for(a=a.call(e);!(r=(i=a.next()).done)&&(o.push(i.value),!t||o.length!==t);r=!0);}catch(e){l=!0,n=e}finally{try{r||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return O(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,i=new Array(t);a<t;a++)i[a]=e[a];return i}var S=function(e){var t=e.dateFormat,a=e.dropdown,o=e.dropdownIsOpen,r=e.hasFocus,l=e.hasError,s=e.isOpen,d=e.isRequired,c=e.isDisabled,b=e.listboxData,y=e.dateDefaultValue,O=e.showRequiredIndicator,S=e.hasTooltip,E=e.showTooltip,_=e.fieldLevelDateMessage,D=e.fieldLevelTimeMessage,k=e.showDateFormat,j=Object(i.useRef)(),T=x(Object(i.useState)(""),2),I=T[0],q=T[1],M=x(Object(i.useState)(""),2),R=M[0],A=M[1],F=x(Object(i.useState)(u.d.uniqueId("example-unique-id-")),1)[0],N=x(Object(i.useState)(u.d.uniqueId("example-unique-id-")),1)[0],L=x(Object(i.useState)(u.d.uniqueId("example-unique-id-")),1)[0];Object(i.useEffect)((function(){j.current&&("id"in j.current&&j.current.id&&q(j.current.id),"ariaChecked"in j.current&&j.current.ariaChecked&&A(j.current.textContent))}),[]);var P={"slds-is-open":o};return n.a.createElement("div",{className:"slds-form"},n.a.createElement("fieldset",{className:m()("slds-form-element slds-form-element_compound",{"slds-has-error":l,"slds-datetimepicker_has-tooltip":E})},n.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},d&&n.a.createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"," "),"Date and Time"),n.a.createElement("div",{className:"slds-form-element__control"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(w.b,{formElementClassName:m()("slds-dropdown-trigger slds-dropdown-trigger_click",P),labelContent:"Date",inputId:F,hasRightIcon:!0,dropdown:a,hasError:l,isRequired:d,showRequiredIndicator:O,hasTooltip:!(!S||!_)&&S,showTooltip:!(!E||!_)&&E,fieldLevelMessage:_,inlineMessage:!l&&t,hasHiddenInlineMessage:!k},n.a.createElement(v.a,{id:F,placeholder:"Select a date…",defaultValue:y,"aria-describedby":l&&F+"-error",required:d,disabled:c}),n.a.createElement(g.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:c})),n.a.createElement(p.b,{id:N,"aria-controls":L,"aria-activedescendant":I,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:l,isDisabled:c,hasTooltip:S&&D?S:null,showTooltip:E&&D?E:null,fieldLevelMessage:D,isOpen:s,rightInputIcon:n.a.createElement(f.a,{symbol:"clock",className:m()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":l,"slds-is-disabled":c}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(h.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:L,snapshot:b,type:"plain",count:6,focusedRef:j}),resultsType:"listbox",hasInteractions:!0,hasFocus:r,value:R})))),l&&n.a.createElement("div",{className:"slds-form-element__help",id:F+"-error"},"Complete this field.")))};S.propTypes={dropdown:d.a.node,dropdownIsOpen:d.a.bool,hasFocus:d.a.bool,isOpen:d.a.bool,isRequired:d.a.bool,hasError:d.a.bool,listboxIsOpen:d.a.bool,listboxData:d.a.object.isRequired,dateDefaultValue:d.a.string,showRequiredIndicator:d.a.bool,isDisabled:d.a.bool,format:d.a.string},S.defaultProps={dropdown:n.a.createElement(y.b,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var E=n.a.createElement(S,{dateFormat:y.a,listboxData:b.x}),_=(b.x,y.a,[{id:"date-example-text-visible",label:"Date and Time - date example text visible",demoStyles:"height: 6rem;",element:n.a.createElement(S,{dropdown:null,listboxData:b.x,dateFormat:y.a,showDateFormat:!0})},{id:"date-selection",label:"Date selected",element:n.a.createElement(S,{dropdown:n.a.createElement(y.b,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:b.x,dateFormat:y.a})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:n.a.createElement(S,{dropdown:n.a.createElement(y.b,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:b.z,dateFormat:y.a})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!1,isRequired:!0,listboxData:b.x,dateFormat:y.a})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!1,hasError:!0,listboxData:b.x})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:b.x})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!0,listboxData:b.x,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023",dateFormat:y.a})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdown:n.a.createElement(y.b,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00 am"}),dropdownIsOpen:!1,dateDefaultValue:"Jan 1 2023",isOpen:!0,hasFocus:!0,hasTooltip:!0,showTooltip:!0,listboxData:b.z,fieldLevelTimeMessage:"Format: hh:mm a | ex: 12:00 AM",dateFormat:y.a})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:n.a.createElement(S,{dropdownIsOpen:!1,listboxData:b.x,isDisabled:!0,dateFormat:y.a})},{id:"mobile",label:"Mobile",element:n.a.createElement(w.b,{labelContent:"Date",inputId:"date-input-id-mobile"},n.a.createElement(v.a,{id:"date-input-id-mobile",type:"datetime-local"}))}]),D=o.c.a,k=o.c.code,j=o.c.h2,T=o.c.h3,I=o.c.li,q=o.c.p,M=o.c.strong,R=o.c.ul,A=function(){return Object(i.createElement)(o.b,{},Object(i.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),Object(i.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 28rem;"},Object(u.f)(E)),j({id:"About-datetime-picker"},"About datetime picker"),T({id:"Implementation"},"Implementation"),q({},"The datetime is two ",D({href:"/components/form-element"},"form elements"),", each containing a label and text ",D({href:"/components/input"},"input"),", and a dropdown ",D({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),Object(i.createElement)(l.a,{type:"warning"},Object(i.createElement)("p",null,"Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.")),q({},"The datetime picker has the following markup requirements:"),q({},M({},"All")),R({},I({},"Follow all accessibility requirements mentioned in the ",D({href:"/components/datepickers"},"Datepicker")," and ",D({href:"/components/timepicker"},"Timepicker")," blueprints.")),q({},M({},"Desktop")),R({},I({},"Add ",k({},".slds-is-open")," to the element with ",k({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),I({},"On the timepicker, the ",k({},".slds-has-focus")," modifier class is required on the ",k({},".slds-listbox__option")," element that has focus."),I({},"On the timepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},".slds-listbox__option")," element that has been selected."),I({},"On the datepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},"td")," element that has the selected day."),I({},"On the datepicker, the ",k({},".slds-is-today")," modifier class is required on the ",k({},"td")," element that is the current day.")),q({},M({},"Mobile")),R({},I({},"When on mobile, we want to leverage the native datetime picker by changing the ",k({},"input")," type from ",k({},"text")," to ",k({},"datetime-local")),I({},"The ",k({},'input type="datetime-local"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes."),I({},"When switching ",k({},'input type="text"')," to ",k({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",R({},I({},"On the element with the class ",k({},"slds-combobox"),", please remove ",k({},'role="combobox"'),", ",k({},"aria-expanded"),", and ",k({},"aria-haspopup"),"."),I({},"On the ",k({},"input")," that we just added ",k({},'type="datetime-local"')," to, please remove ",k({},"aria-controls"),", ",k({},"aria-autocomplete"),", and ",k({},'role="textbox"'),".")))),j({id:"Base"},"Base"),Object(i.createElement)(r.a,{demoStyles:"height: 28rem;"},Object(u.f)(E)),j({id:"States"},"States"),q({},"Adding ",k({},"slds-datetimepicker_has-tooltip")," to the element with ",k({},"slds-form-element_compound")," aligns the legend properly when there is an info tooltip."),T({id:"Date-selection"},"Date selection"),Object(i.createElement)(r.a,{demoStyles:"height: 28rem;"},Object(u.f)(_,"date-selection")),T({id:"Time-selection"},"Time selection"),Object(i.createElement)(r.a,{demoStyles:"height: 28rem;"},Object(u.f)(_,"time-selection")),T({id:"Date-Example-Text-Visible"},"Date Example Text Visible"),Object(i.createElement)(r.a,{demoStyles:"height: 6rem;"},Object(u.f)(_,"date-example-text-visible")),T({id:"Mobile"},"Mobile"),q({},"Mobile example should be viewed in mobile devices for accurate visual representation. It should be noted that due to native device styling, the width of the input will not expand 100% on iOS devices. Learn more about mobile datetime picker in the ",D({href:"/components/datetime-picker/#Implementation"},"mobile implementation")," section above."),Object(i.createElement)(r.a,{demoStyles:"height: 5rem;"},Object(u.f)(_,"mobile")))},F=function(){return Object(o.a)(A())}}});