{"id":414,"date":"2019-10-06T17:32:57","date_gmt":"2019-10-06T07:32:57","guid":{"rendered":"https:\/\/learntodroid.com\/?p=414"},"modified":"2021-01-13T09:44:57","modified_gmt":"2021-01-12T23:44:57","slug":"how-to-disable-dates-in-a-datepicker-for-android","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-disable-dates-in-a-datepicker-for-android\/","title":{"rendered":"How to Disable Dates in a DatePicker for Android"},"content":{"rendered":"\n<p>When I have built Android apps in the past I have run into situations where I need to capture a date within the app from the user, like for example capturing the date for a customer&#8217;s appointment. Entering a date into a simple EditText field is not a great user experience so Android have created a <a href=\"https:\/\/developer.android.com\/reference\/android\/widget\/DatePicker\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">DatePicker widget<\/a> that will present the user with a much nicer calendar display to cycle through the months and years and select a particular date from a given month.<\/p>\n\n\n\n<p>When getting the user to capture a date, you may want to restrict what dates in that calendar that they can select. Like if you want to capture a customer&#8217;s appointment date, they won&#8217;t be booking an appointment for a date that is already in the past. Rather than have the user select the date then validating the date and presenting the user with an error message if the date is not allowed to be chosen, what if there is a better way to disable dates such as dates in the past from being selected?<\/p>\n\n\n\n<p><strong>The Android DatePicker allows you to prevent dates in the past from being selected by using the <a href=\"https:\/\/developer.android.com\/reference\/android\/widget\/DatePicker.html#setMinDate(long)\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">setMinDate(long minDate)<\/a> method. To disable dates in the past from being selected, follow the 2 steps below.<\/strong><\/p>\n\n\n\n<ol><li><strong>Use the java.util.Calendar class to obtain the current date  in milliseconds since January 1, 1970 using Calendar.getInstance().getTimeInMillis()<\/strong><\/li><li><strong>Using the DatePicker created in the layout resource, use the setMinDate(long minDate) and pass the value above as a parameter<\/strong><\/li><\/ol>\n\n\n\n<p>I have created a code sample below, which is also <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/learntodroid?tab=repositories\" target=\"_blank\">accessible on GitHub<\/a>, showing how to <a href=\"https:\/\/github.com\/learntodroid\/DatePicker\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">set a minimum date in the Android DatePicker<\/a>, where all dates before this minimum date will be disabled.<\/p>\n\n\n\n<p>In addition to this, I have also researched how you could achieve the following with a DatePicker:<\/p>\n\n\n\n<ul><li>Disabling all dates outside the range of two dates<\/li><li>Disabling all dates before a specific date<\/li><li>Disabling specific days of the week or dates during the year such as public holidays in the DatePicker<\/li><\/ul>\n\n\n\n<p>Let&#8217;s dive in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting a Minimum Selectable Date in the Android DatePicker<\/h2>\n\n\n\n<p>By setting a minimum selectable date on your DatePicker using the setMinDate(&#8230;) method, the dates before that will become greyed out and not selectable in the Calendar.<\/p>\n\n\n\n<p>You can view this entire source code for this example in the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/learntodroid\/DatePicker\" target=\"_blank\">DatePicker project<\/a> on the <a href=\"https:\/\/github.com\/learntodroid?tab=repositories\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">LearnToDroid GitHub account<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the Layout Resource<\/h3>\n\n\n\n<p>The layout for this example is a LinearLayout with a vertical orientation that includes:<\/p>\n\n\n\n<ul><li>A DatePicker, which will be used for selecting a particular date from a calendar view<\/li><li>A TextView, which will show the date that has been selected once the user selects a particular Button<\/li><li>A Button, which when pressed will update the TextView with the date which was last selected in the DatePicker<\/li><\/ul>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/7772a9c1a08e70d0a71c16dde155c15d.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Create the Main Activity Class<\/h3>\n\n\n\n<p>The Activity class for this example is quite simple, it includes:<\/p>\n\n\n\n<ul><li>Setting up a listener for the Button, to use the DatePicker&#8217;s getMonth(), getDayOfMonth() (NOTE: getDayOfMonth() returns 0 for January and 1 for February, etc.) and getYear() methods to show the selected date in the TextView<\/li><li>Use of the Calendar class to obtain the current date using the  Calendar.getInstance() method and converting it to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Unix_time\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Unix time<\/a> using the getTimeInMillis() method<\/li><li>Using the setMinDate(&#8230;) method on the DatePicker class to grey out and disable the selection of dates that occured before the time value passed as a parameter<\/li><\/ul>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/d9dd78cfbbd849bd09e5a1f7f79352a0.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Example Screenshot<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335860-576x1024.png\" alt=\"\" class=\"wp-image-433\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335860-576x1024.png 576w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335860-169x300.png 169w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335860-768x1365.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335860.png 1440w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><figcaption>DatePicker with dates in the past disabled<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DatePicker with only Days Between Two Dates Selectable<\/h2>\n\n\n\n<p>The Android DatePicker also allows you to set both a minimum and maximum date which will prevent dates outside that range from being selected.<\/p>\n\n\n\n<p>You can view this entire source code for this example in the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/learntodroid\/DatePicker\" target=\"_blank\">DatePicker project<\/a> on the <a href=\"https:\/\/github.com\/learntodroid?tab=repositories\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">LearnToDroid GitHub account<\/a>. <\/p>\n\n\n\n<p>We will be reusing the same layout resource from the example above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the Main Activity Class<\/h3>\n\n\n\n<p>The Activity class for this example is very similar to the example above, a few key differences include:<\/p>\n\n\n\n<ul><li>Two dates are being used in this example, the first date is two days before the current date, the second date is two days after the current date<\/li><li>The add method is used on the Calendar class to add and subtract days (Calendar.DATE refers to days) from the current date<\/li><li>Both setMinDate(..) and setMaxDate(&#8230;) are used on the DatePicker to disable the selection of dates that sit outside of the two dates provided<\/li><\/ul>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/82f1356555ccd4cfed15f3e96b47a8c1.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Example Screenshot<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335974-576x1024.png\" alt=\"\" class=\"wp-image-434\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335974-576x1024.png 576w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335974-169x300.png 169w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335974-768x1365.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570335974.png 1440w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><figcaption>DatePicker with a date range of two days before and after the current date selectable<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DatePicker with only Dates in the Past Selectable<\/h2>\n\n\n\n<p>To make only dates in the past selectable using the DatePicker set the maximum date on the DatePicker to the current date. This will prevent you from selecting the current day and days in the future.<\/p>\n\n\n\n<p>If you want to allow the current day to be selected as well, set the maximum date to tomorrow&#8217;s date.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DatePicker with only Week Days Selectable<\/h2>\n\n\n\n<p>Making only week days selectable in the DatePicker is not supported out of the box. There is however an alternative available to support this requirement. You can use a different DatePicker widget made for Android called <a href=\"https:\/\/github.com\/wdullaer\/MaterialDateTimePicker\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">MaterialDateTimePicker<\/a>.<\/p>\n\n\n\n<p>One thing to note with MaterialDateTimePicker is that <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/wdullaer\/MaterialDateTimePicker\/issues\/338\" target=\"_blank\">it relies on AndroidX<\/a> to work, so you need to configure your Gradle file using the instructions on the <a href=\"https:\/\/github.com\/wdullaer\/MaterialDateTimePicker#how-do-i-use-a-different-version-of-a-support-library-in-my-app\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">README<\/a> page to avoid running into conflicts during the build process.<\/p>\n\n\n\n<p>In order to restrict the dates to week days only follow the steps below.<\/p>\n\n\n\n<ol><li>Pick the date you want to start from in the MaterialDateTimePicker, if you want to use the current date it can be obtained using the Calendar.<em>getInstance<\/em>() method<\/li><li>Pick the number of days you would like to be selectable in the future<\/li><li>Check each date from the start date to the final date if they fall on a week day using the day.get(Calendar.DAY_OF_WEEK) method and add they do add them into a collection of Calendar days<\/li><li>Convert the collection of week days to an Calendar[]<\/li><li>Initialise a DatePickerDialog by creating a new instance<\/li><li>Call the setSelectableDays(selectableDays) method on the DatePickerDialog and pass the array of week days<\/li><\/ol>\n\n\n\n<p>You can view this entire source code for this example in the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/learntodroid\/MaterialDatePicker\" target=\"_blank\">MaterialDatePicker project<\/a> on the <a href=\"https:\/\/github.com\/learntodroid?tab=repositories\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">LearnToDroid GitHub account<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configure the app build.gradle file to install MaterialDateTimePicker<\/h3>\n\n\n\n<p><\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/52268a71ccef9978c6d17eab5de650cc.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Setup the Main Activity and Layout Resource<\/h3>\n\n\n\n<p>The Activity class for this example includes a single tab TabLayout and a ViewPager of a single Fragment. This Fragment will be where the DatePickerDialog is instantiated. You can also use the DatePickerDialog in a Activity directly as well, check the <a href=\"https:\/\/github.com\/wdullaer\/MaterialDateTimePicker\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">GitHub page<\/a> for the library for code samples on how to do this. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Main Activity Layout<\/h4>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/c249c63527bbcc403637d2bc967e8cc4.js\"><\/script><\/p>\n\n\n<h4 class=\"wp-block-heading\">Main Activity<\/h4>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/d8d4a5b812ef221f24cf09e870cf6e5f.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Setup the Date Picker Dialog Fragment and Layout Resource<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Date Picker Dialog Fragment Layout<\/h4>\n\n\n\n<p>The Fragment where we are going create the DatePickerDialog in this example has three buttons.<\/p>\n\n\n\n<ul><li>The first button that will start the DatePickerDialog in the default mode<\/li><li>The second button that will start the DatePickerDialog with only weekends from the current date to 365 days in the future selectable<\/li><li>The third button that will start the DatePickerDialog with only week days from the current date to 365 days in the future selectable <\/li><\/ul>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/f349f9509444202f74023e2e4d30d040.js\"><\/script><\/p>\n\n\n<h4 class=\"wp-block-heading\"> Date Picker Dialog Fragment<\/h4>\n\n\n\n<p>When creating the DatePickerDialog for week days only the example code performs the following:<\/p>\n\n\n\n<ul><li>It creates a new DatePickerDialog or initialises an existing DatePickerDialog into a default state<\/li><li>It uses the Calendar class to check each date from today to 365 days in the future to verify if it is a week day by checking it does not fall on Calendar.SATURDAY or Calendar.SUNDAY<\/li><li>If it doesn&#8217;t fall on a weekend it gets added to an ArrayList<\/li><li>Once complete, it converts the ArrayList into a Calendar[] and uses the  setSelectableDays(&#8230;) method on the DatePickerDialog to restrict the selectable days to week days only<\/li><\/ul>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/2b7583b2dbffb2a24ccee274bc890d4b.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Example Screenshots <\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340574-576x1024.png\" alt=\"\" class=\"wp-image-445\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340574-576x1024.png 576w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340574-169x300.png 169w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340574-768x1365.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340574.png 1440w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><figcaption>The default DatePickerDialog<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340569-576x1024.png\" alt=\"\" class=\"wp-image-443\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340569-576x1024.png 576w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340569-169x300.png 169w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340569-768x1365.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340569.png 1440w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><figcaption> DatePickerDialog with only week days on or after the current date selectable<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DatePicker with only Week Ends Selectable <\/h2>\n\n\n\n<p>It is also possible using the  MaterialDateTimePicker  to restrict the selectable days to be weekends only. Follow the sample solution above for selecting only days but instead of checking if the day is a week day before adding it to the collection, check if it is a week day by comparing it to Calendar.Saturday or Calendar.Sunday.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example Screenshots<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340566-576x1024.png\" alt=\"\" class=\"wp-image-444\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340566-576x1024.png 576w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340566-169x300.png 169w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340566-768x1365.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2019\/10\/Screenshot_1570340566.png 1440w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><figcaption>  DatePickerDialog with only weekends on are after the current date selectable <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DatePicker or MaterialDateTimePicker for Disabling Dates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">When to use DatePicker<\/h3>\n\n\n\n<ol><li>If you need to disable dates before a specific date<\/li><li>If you need to disable dates after a specific date<\/li><li>If you need to disable dates within a range of two dates<\/li><li>If you need to disable dates outside a range of two dates <\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">When to use MaterialDateTimePicker<\/h3>\n\n\n\n<ol><li>If you need to disable specific individual dates from selection for example public holidays<\/li><li>If you need to disable a specific category of dates such as weekends, weekdays, Mondays, first days of the month, etc.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Related Questions<\/h2>\n\n\n\n<p><strong>Question:<\/strong> How could you prevent specific dates in a year such as a public holidays from being selected?<\/p>\n\n\n\n<p><strong>Answer:<\/strong> The DatePicker widget does not support the ability to disable specific dates, instead I would use the MaterialDateTimePicker to allow you to prevent individual dates from being selected.<\/p>\n\n\n\n<p>You will need to create a collection of these public holidays, if you don&#8217;t have this data you would probably want use a public holidays API,  Calendarific offers a <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/calendarific.com\/\" target=\"_blank\">free holidays API<\/a> for a limited amount of requests for non commercial use but there are other paid services like the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.timeanddate.com\/services\/api\/holiday-api.html\" target=\"_blank\">holiday API offered by timeanddate<\/a> the programmable web has a good <a href=\"https:\/\/www.programmableweb.com\/api\/time-and-date-holidays\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">list of holiday APIs<\/a> to select from.<\/p>\n\n\n\n<p>After creating a new instance of the DatePickerDialog, use the setDisabledDays(disabledDays) method and pass the array of public holidays (in Calendar form).<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSe4aAItLWeIpKkTXMsbK3zMJFyWeY33iJeGDkrbcs8HXzlhoQ\/viewform?embedded=true\" width=\"640\" height=\"395\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading\u2026<\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>When I have built Android apps in the past I have run into situations where I need to capture a date within the app from the user, like for example<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[12],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/414"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=414"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/414\/revisions"}],"predecessor-version":[{"id":4927,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/414\/revisions\/4927"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=414"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}