devstory

Le Tutoriel de Android DatePicker

  1. Android DatePicker
  2. Example de DatePicker

1. Android DatePicker

Android DatePicker est un composant d'interface qui permet aux utilisateurs de sélectionner une date et de s'assurer que la saisie de l'utilisateur est valide.
DatePicker a 2 modes avec une interface différente.
  • android:datePickerMode="calendar" (Default)
  • android:datePickerMode="spinner"
DatePickerDialog permet aux utilisateurs de choisir une date valide et de la masquer après avoir fait la sélection, il vous fait économiser plus d'espace d'application que d'utiliser DatePicker.
android:datePickerMode="calendar"
<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="calendar"  />
Portrait Screen
Landscape Screen
android:datePickerMode="spinner"
En mode spinner, DatePicker se compose de 2 parties, la gauche est un bloc de 3 Spinner qui permet aux utilisateurs de choisir le mois, le jour, l'année. Et à droite se trouve une CalendarView plus simple qu'elle-même en mode calendar.
<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:datePickerMode="spinner" />
DatePicker [spinner mode] default.
Vous pouvez utiliser android:calendarViewShown="false" pour masquer le composant CalendarView à droite.
[android:calendarViewShown="false"]
<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:calendarViewShown="false"
    android:datePickerMode="spinner" />
[android:calendarViewShown="false"]
Ou vous pouvez utiliser android:spinnersShown="false" pour masquer le bloc (contenant 3 Spinner) sur la gauche.
[android:spinnersShown="false"]
<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:datePickerMode="spinner"
    android:spinnersShown="false" />
[android:spinnersShown="false"]

2. Example de DatePicker

Exemple d'aperçu:
Sur Android Studio, créez un nouveau project:
  • File > New > New Project > Empty Activity
    • Name: DatePickerExample
    • Package name: org.o7planning.datepickerexample
    • Language: Java
DatePicker n'est pas disponible dans la fenêtre de conception de la Palette, vous devez donc utiliser du code XML pour l'ajouter à l'interface, puis ajuster visuellement sa position et ses propriétés.
DatePicker (Calendar Mode)
<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="calendar"  />
Ajustez la position des composants sur l'interface:
Set ID, Text pour les composants:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:datePickerMode="calendar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/datePicker">

        <EditText
            android:id="@+id/editText_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="dd-MM-yyyy"
            android:inputType="date" />

        <Button
            android:id="@+id/button_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Get Date" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.datepickerexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.Toast;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    private DatePicker datePicker;
    private EditText editTextDate;
    private Button buttonDate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.editTextDate = (EditText) this.findViewById(R.id.editText_date);
        this.buttonDate = (Button) this.findViewById(R.id.button_date);
        this.datePicker = (DatePicker) this.findViewById(R.id.datePicker);

        Calendar calendar = Calendar.getInstance();
        calendar.setTimeInMillis(System.currentTimeMillis());
        int year = calendar.get(Calendar.YEAR);
        int month  = calendar.get(Calendar.MONTH);
        int day = calendar.get(Calendar.DAY_OF_MONTH);

        this.datePicker.init( year, month , day , new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker datePicker, int year, int month, int dayOfMonth) {
                datePickerChange(  datePicker,   year,   month,   dayOfMonth);
            }
        });

        this.buttonDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDate();
            }
        });
    }

    private void datePickerChange(DatePicker datePicker, int year, int month, int dayOfMonth) {
        Log.d("Date", "Year=" + year + " Month=" + (month + 1) + " day=" + dayOfMonth);
        this.editTextDate.setText(dayOfMonth +"-" + (month + 1) + "-" + year);
    }

    private void showDate()  {
        int year = this.datePicker.getYear();
        int month = this.datePicker.getMonth(); // 0 - 11
        int day = this.datePicker.getDayOfMonth();

        Toast.makeText(this, "Date: " + day+"-"+ (month + 1) +"-"+ year, Toast.LENGTH_LONG).show();
    }
}

Tutoriels de programmation Android

Show More