Date Picker Dialog를 이용하여 날짜 입력하기

컨텐츠 입력 시 Date Picker Dialog를 이용하여 달력을 띄우고 날짜를 선택하는 코드를 작성해 보았습니다.

달력을 구현하는 API들이 많이 있었지만 단순히 날짜만 선택하는 기능만 담으려는데 코드가 복잡해지는 것 같아 

가장 심플한 기본 Date Picker Dialog를 적용했습니다.

 

1. UI 만들기

activity_add_contents.xml

<androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/start_text"
                    style="bold"
                    android:layout_width="40dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="시 작"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/start_date_text"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/start_date_text"
                    android:layout_width="200dp"
                    android:layout_height="40dp"
                    android:layout_marginStart="20dp"
                    android:paddingHorizontal="5dp"
                    android:background="@drawable/text_view_outline"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/start_text"
                    app:layout_constraintTop_toTopOf="parent"
                    android:textSize="16sp"
                    android:gravity="center_vertical"
                    />

                <ImageView
                    android:id="@+id/start_date_btn"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginStart="20dp"
                    android:src="@drawable/ic_calendar_icon"
                    android:clickable="true"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/start_date_text"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>

 

2. 버튼 클릭 시 Date Picker Dialog 띄우기

class AddContentsActivity : AppCompatActivity() {

    //Calendar
    private var calendar = Calendar.getInstance()
    private var year = calendar.get(Calendar.YEAR)
    private var month = calendar.get(Calendar.MONTH)
    private var day = calendar.get(Calendar.DAY_OF_MONTH)

    @SuppressLint("SetTextI18n")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_add_contents)

        start_date_btn.setOnClickListener {
            val datePickerDialog = DatePickerDialog(this, { _, year, month, day ->
                start_date_text.text =
                    year.toString() + "/" + (month + 1).toString() + "/" + day.toString()
            }, year, month, day)
            datePickerDialog.show()
        }
  }

버튼에 setOnClickListener를 적용한 후 Date Picker Dialog로 원하는 날짜를 선택합니다.

그리고 선택된 년, 월, 일을 보여줄 곳에 바인딩 해 줍니다.

 

그리고 에뮬레이터에서 어플을 실행해보면

 

 

선택한 날짜가 잘 입력된 것을 확인 할 수 있습니다.

 

 

현재 기본적인 달력의 기능만 연결해 놓았으며

추가적으로 오늘을 기준으로 이전날짜는 선택 할 수 없도록 함과 동시에

종료 날짜가 시작날짜보다 앞서서 선택되지 않도록 처리 할 예정입니다.