플러그인이 없는 Flutter의 날짜 선택기

Flutter에서 날짜 입력을 받고 싶습니까? 걱정하지 마세요. Flutter에는 위젯이 있습니다.


YouTube에서 시청:

사용자가 날짜를 선택할 때마다 날짜 값을 변경하는 경향이 있기 때문에 상태 저장 클래스가 필요합니다. 그리고 날짜 값을 저장하는 DateTime 변수.

DateTime _dateTime;

_datetime 초기화

  @override
  void initState() {
    super.initState();
    _dateTime = DateTime.now();
  }

Column을 사용한 다음 listtile을 사용하여 날짜를 텍스트 형식(문자열)으로 표시하고 Listtile()에서 날짜 onTap()을 선택했습니다.

Column(children: [
        ListTile(
          title: Text("Date: " + _dateTime.toString(),
              style: TextStyle(fontWeight: FontWeight.bold)),
          onTap: _pickTime,
        )
      ])

이제 필요한 것은 _picktime(){}을 정의하는 것입니다. 날짜를 선택해야 하므로 async 및 await를 사용해야 합니다.

showDatePicker()는 선택된 DateTime()을 반환하고 4개의 필수 필드가 있는 위젯입니다.

required BuildContext context,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,

반환된 showDatePicker 값을 변수에 할당합니다.

_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),


    );

  }

이제 setstate()를 사용하여 _datetime 변수를 업데이트합니다.

_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),


    );
    if (d != null) {
      setState(() {
        _dateTime = d;
      });
    }
 }

몇 가지 선택적 값이 있습니다.
helpText, 대화 상자 상단에 표시되는 레이블입니다.
cancelText, 취소 버튼의 레이블.
ConfirmText, 확인 버튼의 레이블.
문자열 값을 취하는

      cancelText: "CANCEL TEXT",
      helpText: "HELP TEXT",
      confirmText: "CONFIRM TEXT",

선택적 initialEntryMode 인수를 사용하여 DatePickerEntryMode.calendar(달력 그리드) 또는 DatePickerEntryMode.input(텍스트 입력 필드) 모드에서 날짜 선택기를 표시할 수 있습니다. 기본값은 DatePickerEntryMode.calendar이며 null이 아니어야 합니다.

initialEntryMode: DatePickerEntryMode.input,

선택적 textDirection 인수를 사용하여 날짜 선택기의 텍스트 방향(TextDirection.ltr 또는 TextDirection.rtl)을 설정할 수 있습니다.

textDirection: TextDirection.rtl,

선택적 initialDatePickerMode 인수를 사용하여 캘린더 날짜 선택기가 처음에 DatePickerMode.year 또는 DatePickerMode.day 모드에 나타나도록 할 수 있습니다. 기본값은 DatePickerMode.day이며 null이 아니어야 합니다.

initialDatePickerMode: DatePickerMode.day,

빌더 매개변수는 테마와 같은 상속된 위젯을 추가하기 위해 대화 상자 위젯을 래핑하는 데 사용할 수 있습니다.

 builder: (context, child) {
        return Theme(
            data: ThemeData(
                primarySwatch: Colors.purple,
                primaryColor: Colors.purple,
                accentColor: Colors.purpleAccent),
            child: child);
      },

선택적 selectableDayPredicate 함수를 전달하여 특정 요일만 선택할 수 있습니다. 제공되면 selectableDayPredicate가 true를 반환하는 요일만 선택할 수 있습니다. 예를 들어 평일만 선택하도록 허용하는 데 사용할 수 있습니다. 제공된 경우 initialDate에 대해 true를 반환해야 합니다.

selectableDayPredicate: (DateTime q) {
        return q.weekday == 6 || q.weekday == 7 ? false : true;
      },

당신은 codepen으로 재생할 수 있습니다