{"id":3855,"date":"2022-09-12T18:41:22","date_gmt":"2022-09-12T09:41:22","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=3855"},"modified":"2022-09-15T12:28:21","modified_gmt":"2022-09-15T03:28:21","slug":"materialui-mobiledatepicker-shoulddisabledate","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=3855","title":{"rendered":"<small>MaterialUI:  MobileDatePicker &#8211; shouldDisableDate<\/small>"},"content":{"rendered":"<p>1. modules<\/p>\n<pre>\r\n @mui\/x-date-pickers@5.0.0-beta.7\r\n<\/pre>\n<p>2. import<\/p>\n<pre>\r\nimport { LocalizationProvider } from '@mui\/x-date-pickers\/LocalizationProvider';\r\nimport { AdapterDayjs } from '@mui\/x-date-pickers\/AdapterDayjs';\r\nimport { MobileDatePicker } from '@mui\/x-date-pickers\/MobileDatePicker';\r\n<\/pre>\n<p>3. Confirm shouldDisableDate date argument<\/p>\n<pre>\r\n&lt;MobileDatePicker\r\n shouldDisableDate={(date) => \r\n  console.log(date.$d.getFullYear()+('-')+(date.$d.getMonth()+1)+('-')+date.$d.getDate() )}\r\n\/>\r\n<\/pre>\n<p>4. console log<br \/>\n&#8211; Latest available date<br \/>\n&#8211; loop for number of days displayed<\/p>\n<pre>\r\n2022-9-14 MaterialUIPickers.tsx:72:49\r\n2022-8-28 MaterialUIPickers.tsx:72:49\r\n2022-8-29 MaterialUIPickers.tsx:72:49\r\n2022-8-30 MaterialUIPickers.tsx:72:49\r\n2022-8-31 MaterialUIPickers.tsx:72:49\r\n2022-9-1 MaterialUIPickers.tsx:72:49\r\n2022-9-2 MaterialUIPickers.tsx:72:49\r\n2022-9-3 MaterialUIPickers.tsx:72:49\r\n2022-9-4 MaterialUIPickers.tsx:72:49\r\n2022-9-5 MaterialUIPickers.tsx:72:49\r\n2022-9-6 MaterialUIPickers.tsx:72:49\r\n2022-9-7 MaterialUIPickers.tsx:72:49\r\n2022-9-8 MaterialUIPickers.tsx:72:49\r\n2022-9-9 MaterialUIPickers.tsx:72:49\r\n2022-9-10 MaterialUIPickers.tsx:72:49\r\n2022-9-11 MaterialUIPickers.tsx:72:49\r\n2022-9-12 MaterialUIPickers.tsx:72:49\r\n2022-9-13 MaterialUIPickers.tsx:72:49\r\n2022-9-14 MaterialUIPickers.tsx:72:49\r\n2022-9-15 MaterialUIPickers.tsx:72:49\r\n2022-9-16 MaterialUIPickers.tsx:72:49\r\n2022-9-17 MaterialUIPickers.tsx:72:49\r\n2022-9-18 MaterialUIPickers.tsx:72:49\r\n2022-9-19 MaterialUIPickers.tsx:72:49\r\n2022-9-20 MaterialUIPickers.tsx:72:49\r\n2022-9-21 MaterialUIPickers.tsx:72:49\r\n2022-9-22 MaterialUIPickers.tsx:72:49\r\n2022-9-23 MaterialUIPickers.tsx:72:49\r\n2022-9-24 MaterialUIPickers.tsx:72:49\r\n2022-9-25 MaterialUIPickers.tsx:72:49\r\n2022-9-26 MaterialUIPickers.tsx:72:49\r\n2022-9-27 MaterialUIPickers.tsx:72:49\r\n2022-9-28 MaterialUIPickers.tsx:72:49\r\n2022-9-29 MaterialUIPickers.tsx:72:49\r\n2022-9-30 MaterialUIPickers.tsx:72:49\r\n2022-10-1 MaterialUIPickers.tsx:72:49\r\n<\/pre>\n<p>5. Disable Wednesday selection<\/p>\n<table>\n<thead>\n<tr>\n<td>\nOriginal state\n<\/td>\n<td>\nDisable Wednesday selection\n<\/td>\n<\/td>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<img decoding=\"async\" loading=\"lazy\" width=\"321\" height=\"492\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220912-1-1.png\" alt=\"\" class=\"alignnone size-medium wp-image-3863\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220912-1-1.png 321w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220912-1-1-196x300.png 196w\" sizes=\"(max-width: 321px) 100vw, 321px\" \/>\n<\/td>\n<td>\n<img decoding=\"async\" loading=\"lazy\" width=\"321\" height=\"495\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220912-2.png\" alt=\"\" class=\"alignnone size-medium wp-image-3859\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220912-2.png 321w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220912-2-195x300.png 195w\" sizes=\"(max-width: 321px) 100vw, 321px\" \/>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<pre>\r\nfunction shouldDisableDate(date){\r\n  return false;\r\n}\r\n\r\n\r\n\r\n<\/pre>\n<\/td>\n<td>\n<pre>\r\nfunction shouldDisableDate(date){\r\n  if(date.$d.getDay() === 3) {\r\n    return true;\r\n  }\r\n  return false;\r\n}\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>1. modules @mui\/x-date-pickers@5.0.0-beta.7 2. import import { LocalizationProvider } from &#8216;@mui\/x-date-picker&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3855"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3855"}],"version-history":[{"count":30,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3855\/revisions"}],"predecessor-version":[{"id":3857,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3855\/revisions\/3857"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}