Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Calendardatepicker2

Pemilih kalender yang ringan dan dapat disesuaikan berdasarkan CalendardatePicker Flutter, dengan dukungan untuk pemetik tanggal tunggal, pemilih range, dan multi -pemetik.

PICK-Mode Tunggalmulti-mode-pickerRange-Picker-Modefungsi dialog
mode tunggal mode multi mode rentang fungsi dialog
Gulungan tunggal Gulungan multi Gulir Range Gulir dialog

Intro

CalendardatePicker2 terdiri dari dua widget utama:

  • CalendarDatePicker2 , widget ini hanya mencakup UI kalender dan akan memancarkan acara setiap kali pengguna mengetuk tanggal yang berbeda.
  • CalendarDatePicker2WithActionButtons , widget ini mencakup UI kalender dan tombol tindakan (Batal & OK). Widget ini hanya akan memancarkan nilai yang diperbarui ketika tombol User 'OK'.

Fitur

  • Calendardatepicker Extended memungkinkan null inisi inisial
  • UI yang sangat dapat disesuaikan
  • Mendukung Tiga Mode: Single, Multi dan Range
  • Mendukung empat tampilan: hari, bulan, tahun dan gulir
  • showCalendarDatePicker2Dialog bawaan
  • Dukungan multi-bahasa
  • Dukungan materi 3

Bermigrasi dari 0.xx

Versi 1.xx akan secara default mengaktifkan pemetik bulan. Jika Anda ingin bermigrasi ke v1.xx dari v0.xx dan ingin menjaga perilaku lama, Anda perlu mengatur disableMonthPicker ke true .

Cara menggunakan

Pastikan untuk memeriksa contoh untuk detail lebih lanjut.

Instalasi

Tambahkan baris berikut ke pubspec.yaml : 

 dependencies :
calendar_date_picker2 : ^1.1.8

Pengaturan Dasar

Contoh lengkap tersedia di sini.

CalendardatePicker2 mengharuskan Anda untuk memberikan config dan value :

  • config berisi konfigurasi untuk pengaturan kalender dan UI Anda.
  • value adalah nilai awal yang diteruskan ke pemetik kalender Anda, value harus menjadi List .

Sampel kerja minimum 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

Konfigurasi pemetik tanggal tunggal

Selama inisialisasi CalendarDatePicker2Config calendarType dari instance config akan secara default diatur ke CalendarDatePicker2Type.single , jadi Anda tidak perlu mengatur jenis kalender secara khusus.

Konfigurasi pemetik multi -tanggal

Untuk menggunakan pemetik tanggal multi -mode, Anda harus mengatur calendArtype konfigurasi ke CalendarDatePicker2Type.multi : 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .multi,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

Range Date Picker Configuration

Untuk menggunakan range mode Date Picker, Anda harus mengatur calendArtype of config ke CalendarDatePicker2Type.range : 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .range,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

Gunakan metode tampilan dialog bawaan

Paket ini termasuk dukungan bawaan untuk menampilkan kalender sebagai dialog. Untuk menggunakannya, Anda perlu memanggil showCalendarDatePicker2Dialog , yang mengambil tiga argumen yang diperlukan: context , config , dialogSize : 

...
var results = await showCalendarDatePicker2Dialog (
  context : context,
  config : CalendarDatePicker2WithActionButtonsConfig (),
  dialogSize : const Size ( 325 , 400 ),
  value : _dates,
  borderRadius : BorderRadius . circular ( 15 ),
);
...

Opsi konfigurasi

Untuk widget CalendardatePicker2

Argumen Jenis Keterangan
konfigurasi Calendardatepicker2config Konfigurasi terkait kalender UI
nilai Daftar <DateTime?> [Datetime] yang dipilih yang harus ditampilkan pemilih.
OnvalueChanged ValueChanged <list <catetime>>? Dipanggil saat tanggal yang dipilih berubah
DisplayedmonthDate Datetime? Tanggal untuk mengontrol kalender yang ditampilkan bulan
ondisplayedmonthchanged ValueChanged <DateTime>? Dipanggil saat pengguna menavigasi ke bulan/tahun baru di pemilih di bawah mode non-gulir

Untuk calendardatepicker2config:

