[Kotlin] Material Design Date Picker - 날짜 선택기 사용법, 특정 구간날짜 비활성화

[Kotlin] Date Picker MaterialDesign 날짜 선택기 사용법

---

목표

목표 1(좌) / 목표 2(우)

Material Components Theme 만들기

• res/values/styles 아래에 Material Components Theme을 만들어줍니다.

<style name="CreateProfileTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"></style>

• 그리고이 Theme을 Manifest에 이Theme을 적용할 activity에 android:theme을 적용해줍니다.  

</manifest>
	<application
		<activity android:name=".CreateProfile"
            android:theme="@style/CreateProfileTheme">//추가
			<intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
	</application>
</manifest>

XML에 DatePicker 추가하기

• 저는 버튼이 눌리면 DatePicker가 열리고 날짜가 선택되면 버튼 텍스트가 선택된 날짜로 바뀌게 하였습니다.
• 먼저MainActivity에 DatePicker 창을 여는 버튼을 추가해주겠습니다.

  <Button //ButtonUI는 원하시는대로 하시면됩니다.
     		android:id="@+id/calanderButton_create" //id만 기억해주세요
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#00FFFFFF"
            android:text="birthday"
            android:textSize="10dp"
 />
 
   <Button //ButtonUI는 원하시는대로 하시면됩니다.
     		android:id="@+id/calanderButton_create2" //id만 기억해주세요
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#00FFFFFF"
            android:text="birthday"
            android:textSize="10dp"
 />

MainActivity에 Material DatePicker Builder만들기

• MainActivity에 DatePicker 속성을 만들어줍니다.
• 먼저 목표1 datePicker코드입니다.

//sharedPreference를 이용한 기기에 선택한 날짜 데이터 저장
val sharedPreference = getSharedPreferences("CreateProfile", Context.MODE_PRIVATE)
val editor: SharedPreferences.Editor = sharedPreference.edit()

//목표 1이미지 코드
 calanderButton_create.setOnClickListener() {
       	
            val builder = MaterialDatePicker.Builder.datePicker() //datePicker를 만들어줍니다.
                .setTitleText("Set BirthDay") //DatePicker창에 타이틀을 정해줍니다.
                .setInputMode(MaterialDatePicker.INPUT_MODE_TEXT) //첫번째 목표 이미지처럼 캘린더를 숨기고싶을때 활성화 하시면됩니다.
                .setSelection(MaterialDatePicker.todayInUtcMilliseconds())//기본 선택값을정하는곳이고 오늘로 설정했습니다.

            val datePicker = builder.build()

            datePicker.addOnPositiveButtonClickListener {
                    val calendar = Calendar.getInstance()
                    //선택한 날짜를 Date format으로 가져오기
                    calendar.time = Date(it)
                    //선택한 날짜를 밀리세컨드로 값으로 가져오기
                    val calendarMilli = calendar.timeInMillis
                    //버튼text를에 선택한 날짜로바꿔주기 
                    calanderButton_create.text = "${calendar.get(Calendar.MONTH) + 1}/${calendar.get(Calendar.DAY_OF_MONTH)}/${calendar.get(Calendar.YEAR)}"
                    
                    //sharedPreference에 저장하기
                    editor.putLong("Birthday_Millis", calendarMilli)
                    editor.apply()
            }
            datePicker.show(supportFragmentManager,datePicker.toString()) //datePicker를 보여주기 

        }

• 목표2 datePicker코드입니다. 목표 2datePicker는 오늘 이전날짜는 선택불가능하게 만들어보겠습니다.
• 오늘 이전날짜는 선택 불가능하게 만드려면 CalendarConstraints를 사용해줘야합니다.

calanderButton_create2.setOnClickListener() {
			//calendar Constraint Builder 선택할수있는 날짜 구간설정
            val calendarConstraintBuilder = CalendarConstraints.Builder()
            //오늘 이후만 선택가능하게 하는 코드
            calendarConstraintBuilder.setValidator(DateValidatorPointForward.now())
            //오늘 이전만 선택가능하게 하는 코드
            //calendarConstraintBuilder.setValidator(DateValidatorPointBackward.now())


            val builder = MaterialDatePicker.Builder.datePicker()
                .setTitleText("Set Dieday")
                .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
            
            //위에서 만든 calendarConstraint을 builder에 설정해줍니다.
                .setCalendarConstraints(calendarConstraintBuilder.build());

//아래부터는 목표1 코드방식과 동일합니다.

            val datePicker = builder.build()

            datePicker.addOnPositiveButtonClickListener {
                val calendar = Calendar.getInstance()
                calendar.time = Date(it)
                val calendarMilli = calendar.timeInMillis
                calanderButton_create2.text = "${calendar.get(Calendar.MONTH) + 1}/${calendar.get(Calendar.DAY_OF_MONTH)}/${calendar.get(Calendar.YEAR)}"
                
                //sharedPreference
                editor.putLong("Die_Millis", calendarMilli)
                editor.apply()
                Log.d("Die_Millis", "$calendarMilli")
            }
            datePicker.show(supportFragmentManager,datePicker.toString())
  }

• 위와 같이 작성하시면 버튼클릭후 아래와같이 선택된 날짜로 버튼 텍스트가 바뀌는 걸 보실수있습니다. 

---

참고 문헌

Material Design