@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/datepickers/range/example.jsx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},5343:function(e,t,a){a.d(t,{DATE_FORMAT_TEXT:function(){return m},DatePickerElement:function(){return p},SimpleTable:function(){return _}});var l=a(1594),n=a.n(l),d=a(942),r=a.n(d),s=a(6955),i=a(188),c=a(2711),o=a(5526),m="Format: ".concat("12/31/2024"),u=function(e){return n().createElement("div",{"aria-hidden":"false","aria-label":"Date picker: June",className:r()("slds-datepicker",e.className),role:"dialog"},e.children,n().createElement("button",{className:"slds-button slds-align_absolute-center slds-text-link"},"Today"))},E=function(e){return n().createElement("div",{className:"slds-datepicker__filter slds-grid"},n().createElement("div",{className:"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow"},n().createElement("div",{className:"slds-align-middle"},n().createElement(s.A,{assistiveText:"Previous Month",className:"slds-button_icon-container",symbol:"left",title:"Previous Month"})),n().createElement("h2",{"aria-atomic":"false","aria-live":"polite",className:"slds-align-middle",id:"".concat(e.idPrefix,"-month")},"June"),n().createElement("div",{className:"slds-align-middle"},n().createElement(s.A,{assistiveText:"Next Month",className:"slds-button_icon-container",symbol:"right",title:"Next Month"}))),n().createElement("div",{className:"slds-shrink-none"},n().createElement("label",{className:"slds-assistive-text",htmlFor:"".concat(e.idPrefix,"_select")},"Pick a Year"),n().createElement(i.Select,{id:"".concat(e.idPrefix,"_select")},n().createElement("option",null,"2021"),n().createElement("option",null,"2022"),n().createElement("option",null,"2023"))))},f=function(e){return n().createElement("tr",{id:"".concat(e.idPrefix,"-weekdays")},n().createElement("th",{id:"".concat(e.idPrefix,"-Sunday"),scope:"col"},n().createElement("abbr",{title:"Sunday"},"Sun")),n().createElement("th",{id:"".concat(e.idPrefix,"-Monday"),scope:"col"},n().createElement("abbr",{title:"Monday"},"Mon")),n().createElement("th",{id:"".concat(e.idPrefix,"-Tuesday"),scope:"col"},n().createElement("abbr",{title:"Tuesday"},"Tue")),n().createElement("th",{id:"".concat(e.idPrefix,"-Wednesday"),scope:"col"},n().createElement("abbr",{title:"Wednesday"},"Wed")),n().createElement("th",{id:"".concat(e.idPrefix,"-Thursday"),scope:"col"},n().createElement("abbr",{title:"Thursday"},"Thu")),n().createElement("th",{id:"".concat(e.idPrefix,"-Friday"),scope:"col"},n().createElement("abbr",{title:"Friday"},"Fri")),n().createElement("th",{id:"".concat(e.idPrefix,"-Saturday"),scope:"col"},n().createElement("abbr",{title:"Saturday"},"Sat")))},b=function(e){return n().createElement("tr",e,e.children)},g=function(e){return n().createElement("td",{"aria-disabled":e["aria-disabled"],"aria-selected":e["aria-selected"],"aria-current":e["aria-current"],className:r()(e.className,{"slds-day_adjacent-month":e.isAdjacentMonth}),role:"gridcell",tabIndex:e.tabIndex,"aria-label":e["aria-label"]},n().createElement("span",{className:"slds-day"},e.children))},_=function(e){return n().createElement("table",{className:"slds-table","aria-label":"Example table for datepicker"},n().createElement("tbody",null,n().createElement("tr",null,n().createElement("th",null,"Name"),n().createElement("th",null,"Date")),n().createElement("tr",null,n().createElement("td",null,"Order"),n().createElement("td",null,e.children))))},T=function(e){return n().createElement(u,{className:"slds-dropdown slds-dropdown_left"},n().createElement(E,{idPrefix:e.idPrefix}),n().createElement("table",{"aria-multiselectable":"true",className:"slds-datepicker__month",role:"grid"},n().createElement("thead",null,n().createElement(f,{idPrefix:e.idPrefix})),n().createElement("tbody",null,n().createElement(b,null,n().createElement(g,{"aria-selected":"false",isAdjacentMonth:!0,"aria-label":"31 May 2020"},"31"),n().createElement(g,{"aria-selected":"false",tabIndex:"0","aria-label":"1 June 2020"},"1"),n().createElement(g,{"aria-selected":"false","aria-label":"2 June 2020"},"2"),n().createElement(g,{"aria-selected":"false","aria-label":"3 June 2020"},"3"),n().createElement(g,{"aria-selected":"false","aria-label":"4 June 2020"},"4"),n().createElement(g,{"aria-selected":"false","aria-label":"5 June 2020"},"5"),n().createElement(g,{"aria-selected":"false","aria-label":"6 June 2020"},"6")),n().createElement(b,null,n().createElement(g,{"aria-selected":"false","aria-label":"7 June 2020"},"7"),n().createElement(g,{"aria-selected":"false","aria-label":"8 June 2020"},"8"),n().createElement(g,{"aria-selected":"false","aria-label":"9 June 2020"},"9"),n().createElement(g,{"aria-selected":"false","aria-label":"10 June 2020"},"10"),n().createElement(g,{"aria-selected":"false","aria-label":"11 June 2020"},"11"),n().createElement(g,{"aria-selected":"false","aria-label":"12 June 2020"},"12"),n().createElement(g,{"aria-selected":"false","aria-label":"13 June 2020"},"13")),n().createElement(b,null,n().createElement(g,{"aria-selected":"false","aria-label":"14 June 2020"},"14"),n().createElement(g,{"aria-selected":"false","aria-label":"15 June 2020"},"15"),n().createElement(g,{"aria-selected":"false","aria-label":"16 June 2020"},"16"),n().createElement(g,{"aria-selected":"false","aria-label":"17 June 2020"},"17"),n().createElement(g,{"aria-selected":"false","aria-current":e.todayActive?"date":null,className:e.todayActive?"slds-is-today":null,"aria-label":"18 June 2020"},"18"),n().createElement(g,{"aria-selected":"false","aria-label":"19 June 2020"},"19"),n().createElement(g,{"aria-selected":"false","aria-label":"20 June 2020"},"20")),n().createElement(b,{className:r()({"slds-has-multi-selection":"week-4"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},n().createElement(g,{"aria-selected":"false","aria-label":"21 June 2020"},"21"),n().createElement(g,{"aria-selected":"false","aria-label":"22 June 2020"},"22"),n().createElement(g,{"aria-selected":"false","aria-label":"23 June 2020"},"23"),n().createElement(g,{"aria-selected":!e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:r()({"slds-is-selected":"single"===e.dateSelected&&("week-4"===e.dateRange||"week-4-5"===e.dateRange),"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange||"week-4-5"===e.dateRange)}),"aria-label":"24 June 2020"},"24"),n().createElement(g,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:r()({"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange||"week-4-5"===e.dateRange),"slds-is-today":e.todayActiveInRange}),"aria-label":"25 June 2020","aria-current":e.todayActiveInRange?"date":null},"25"),n().createElement(g,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"26 June 2020"},"26"),n().createElement(g,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"27 June 2020"},"27")),n().createElement(b,{className:r()({"slds-has-multi-selection":"week-5"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},n().createElement(g,{"aria-selected":!e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:r()({"slds-is-selected":"single"===e.dateSelected&&"week-5"===e.dateRange,"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-5"===e.dateRange||"week-4-5"===e.dateRange)}),"aria-label":"28 June 2020"},"28"),n().createElement(g,{"aria-selected":"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"29 June 2020"},"29"),n().createElement(g,{"aria-selected":"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"30 June 2020"},"30"),n().createElement(g,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"1 July 2020"},"1"),n().createElement(g,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"2 July 2020"},"2"),n().createElement(g,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"3 July 2020"},"3"),n().createElement(g,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"4 July 2020"},"4")))))},p=function(e){return n().createElement(c.ZS,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click"+(null!=e&&e.isOpen?" slds-is-open":""),labelContent:e.labelContent,inputId:e.dateInputId,hasRightIcon:!0,hasError:e.hasError,isRequired:e.isRequired,isDisabled:e.isDisabled,hasTooltip:e.hasTooltip,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage,inlineMessage:!e.hasError&&e.dateFormat,hasHiddenInlineMessage:!e.showDateFormat,dropdown:!e.isDisabled&&n().createElement(T,{idPrefix:e.idPrefix,todayActive:e.todayActive,todayActiveInRange:e.todayActiveInRange,dateSelected:e.dateSelected,dateRange:e.dateRange,dateRangeMulti:e.dateRangeMulti})},n().createElement(o.A,{id:e.dateInputId,placeholder:" ",defaultValue:e.defaultValue,required:e.isRequired,disabled:e.isDisabled}),n().createElement(s.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:e.isDisabled}))}},9983:function(e,t,a){a.r(t),a.d(t,{examples:function(){return m},states:function(){return o}});var l=a(1594),n=a.n(l),d=a(5343),r="date-input-id-01",s="date-input-id-02",i="height: 25rem;",c=function(e){return n().createElement("div",{className:"slds-form slds-form_compound"},n().createElement("fieldset",{className:"slds-form-element"},n().createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},"Start and End Date"),n().createElement("div",{className:"slds-form-element__control"},n().createElement("div",{className:"slds-form-element__group"},n().createElement("div",{className:"slds-form-element__row"},e.children)))))};t.default=[{id:"default",label:"Base - Default",demoStyles:i,element:n().createElement(c,null,n().createElement(d.DatePickerElement,{idPrefix:"rangeDefault_start",labelContent:"Start Date",dateInputId:"".concat(r,"-default"),isOpen:!0,todayActive:!0,dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"rangeDefault_end",labelContent:"End Date",dateInputId:"".concat(s,"-default"),dateFormat:d.DATE_FORMAT_TEXT}))}];var o=[{id:"start-date",label:"Start date selected",demoStyles:i,element:n().createElement(c,null,n().createElement(d.DatePickerElement,{idPrefix:"rangeSelected_start",labelContent:"Start Date",dateInputId:"".concat(r,"-start_selected"),isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"rangeSelected_end",labelContent:"End Date",dateInputId:"".concat(s,"-start_selected"),dateFormat:d.DATE_FORMAT_TEXT}))},{id:"end-date-week",label:"End date selected (Same week)",demoStyles:i,element:n().createElement(c,null,n().createElement(d.DatePickerElement,{idPrefix:"rangeWeekSame_start",labelContent:"Start Date",dateInputId:"".concat(r,"-end_selected"),defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"rangeWeekSame_end",labelContent:"End Date",dateInputId:"".concat(s,"-end_selected"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4",defaultValue:"06/27/2020",dateFormat:d.DATE_FORMAT_TEXT}))},{id:"end-date-weeks",label:"End date selected (Different week)",demoStyles:i,element:n().createElement(c,null,n().createElement(d.DatePickerElement,{idPrefix:"rangeWeekDiff_start",labelContent:"Start Date",dateInputId:"".concat(r,"-end_selected_diff_week"),defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"rangeWeekDiff_end",labelContent:"End Date",dateInputId:"".concat(s,"-end_selected_diff_week"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:d.DATE_FORMAT_TEXT}))},{id:"today-in-range",label:"Today - In selected range",demoStyles:i,element:n().createElement(c,null,n().createElement(d.DatePickerElement,{idPrefix:"rangeToday_start",labelContent:"Start Date",dateInputId:"".concat(r,"-today_in_range"),defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"rangeToday_end",labelContent:"End Date",dateInputId:"".concat(s,"-today_in_range"),isOpen:!0,todayActiveInRange:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:d.DATE_FORMAT_TEXT}))},{id:"span-across-month-in-range",label:"Current and adjacent month in selected range",demoStyles:i,element:n().createElement(c,null,n().createElement(d.DatePickerElement,{idPrefix:"rangeSpanMonth_start",labelContent:"Start Date",dateInputId:"".concat(r,"-adjacent_month"),defaultValue:"06/28/2020",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"rangeSpanMonth_end",labelContent:"End Date",dateInputId:"".concat(s,"-adjacent_month"),isOpen:!0,dateSelected:!0,dateRange:"week-5",defaultValue:"07/04/2020",dateFormat:d.DATE_FORMAT_TEXT}))}],m=[{id:"table_default",label:"Default in a Data Table",demoStyles:i,element:n().createElement(c,null,n().createElement(d.SimpleTable,null,n().createElement(d.DatePickerElement,{idPrefix:"tableRangeDefault_start",labelContent:"Start Date",dateInputId:"".concat(r,"-default"),isOpen:!0,todayActive:!0,dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"tableRangeDefault_end",labelContent:"End Date",dateInputId:"".concat(s,"-default"),dateFormat:d.DATE_FORMAT_TEXT})))},{id:"table_start-date",label:"Start date selected in a Data Table",demoStyles:i,element:n().createElement(c,null,n().createElement(d.SimpleTable,null,n().createElement(d.DatePickerElement,{idPrefix:"tableRangeSelected_start",labelContent:"Start Date",dateInputId:"".concat(r,"-table-start_selected"),isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"tableRangeSelected_end",labelContent:"End Date",dateInputId:"".concat(s,"-table-start_selected"),dateFormat:d.DATE_FORMAT_TEXT})))},{id:"table_end-date-week",label:"End date selected (Same week) in a Data Table",demoStyles:i,element:n().createElement(c,null,n().createElement(d.SimpleTable,null,n().createElement(d.DatePickerElement,{idPrefix:"tableRangeWeekSame_start",labelContent:"Start Date",dateInputId:"".concat(r,"-table-end_selected"),defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"tableRangeWeekSame_end",labelContent:"End Date",dateInputId:"".concat(s,"-table-end_selected"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4",defaultValue:"06/27/2020",dateFormat:d.DATE_FORMAT_TEXT})))},{id:"table_end-date-weeks",label:"End date selected (Different week) in a Data Table",demoStyles:i,element:n().createElement(c,null,n().createElement(d.SimpleTable,null,n().createElement(d.DatePickerElement,{idPrefix:"tableRangeWeekDiff_start",labelContent:"Start Date",dateInputId:"".concat(r,"-table-end_selected_diff_week"),defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"tableRangeWeekDiff_end",labelContent:"End Date",dateInputId:"".concat(s,"-table-end_selected_diff_week"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:d.DATE_FORMAT_TEXT})))},{id:"table_today-in-range",label:"Today - In selected range in a Data Table",demoStyles:i,element:n().createElement(c,null,n().createElement(d.SimpleTable,null,n().createElement(d.DatePickerElement,{idPrefix:"tableRangeToday_start",labelContent:"Start Date",dateInputId:"".concat(r,"-table-today_in_range"),defaultValue:"06/24/2021",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"tableRangeToday_end",labelContent:"End Date",dateInputId:"".concat(s,"-table-today_in_range"),isOpen:!0,todayActiveInRange:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:d.DATE_FORMAT_TEXT})))},{id:"table_span-across-month-in-range",label:"Current and adjacent month in selected range in a Data Table",demoStyles:i,element:n().createElement(c,null,n().createElement(d.SimpleTable,null,n().createElement(d.DatePickerElement,{idPrefix:"tableRangeSpanMonth_start",labelContent:"Start Date",dateInputId:"".concat(r,"-table-adjacent_month"),defaultValue:"06/28/2020",dateFormat:d.DATE_FORMAT_TEXT}),n().createElement(d.DatePickerElement,{idPrefix:"tableRangeSpanMonth_end",labelContent:"End Date",dateInputId:"".concat(s,"-table-adjacent_month"),isOpen:!0,dateSelected:!0,dateRange:"week-5",defaultValue:"07/04/2020",dateFormat:d.DATE_FORMAT_TEXT})))}]}},a={};function l(e){var n=a[e];if(void 0!==n)return n.exports;var d=a[e]={exports:{}};return t[e](d,d.exports,l),d.exports}l.m=t,l.amdO={},e=[],l.O=function(t,a,n,d){if(!a){var r=1/0;for(o=0;o<e.length;o++){a=e[o][0],n=e[o][1],d=e[o][2];for(var s=!0,i=0;i<a.length;i++)(!1&d||r>=d)&&Object.keys(l.O).every(function(e){return l.O[e](a[i])})?a.splice(i--,1):(s=!1,d<r&&(r=d));if(s){e.splice(o--,1);var c=n();void 0!==c&&(t=c)}}return t}d=d||0;for(var o=e.length;o>0&&e[o-1][2]>d;o--)e[o]=e[o-1];e[o]=[a,n,d]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=5933,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,3511:0,4268:0,4583:0,4723:0,4924:0,5933:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};l.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,d,r=a[0],s=a[1],i=a[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(n in s)l.o(s,n)&&(l.m[n]=s[n]);if(i)var o=i(l)}for(t&&t(a);c<r.length;c++)d=r[c],l.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return l.O(o)},a=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),l.nc=void 0;var n=l.O(void 0,[6790],function(){return l(9983)});n=l.O(n),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/datepickers/range/example.jsx.js"]=n}();