Pilihan Jenis Keterangan
CalendArtype Calendardatepicker2Type? Jenis pemilih kalender, memiliki 3 nilai: tunggal, multi, rentang
RangeBidirectional Bool? Bendera untuk memungkinkan pemilihan kisaran tanggal juga dalam urutan reverse-kronologis
firstdate Datetime? Pengguna datetime yang diijinkan paling awal dapat memilih
LastDate Datetime? Pengguna datetime terbaru yang diijinkan dapat memilih
CurrentDate Datetime? Datetime mewakili hari ini yang akan diuraikan dalam kalender
CalendarViewMode Calendardatepicker2mode? Tampilan pemilih kalender yang awalnya ditampilkan, dengan empat opsi tersedia: hari, bulan, tahun dan gulir
CalenderViewSCrollPhysics Scrollphysics? Fisika gulir untuk tampilan bulan kalender
DynamicCalEndarrows Bool? Bendera untuk mengaktifkan baris kalender dinamis berdasarkan bulan tertentu
Mengizinkan Uji Uang Pengeluaran Bool? Bendera untuk mengontrol perilaku [onvalueChanged]
animateTodisplayedmonthDate Bool? Bendera untuk selalu beragam ke yang ditampilkan
Semantikdiksi Peta? Kamus Kustom untuk Label Semantik
DisableVibration Bool? Bendera untuk menonaktifkan getaran pada pemilihan tanggal
label hari kerja Daftar <String>? Label hari kerja khusus, harus dimulai dengan hari Minggu
WeekdayLabeltextStyle TextStyle? Gaya teks khusus untuk label hari kerja
WeekdayLabelBuilder WeekdayLabelBuilder? Fungsi untuk memberikan kontrol penuh selama widget label hari kerja
firstdayofweek int? Indeks hari pertama dalam seminggu, di mana 0 poin hingga Minggu, dan 6 poin hingga Sabtu.
Lastmonthicon Widget? Ikon khusus untuk kontrol tombol bulan lalu
Hidelastmonthicon Bool? Bendera untuk disembunyikan bulan lalu
nextmonthicon Widget? Ikon khusus untuk kontrol tombol bulan depan
Hidenextmonthicon Bool? Bendera untuk disembunyikan bulan depan
ControlSheight dobel? Tinggi Kustom untuk Kontrol Kalender Tinggi Toggle
ControlStextStyle TextStyle? Gaya Teks Kustom Untuk Mode Kalender Kontrol Sakel
CenterAlignModePicker Bool? Bendera untuk memusatkan label teks tahun dan bulan di kontrol
MODEPICKERSGAP dobel? Jarak celah khusus antara pemetik mode bulan dan tahun
DisablemodePicker Bool? Bendera untuk menonaktifkan pemetik mode dan menyembunyikan ikon sakelar
MODEPICKERTEXTHANDLER MODEPICKERTEXTHANDLER? Fungsi untuk mengontrol mode pemetik yang ditampilkan
ModePickerBuilder ModePickerBuilder? Fungsi untuk memberikan kontrol penuh atas Mode Picker UI
customodepickericon Widget? Ikon Kustom untuk Ikon Tombol Picker Mode
Useabbrlabelformonthmodepicker Bool? Gunakan label singkatan untuk pemetik mode bulan, hanya berfungsi saat pemetik bulan diaktifkan
DayviewController PageController? Pengontrol halaman khusus untuk tampilan hari kalender
daymaxwidth dobel? Max Width of Day Widget. Ketika [Daymaxwidth] tidak nol, itu akan mengganti pengaturan ukuran default
Dayborderradius Borderradius? Radius perbatasan khusus untuk indikator hari
DayTextStyle TextStyle? Gaya teks khusus untuk hari kalender
TodayTextStyle TextStyle? Gaya teks khusus untuk hari kalender saat ini
DisableDdayTextStyle TextStyle? Gaya Teks Kustom Untuk Hari Kalender Dinonaktifkan
daytextstylepredicate DayTextStylepredicate? Fungsi untuk memberikan kontrol penuh atas gaya teks Kalender
SelecteddayHighlightColor Warna? Warna Sorotan Hari Dipilih
SelecteddayTextStyle TextStyle? Gaya teks khusus untuk hari kalender yang dipilih
SelectableDayPredicate SelectableDayPredicate? Fungsi untuk memberikan kontrol penuh atas tanggal mana dalam kalender dapat dipilih
SelectedRangeDayTextStyle TextStyle? Gaya Teks Kustom Untuk Hari Kalender Range Terpilih
SelectedRangehighlightColor Warna? Warna sorotan untuk hari yang termasuk dalam kisaran yang dipilih
SelectedRangedecorationPredicate SelectedRangedecorationPredicate? Predikat untuk menentukan dekorasi kotak widget hari selama sehari dalam jangkauan yang dipilih
SelectedRangehighlightBuilder SelectedRangehighlightBuilder? Fungsi untuk memberikan kontrol penuh atas sorotan pemilih rentang
DaysPlashColor Warna? Widget Percikan Hari Ini
Daybuilder Daybuilder? Fungsi untuk memberikan kontrol penuh atas widget hari UI
daymodescrolldirection Sumbu? Arah Gulir Sumbu untuk mode [calendardatepicker2mode.day]
MonthViewController ScrollController? Pengontrol Gulir Kustom untuk Tampilan Bulan Kalender
monthbuilder Monthbuilder? Fungsi untuk memberikan kontrol penuh atas ui widget bulan
Hidemonthpickerdivid Bool? Bendera untuk menyembunyikan pembagi pada pemetik bulan
SelectablemontthPredicate Selectablemonthpredicate? Fungsi untuk memberikan kontrol penuh atas daftar bulan mana dalam bulan ini dapat dipilih.
Disablemonthpicker Bool? Bendera untuk menonaktifkan pemetik bulan
MonthTextStyle TextStyle? Gaya teks khusus untuk bulan
SelectedmontextStyle TextStyle? Gaya teks khusus untuk bulan yang dipilih
DisableDmontextStyle TextStyle? Gaya Teks Kustom Untuk Bulan Dinonaktifkan
YearviewController ScrollController? Pengontrol Gulir Kustom untuk Tampilan Tahun Kalender
Yearborderradius Borderradius? Radius perbatasan khusus untuk indikator tahun
YearTextStyle TextStyle? Gaya teks khusus untuk tahun
SelectedyeArtextStyle TextStyle? Gaya teks khusus untuk tahun yang dipilih
DisableDeyeArtextStyle TextStyle? Gaya Teks Kustom Untuk Tahun Dinonaktifkan
SelectableYearpredicate Selectableyearpredicate? Fungsi untuk memberikan kontrol penuh atas daftar tahun mana dalam tahun ini dipilih.
pembangun tahunan Tahunan? Fungsi untuk memberikan kontrol penuh selama UI Widget Tahun
hideyearpickerdivid Bool? Bendera untuk menyembunyikan pembagi pada pemetik tahun
ScrollViewTopheaderTextStyle TextStyle? Gaya Teks Kustom Untuk Gulir Tampilan Top Week Label Header
hidescrollviewtopheader Bool? Bendera untuk menyembunyikan header label minggu teratas di pemetik tampilan gulir
hidescrollviewtopheaderdivider Bool? Bendera untuk menyembunyikan pembagi header label minggu teratas pada tampilan gulir
hidescrollviewmonthweekheader Bool? Bendera untuk menyembunyikan Bulan Kalender Label Pekan HEADER di Tampilan Gulir
ScrollViewConstraints Boxconstraints? Boxconstraints untuk tampilan kalender gulir, hanya berfungsi untuk mode gulir
ScrollViewmonthyearBuilder ScrollViewmontHyearBuilder? Fungsi untuk memberikan kontrol penuh atas kalender gulir tahun UI
ScrollViewonscrolling ScrollViewonscrolling? Fungsi untuk panggilan balik lebih dari menggulir pada tampilan gulir
ScrollViewController ScrollController? Pengontrol gulir khusus ke tampilan kalender gulir

