{"id":1158,"date":"2016-03-03T06:19:32","date_gmt":"2016-03-03T06:19:32","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1158"},"modified":"2018-06-05T08:27:18","modified_gmt":"2018-06-05T08:27:18","slug":"datepicker","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/datepicker","title":{"rendered":"DatePicker Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, DatePicker is a widget used to select a date. It allows to select date by day, month and year in your custom UI (user interface). If we need to show this view as a dialog then we have to use a DatePickerDialog class. For selecting time Android also provides timepicker<\/a> to select time.<\/p>\n

\"DatePicker<\/center>DatePicker code in XML:<\/strong><\/p>\n
<DatePicker\r\nandroid:id=\"@+id\/simpleDatePicker\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:datePickerMode=\"spinner\"\/>\r\n<\/pre>\n
\n
Methods of DatePicker<\/strong><\/h4>\n
Let\u2019s discuss some common methods of a datepicker which are used to configure a DatePicker in our application.<\/p>\n
1. setSpinnersShown(boolean shown):<\/strong><\/span><\/p>\n
This method is used to set whether the spinner of the date picker in shown or not. In this method you have to set a Boolean value either true or false. True indicates spinner is shown, false value indicates spinner is not shown. Default value for this function is true.<\/p>\n
Below we show the use of setSpinnerShown() function by setting false value.<\/p>\n
DatePicker simpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); \/\/ initiate a date picker\r\n\r\nsimpleDatePicker.setSpinnersShown(false); \/\/ set false value for the spinner shown function<\/pre>\n
\"setSpinnerShown<\/center>2. getDayOfMonth():<\/strong><\/span><\/p>\n
This method is used to get the selected day of the month from a date picker.\u00a0 This method returns an integer value.<\/p>\n
Below we get the selected day of the month from a date picker.<\/p>\n
\/*Add in Oncreate() funtion after setContentView()*\/\r\nDatePicker simpleDatePicker = (DatePicker) findViewById(R.id.simpleDatePicker); \/\/ initiate a date picker\r\nint day = simpleDatePicker.getDayOfMonth(); \/\/ get the selected day of the month\r\n<\/pre>\n
3. getMonth():<\/strong><\/span><\/p>\n
This method is used to get the selected month from a date picker.\u00a0 This method returns an integer value.<\/p>\n
Below we get the selected month from a date picker.<\/p>\n
DatePicker simpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); \/\/ initiate a date picker\r\nint month = simpleDatePicker.getMonth(); \/\/ get the selected month\r\n<\/pre>\n
4. getYear():<\/strong><\/span><\/p>\n
This method is used to get the selected year from a date picker.\u00a0 This method returns an integer value.<\/p>\n
Below code is used to\u00a0get the selected year from a date picker.<\/p>\n
DatePicker simpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); \/\/ initiate a date picker\r\nint year = simpleDatePicker.getYear(); \/\/ get the selected year\r\n<\/pre>\n
5. getFirstDayOfWeek():<\/strong><\/span><\/p>\n
This method is used to get the first day of the week. This method returns an integer value.<\/p>\n
Below code is used to\u00a0get the first day of the week.<\/p>\n
DatePicker simpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); \/\/ initiate a date picker\r\n\r\nint firstDay=simpleDatePicker.getFirstDayOfWeek(); \/\/ get the first day of the week\r\n<\/pre>\n
\n
Attributes of DatePicker<\/strong><\/h4>\n
Now let\u2019s \u00a0we discuss some important\u00a0attributes that helps us to configure a DatePicker\u00a0in your XML\u00a0file (layout).<\/p>\n
1. id:<\/span>\u00a0<\/strong>id is an attribute used to uniquely identify a date picker.<\/p>\n
<DatePicker\r\nandroid:id=\"@+id\/simpleDatePicker\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\n\/>\r\n<\/pre>\n
2. datePickerMode:<\/strong><\/span>\u00a0This attribute is\u00a0used to set the Date Picker in mode either spinner or calendar. Default mode is calendar but this mode is not used after api level 21, so from api level 21 you have to set the mode to spinner.<\/p>\n
Below is an example code in which we set the mode to spinner for a date picker.<\/p>\n
<DatePicker\r\nandroid:id=\"@+id\/simpleDatePicker\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:datePickerMode=\"spinner\" \/> <!-- spinner mode of a date picker -->\r\n<\/pre>\n
\u00a0\"datePickerMode<\/center>3. background:<\/strong><\/span>\u00a0background attribute is used to set the background of a date picker. We can set a color or a drawable image in the background.<\/p>\n
Below we set the red color for the background of a date picker.<\/p>\n
<DatePicker\r\nandroid:id=\"@+id\/simpleDatePicker\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:datePickerMode=\"spinner\"\r\nandroid:background=\"#f00\"\/> <!-- red color for the background of the date picker -->\r\n<\/pre>\n
\"background<\/center>Setting background of DatePicker In Java Class:<\/strong><\/p>\n
DatePicker simpleDatePicker=(DatePicker)findViewById(R.id.simpleDatePicker); \/\/ initiate a date picker\r\nsimpleDatePicker.setBackgroundColor(Color.RED); \/\/\u00a0 red color for the background of a date picker\r\n<\/pre>\n
4. padding:<\/strong><\/span>\u00a0padding attribute is used to set the padding from left, right, top or bottom for a date picker.<\/p>\n
    \n
  • paddingRight:<\/strong>\u00a0set the padding from the right side of the date picker.<\/strong><\/li>\n
  • paddingLeft:<\/strong>\u00a0set the padding from the left side of the date picker.<\/strong><\/li>\n
  • paddingTop:<\/strong>\u00a0set the padding from the top side of the date picker.<\/strong><\/li>\n
  • paddingBottom:<\/strong>\u00a0set the padding from the bottom side of the date picker.<\/strong><\/li>\n
  • Padding:<\/strong>\u00a0set the padding from the all side\u2019s of the date picker.<\/strong><\/li>\n<\/ul>\n
    Below code of padding attribute set the 40dp padding from all the side\u2019s of the date picker.<\/p>\n
    <DatePicker\r\nandroid:id=\"@+id\/simpleDatePicker\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:datePickerMode=\"spinner\"\r\nandroid:padding=\"40dp\"\/> <!-- 40dp padding from all the sides of a date picker -->\r\n<\/pre>\n
    \"padding<\/center><\/p>\n
    \n
    DatePicker Example in Android Studio:<\/strong><\/h4>\n
    Example 1:<\/strong><\/span>\u00a0In the first example of\u00a0DatePicker we show simple date picker and a Button in our xml file and perform click event on button. So whenever a user clicks on a button the day of the month, month and\u00a0 year will be displayed by using a Toast. Below is the final output, download code and step by step explanation:<\/p>\n
    [cp_modal id=”cp_id_2e7ac”]\"Download[\/cp_modal]<\/p>\n
    \"DatePicker<\/center>Step 1:<\/strong><\/span> Create a new project and name it DatePickerExample<\/strong><\/p>\n
    Step 2:<\/strong><\/span> Open res -> layout ->\u00a0activity_main.xml (or) main.xml<\/strong>\u00a0and add following code:<\/p>\n
    In this step we open an xml file and add the code for displaying a datepicker with spinner mode and a button for getting the date from the datepicker.<\/p>\n
    <RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <DatePicker\r\n        android:id=\"@+id\/simpleDatePicker\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:background=\"#150\"\r\n        android:datePickerMode=\"spinner\" \/>\r\n\r\n    <Button\r\n        android:id=\"@+id\/submitButton\"\r\n        android:layout_width=\"200dp\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_below=\"@+id\/simpleDatePicker\"\r\n        android:layout_centerHorizontal=\"true\"\r\n        android:layout_marginTop=\"50dp\"\r\n        android:background=\"#150\"\r\n        android:text=\"SUBMIT\"\r\n        android:textColor=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        android:textStyle=\"bold\" \/>\r\n<\/RelativeLayout><\/pre>\n
    Step 3:<\/strong><\/span> Open app\u00a0-> package ->\u00a0MainActivity.<\/strong>java<\/strong><\/p>\n
    In this step we open\u00a0MainActivity\u00a0where\u00a0we add the code to\u00a0initiate the datepicker &\u00a0a button and then perform onClickListener() event on button so whenever a user clicks on the button the day of the month, month and\u00a0 year will be displayed by using a Toast.<\/p>\n
    package example.abhiandroid.datepickerexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.DatePicker;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    DatePicker simpleDatePicker;\r\n    Button submit;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        \/\/ initiate the date picker and a button\r\n        simpleDatePicker = (DatePicker) findViewById(R.id.simpleDatePicker);\r\n        submit = (Button) findViewById(R.id.submitButton);\r\n        \/\/ perform click event on submit button\r\n        submit.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                \/\/ get the values for day of month , month and year from a date picker\r\n                String day = \"Day = \" + simpleDatePicker.getDayOfMonth();\r\n                String month = \"Month = \" + (simpleDatePicker.getMonth() + 1);\r\n                String year = \"Year = \" + simpleDatePicker.getYear();\r\n                \/\/ display the values by using a toast\r\n                Toast.makeText(getApplicationContext(), day + \"\\n\" + month + \"\\n\" + year, Toast.LENGTH_LONG).show();\r\n            }\r\n        });\r\n\r\n    }\r\n\r\n    \r\n}<\/pre>\n
    Output:<\/strong><\/span><\/p>\n
    Now run the App in AVD and you will see datepicker will appear on the screen. Choose the date, month & year and click submit. The date you selected will appear on Screen.<\/p>\n
    \"DatePicker<\/center><\/p>\n
    \n
    Example of DatePickerDialog in Android Studio<\/strong><\/h4>\n
    Example 2:<\/strong><\/span> In the second example\u00a0we show the use of date picker dialog in our application, for that we display edittext in our xml file and perform a onClickListener() event on it. So whenever a user click on it date picker dialog is appeared and from there user can adjust the date and after selecting the date it will be displayed in the edit text. Below is the final output, download code and step by step tutorial:<\/p>\n
     [cp_modal id=”cp_id_347dc”]\"Download[\/cp_modal]<\/p>\n
    \"DatePickerDialog<\/center>Step 1:<\/strong><\/span> Create a new project and name it DatePickerExample<\/strong><\/p>\n
    Step 2:<\/strong><\/span> Open res – > layout – > activity_main.<\/strong>xml (or) main.xml<\/strong>\u00a0and add following code:<\/p>\n
    In this step we open xml file and add the code for displaying edittext which will be used to\u00a0display the\u00a0date\u00a0of datepicker.<\/p>\n
    <RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <EditText\r\n        android:id=\"@+id\/date\"\r\n        android:layout_width=\"200dp\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerHorizontal=\"true\"\r\n        android:background=\"#d4d4d4\"\r\n        android:hint=\"Select Date...\"\r\n        android:padding=\"15dp\"\r\n        android:textColor=\"#897\"\r\n        android:textColorHint=\"#090\"\r\n        android:textSize=\"20sp\"\r\n        android:textStyle=\"bold\" \/>\r\n\r\n<\/RelativeLayout><\/pre>\n
    Step 3:<\/strong><\/span> Open\u00a0 \u00a0src -> package ->\u00a0MainActvity.<\/strong>java<\/strong><\/p>\n
    In this step we open\u00a0MainActivity\u00a0where\u00a0we add the code to\u00a0initiate the edittext to display date(day of month, \u00a0month and year) from a date picker and perform click event on edit text so whenever a user clicks on edit text a date picker dialog is appeared from there user can set the date by choosing day of month , month and year , after \u00a0setting the date will be displayed in the edit text.<\/p>\n
    package example.abhiandroid.datepickerexample;\r\n\r\nimport android.app.DatePickerDialog;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.DatePicker;\r\nimport android.widget.EditText;\r\n\r\nimport java.util.Calendar;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    EditText date;\r\n    DatePickerDialog datePickerDialog;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        \/\/ initiate the date picker and a button\r\n        date = (EditText) findViewById(R.id.date);\r\n        \/\/ perform click event on edit text\r\n        date.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                \/\/ calender class's instance and get current date , month and year from calender\r\n                final Calendar c = Calendar.getInstance();\r\n                int mYear = c.get(Calendar.YEAR); \/\/ current year\r\n                int mMonth = c.get(Calendar.MONTH); \/\/ current month\r\n                int mDay = c.get(Calendar.DAY_OF_MONTH); \/\/ current day\r\n                \/\/ date picker dialog\r\n                datePickerDialog = new DatePickerDialog(MainActivity.this,\r\n                        new DatePickerDialog.OnDateSetListener() {\r\n\r\n                            @Override\r\n                            public void onDateSet(DatePicker view, int year,\r\n                                                  int monthOfYear, int dayOfMonth) {\r\n                                \/\/ set day of month , month and year value in the edit text\r\n                                date.setText(dayOfMonth + \"\/\"\r\n                                        + (monthOfYear + 1) + \"\/\" + year);\r\n\r\n                            }\r\n                        }, mYear, mMonth, mDay);\r\n                datePickerDialog.show();\r\n            }\r\n        });\r\n\r\n    }\r\n\r\n\r\n}<\/pre>\n
    Output:<\/strong><\/span><\/p>\n
    Now run the App in Emulator and fill the date in EditText option.<\/p>\n
    \"DatePickerDialog<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
    In Android, DatePicker is a widget used to select a date. It allows to select date by day, month and year in your custom UI (user interface). If we need to show this view as a dialog then we have to use a DatePickerDialog class. For selecting time Android also provides timepicker to select time. … Continue reading DatePicker Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1158","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"DatePicker Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"In Android, DatePicker is a widget used to select a date. It allows to select date by day, month and year in your custom UI (user interface).\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/datepicker\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=1158"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1158\/revisions"}],"predecessor-version":[{"id":2614,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1158\/revisions\/2614"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}