Android Date Range Picker

While developing a calender related Android app, selection of a date range is one of the most basic things one can think of. But sadly, with Android’s native date picker we cannot select a range of dates. Nor we can select multiple dates. Although to solve this, you can use two DatePickerDialogs, but a better solution would be to make use of a calender picker to select a date range. As you may know Android has a CalendarView widget to display calendars. But even this widget does not support multiple date selection or a date range selection. Therefore it is suggested to go for Android Times Square library by Square, Inc.

Android times square library mainly offers two great features on top of a normal calendar view. First it allows us to select a range of dates in Android. Second it allows us to select multiple dates, in no relation to each other(will get to this part later in the tutorial). There are many use cases where we have to select date ranges. First example that I can think of is an airline ticket booking app. Where you have to select a departure date and an arrival date. There are many such situations where this Android Times Square library can greatly reduce your development effort. Although if you still wish to use standard picker, you can refer to Date Picker Example.

Android Date Range Picker by TimesSquare Library

Once you have decided to use TimesSquare library, for selecting a date range in your android app. Implementing this library and using it, is not that difficult. First include its dependency in the gradle file:

compile 'com.squareup:android-times-square:1.5.0@aar'

Next include com.squareup.timessquare.CalendarPickerView tag, in the layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MainActivity">

    <com.squareup.timessquare.CalendarPickerView
        android:id="@+id/calendar_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

Further initialize it, in the onCreate section of your activity:

package com.truiton.daterangepicker;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.squareup.timessquare.CalendarPickerView;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;


public class MainActivity extends ActionBarActivity {
    private CalendarPickerView calendar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Calendar nextYear = Calendar.getInstance();
        nextYear.add(Calendar.YEAR, 1);

        calendar = (CalendarPickerView) findViewById(R.id.calendar_view);
        Date today = new Date();
        calendar.init(today, nextYear.getTime())
                .withSelectedDate(today)
                .inMode(CalendarPickerView.SelectionMode.RANGE);
        calendar.highlightDates(getHolidays());
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case R.id.action_settings:
                return true;
            case R.id.action_next:
                ArrayList<Date> selectedDates = (ArrayList<Date>)calendar
                        .getSelectedDates();
                Toast.makeText(MainActivity.this, selectedDates.toString(),
                        Toast.LENGTH_LONG).show();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    private ArrayList<Date> getHolidays(){
        SimpleDateFormat sdf = new SimpleDateFormat("dd-M-yyyy");
        String dateInString = "21-04-2015";
        Date date = null;
        try {
            date = sdf.parse(dateInString);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        ArrayList<Date> holidays = new ArrayList<>();
        holidays.add(date);
        return holidays;
    }
}

This would give a great looking Android calendar view with an option to pick a range of dates, as shown below:

Also in the above example, I used a menu action button to finally select the dates. Here for the sake of simplicity I displayed them in a Toast message. But in your app, you can fire an Intent to launch another activity or return the results back to the calling activity.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context=".MainActivity">
    <item android:id="@+id/action_next"
          android:title="Next"
          app:showAsAction="ifRoom"  />
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          android:orderInCategory="100"
          app:showAsAction="never"/>
</menu>

Now lets understand how this CalendarPickerView widget is displayed. This widget can be customized to show only a range of dates for selection. For example if you want to restrict the user from selecting dates outside a range, you can do so from Android TimesSquare Library. As this library provides an easy init method which uses the start and end dates parameter to impose date restrictions in the calendar view. Although, don’t confuse this feature with the actual Android date range selection feature. As shown above, by the usage of .inMode(CalendarPickerView.SelectionMode.RANGE), the displayed CalendarPickerView will be selecting a range of dates.

Highlighting  Dates in an Android Date Picker

Another great feature of Android date range picker library by Square is, highlighting dates. Yes with TimesSquare you can highlight dates by adding the “to be highlighted” dates in a collection and specifying them through CalendarPickerView.highlightDates method. This feature can be used to specify the holidays in a calendar, as shown in the example above, or can be used to highlight some special days as per your requirement. I randomly chose 21/04/15 and highlighted it as holiday in the above date range picker calendar.

Picking Multiple Dates from the Calendar

As I said above this date range picker library is customizable and can be used to pick multiple dates as well. Android TimesSquare library has a selection mode parameter which can be used to specify this. To select multiple dates through this library just use .inMode(CalendarPickerView.SelectionMode.MULTIPLE)  method in the code above while initializing the CalendarPickerView by the init method. It will give you a calendar where you will be able to select multiple dates with no relation between them. As shown in the screenshot below:

Picking Single Date from Android TimesSquare Library CalendarPickerView

If you are amazed by the look and feel of this calendar view, and want to use it instead of a normal Android CalendarView widget, this can also be done. As this library also supports the basic functionality of simply selecting a single date from calendar. Just use the .inMode(CalendarPickerView.SelectionMode.SINGLE) method with specified parameter while initializing the CalendarPickerView widget. See the screen shot below:

Conclusion

I would like to conclude by saying that Android TimesSquare Library, is an easy to use library. Designed for usage in activities, fragments and dialogs. This library can primarily be used for selection of a date range in Android. As this is something important and not present in the standard Android calendar view. Also this CalendarPickerView provides the ability to select multiple dates and highlight important dates which is something new. Hope this helped, connect with us on Facebook, Google+, and Twitter to get more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.