Selain konfigurasi di atas, calendardatepicker2WithActionButTonsconfig memiliki 9 opsi tambahan

Pilihan Jenis Keterangan
gapbetweencalendarandbuttons dobel? Kesenjangan antara kalender dan tombol aksi
BatalButTontextStyle TextStyle? Tombol Teks untuk Batal Tombol
Batalbutton Widget? Tombol batal khusus
OkbuttontextStyle TextStyle? Gaya teks untuk tombol ok
Okbutton Widget? Tombol OK Kustom
dibuka dariDialog Bool? Apakah kalender dibuka dari dialog
closeLialogoncanceltapped Bool? Tutup Dialog Setelah Pengguna Mengetuk Tombol Batal
closedialogonokapped Bool? Tutup dialog setelah pengguna mengetuk tombol OK
Buttonpadding Edgeinsets? Bantalan pembungkus khusus untuk tombol ok & batal

UI khusus

Dengan menggunakan konfigurasi di atas, Anda dapat membuat pemetik kalender khusus Anda sendiri sebagai kebutuhan Anda.

gambargambargambar

 CalendarDatePicker2WithActionButtons (
  config : CalendarDatePicker2WithActionButtonsConfig (
    firstDayOfWeek : 1 ,
    calendarType : CalendarDatePicker2Type .range,
    selectedDayTextStyle : TextStyle (color : Colors .white, fontWeight : FontWeight .w700),
    selectedDayHighlightColor : Colors .purple[ 800 ],
    centerAlignModePicker : true ,
    customModePickerIcon : SizedBox (),
    dayBuilder : _yourDayBuilder,
    yearBuilder : _yourYearBuilder,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

Dukungan multi-bahasa

Paket ini memiliki dukungan multi-bahasa. Untuk mengaktifkannya, tambahkan Locale Anda ke dalam MaterialApp wrapping: 

 MaterialApp (
  localizationsDelegates : GlobalMaterialLocalizations .delegates,
  supportedLocales : const [
    Locale ( 'en' , '' ),
    Locale ( 'zh' , '' ),
    Locale ( 'ru' , '' ),
    Locale ( 'es' , '' ),
    Locale ( 'hi' , '' ),
  ],
  ...
);
gambargambargambargambar
中文рсский Español हिंदी

Kontribusi

Jangan ragu untuk berkontribusi pada proyek ini. ? Permintaan tarik dipersilakan!

Ada beberapa tips sebelum membuat PR:

  • Harap selalu buat masalah/fitur sebelum menaikkan PR
  • Harap selalu buat contoh minimum yang dapat direproduksi untuk suatu masalah
  • Harap gunakan ekstensi DART resmi sebagai formatter Anda atau gunakan dart format . -l 80 Jika Anda tidak menggunakan VS Code
  • Harap simpan perubahan Anda pada ruang lingkup minimum yang dibutuhkan (hindari memperkenalkan perubahan yang tidak terkait)
  • Harap ikuti konvensi komitmen git ini dengan menambahkan feat: atau fix: ke komitmen PR Anda
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua