calendar_date_picker2

CalendardatePicker2

Ein leichtgewichtiger und anpassbarer Kalender -Picker, der auf Flutter CalendardatePicker basiert, mit Unterstützung für Single -Datum -Picker, Range Picker und Multi Picker.

Einzelmodus	Multi -Modus	Bereichsmodus	Dialogfunktion

Single Scroll	Multi -Scroll	Reichweite	Dialogmuschel

Intro

CalendardatePicker2 besteht aus zwei Hauptwidgets:

• CalendarDatePicker2 , dieses Widget enthält nur die Kalender -Benutzeroberfläche und wird ein Ereignis ausgeben, wenn der Benutzer ein anderes Datum verfolgt.
• CalendarDatePicker2WithActionButtons enthält dieses Widget die Kalender -Benutzeroberfläche und die Aktionsschaltflächen (Abbrechen & OK). Dieses Widget wird nur den aktualisierten Wert ausgeben, wenn der Benutzer die Schaltfläche "OK" aufnimmt.

Merkmale

• Der erweiterte KalendardatePicker ermöglicht null initialdate
• Hochpassbare Benutzeroberfläche
• Unterstützt drei Modi: Single, Multi und Range
• Unterstützt vier Ansichten: Tag, Monat, Jahr und Schriftrolle
• Eingebaute showCalendarDatePicker2Dialog
• Multisprachiger Unterstützung
• Unterstützung von Material 3

Migrieren von 0.xx

Version 1.xx aktiviert standardmäßig die Month Picker. Wenn Sie von v0.xx auf v1.xx migrieren möchten und das alte Verhalten beibehalten möchten, müssen Sie disableMonthPicker auf true festlegen.

Wie man benutzt

Schauen Sie sich Beispiele für weitere Details an.

Installation

Fügen Sie pubspec.yaml die folgende Zeile hinzu:

 dependencies :
calendar_date_picker2 : ^1.1.8

Basic Setup

Das vollständige Beispiel ist hier verfügbar.

Bei CalendardatePicker2 müssen Sie config und value angeben:

• config enthält die Konfigurationen für Ihr Kalender -Setup und Ihre Benutzeroberfläche.
• value sind Erstwerte, die in Ihren Kalenderpicker übergeben wurden, muss value eine List sein.

Die Mindestablagenprobe

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

Einzeldate -Picker -Konfiguration

Während der Initialisierung von CalendarDatePicker2Config wird der calendarType der Konfigurationsinstanz standardmäßig auf CalendarDatePicker2Type.single eingestellt, sodass Sie den Kalendertyp nicht speziell festlegen müssen.

Multi -Date -Picker -Konfiguration

Um den Multi -Modus -Datumspicker zu verwenden, müssen Sie den Kalendartyp der Konfiguration auf CalendarDatePicker2Type.multi festlegen:

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

Konfiguration von Bereichsdatum -Picker -Konfiguration

Um den Date -Datumspicker der Bereichsmodus zu verwenden, müssen Sie den Kalendartyp der Konfiguration auf CalendarDatePicker2Type.range festlegen:

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

Verwenden Sie die integrierte Dialog-Anzeigemethode

Dieses Paket beinhaltet integrierte Unterstützung, um den Kalender als Dialog anzuzeigen. Um es zu verwenden, müssen Sie showCalendarDatePicker2Dialog aufrufen, das drei erforderliche Argumente aufnimmt: context , config , dialogSize :

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

Konfigurationsoptionen

Für CalendardatePicker2 Widget

Argument	Typ	Beschreibung
Konfiguration	CalendardatePicker2Config	Konfigurationen mit Kalender -UI -bezogenen Konfigurationen
Wert	Liste <DateTime?>	Die ausgewählten [DateTime] s, die der Auswahl an anzeigen sollte.
Onvaluechanged	ValueChanged <list <datetime >>?	Aufgerufen, wenn sich die ausgewählten Daten änderten
angezeigtes montHdate	Datetime?	Datum der Kontrolle des Kalenders angezeigtem Monat
ONDISPLYEDMONTHCHANGED	ValueChanged <DateTime>?	Angerufen, wenn der Benutzer im Picker im Nicht-Scroll-Modus zu einem neuen Monat/Jahr navigiert

Für CalendardatePicker2Config:

Option	Typ	Beschreibung
Kalendartyp	CalendardatePicker2Type?	Der Kalender -Picker -Typ hat 3 Werte: Single, Multi, Bereich
Rangebidirektional	bool?	Flag, um die Auswahl des Datenbereichs auch in umgekehrter chronologischer Reihenfolge zu ermöglichen
Firstdate	Datetime?	Der früheste zulässige Benutzer datetime kann auswählen
Lastdate	Datetime?	Der neueste zulässige Benutzer datetime kann auswählen
Stromdatum	Datetime?	Die heute repräsentierte DateTime, die im Kalender umrissen wird
KalenderviewMode	CalendardatePicker2Mode?	Die ursprünglich angezeigte Ansicht des Kalender -Pickers mit vier Optionen: Tag, Monat, Jahr und Scrollen
KalenderviewScrollPhysics	Scrollphysik?	Die Bildlaufphysik für den Kalendermonatansicht
Dynamiccalendarrows	bool?	Flag, um dynamische Kalenderzeilen basierend auf einem bestimmten Monat zu ermöglichen
Ermöglicht die Auswahl der Name	bool?	Flagge zur Kontrolle [OnvaluEchanged] Verhalten
AnimatetodisedmonthDate	bool?	Fahnen Sie an immer auf das Displaydonthdate an
Semantikdingung	Karte?	Custom Dictionary für Semantiketiketten
Deaktivierungsvibration	bool?	Fahnen Sie zur Deaktivierung der Vibrationen bei der Auswahl der Datums
Wochentaglabel	Liste <String>?	Benutzerdefinierte Wochentagsetiketten, sollten mit Sonntag beginnen
WeedayLabeltextStyle	Textstyle?	Benutzerdefinierte Textstil für Wochentagsetiketten
Wochentagslabelbuilder	WochentagslabelBuilder?	Funktion zur vollständigen Kontrolle über Wochentags -Label -Widget
Erstes Tag der Woche	int?	Index des ersten Wochestages, wo 0 Punkte bis Sonntag und 6 Punkte bis Samstag.
lastmonthicon	Widget?	Benutzerdefiniertes Symbol für die Schaltfläche "Button Control der letzten Monat"
Hidelastmonthicon	bool?	Flagge, um die Ikone des letzten Monats zu verbergen
Nextmonthicon	Widget?	Benutzerdefiniertes Symbol für den nächsten Monat Schaltfläche Steuerung
HIDENEXTMONTHICON	bool?	Flagge, um den nächsten Monat zu verbergen, Ikone
Kontrollschicht	doppelt?	Benutzerdefinierte Höhe für die Höhe des Kalendersteuerungsgröße
ControlStextstyle	Textstyle?	Benutzerdefinierte Textstil für den Kalendermodus Umschaltungssteuerung
CENTERAGNMODEPICKER	bool?	Fahnen Sie die Zentralisierung des Jahr- und Monat Textetiketts in den Steuerelementen an
modepickersgap	doppelt?	Benutzerdefinierte Lücke zwischen Monats- und Jahrmodus -Pickern
deaktiviert	bool?	Flag, um den Modus -Picker zu deaktivieren und das Toggle -Symbol auszublenden
modepickerTeThandler	ModePickerTeThandler?	Funktion zum Steuerungsmodus -Picker angezeigt Text angezeigt
modsepickerbuilder	Modepickerbuilder?	Funktion zur vollständigen Steuerung der Modus -Picker -Benutzeroberfläche zur Verfügung
CustomModePickericon	Widget?	Benutzerdefiniertes Symbol für das Symbol für das Modus -Picker -Taste
UseabbrlabelFormonThmodePicker	bool?	Verwenden Sie die Abkürzungsetikett für den Monatsmodus -Picker und funktioniert nur, wenn der Monats -Picker aktiviert ist
DayViewController	PageController?	Benutzerdefinierte Seitencontroller für die Ansicht des Kalendertages
Daymaxwidth	doppelt?	Maximale Breite des Tages Widget. Wenn [Daymaxwidth] nicht null ist, wird die Standardeinstellungen der Standardgrößen überschrieben
Tagesbundradius	Borderradius?	Benutzerdefinierte Grenzradius für Tagesindikator
DayTextStyle	Textstyle?	Benutzerdefinierte Textstil für den Kalendertag (en)
HeuteTextStyle	Textstyle?	Benutzerdefinierte Textstil für den aktuellen Kalendertag (en)
deaktiviertDayTextStyle	Textstyle?	Benutzerdefinierter Textstil für deaktivierte Kalendertag (en)
DayTextStylePredicate	DayTextStylePredicate?	Funktion zur vollständigen Kontrolle über den Textstil des Kalendertages
ausgewählte DayHighlightColor	Farbe?	Der ausgewählte Tag der Highlight -Farbe
ausgewählte DayTextStyle	Textstyle?	Benutzerdefinierte Textstil für ausgewählte Kalendertag (en)
selectabledayPredicate	SeletableableDayPredicate?	Funktion zur vollständigen Kontrolle über welche Daten im Kalender ausgewählt werden können
SelectedRangeDayTextStyle	Textstyle?	Benutzerdefinierte Textstil für ausgewählte Reichweite Kalendertag (en)
SelectedRangeHighlightColor	Farbe?	Die Highlight -Farbe für Tag (en) im ausgewählten Bereich enthalten
SelectedRangeDecorationPredicate	SelectedRangeDecorationPredicate?	Prädikat, um die Tageswidget -Boxdekoration für einen Tag im ausgewählten Bereich zu bestimmen
SelectedRangeHighlightBuilder	SelectedRangeHighlightBuilder?	Funktion zur vollständigen Kontrolle über den Reichwähler -Highlight
DAYSPLASHCOLOR	Farbe?	Die Spritzfarbe des Tages Widget
Daybuilder	Daybuilder?	Funktion, um die volle Kontrolle über die tägliche Widget -Benutzeroberfläche zu liefern
Tagesmodescrollldirection	Achse?	Axis Scroll -Richtung für [CalendardatePicker2Mode.Day] -Modus
monatViewController	ScrollController?	Benutzerdefinierte Scroll -Controller für die Kalendermonatansicht
MonatBuilder	Monatbuilder?	Funktion zur vollständigen Kontrolle über den Monat Widget UI
HIDONMONTHPICKERDIVISHERS	bool?	Flagge, um Trenner im Monat Picker zu verbergen
selectableMonDonThPredicate	SelectableMonDeThPredicate?	Funktion zur vollständigen Kontrolle darüber, welcher Monat in der Monatsliste ausgewählt werden kann.
Behinderungstichpicker	bool?	Flagge, um den Month Picker zu deaktivieren
MonatTextStyle	Textstyle?	Benutzerdefinierte Textstil für Monat (en)
SelectedMonthTextStyle	Textstyle?	Benutzerdefinierte Textstil für ausgewählte Monate (en)
DisabledMonthTextStyle	Textstyle?	Benutzerdefinierte Textstil für deaktivierte Monate (en)
YearViewController	ScrollController?	Benutzerdefinierte Scroll -Controller für die Ansicht des Kalenderjahres
JahrBorderradius	Borderradius?	Custom Border Radius für Jahr Indikator
YearTextStyle	Textstyle?	Benutzerdefinierte Textstil für Jahr (en)
SelectedyeArtextStyle	Textstyle?	Benutzerdefinierter Textstil für ausgewählte Jahr (en)
DisabledyeartextStyle	Textstyle?	Benutzerdefinierter Textstil für Behinderte Jahr (en)
SelectableyearPredicate	SelectableyearPredicate?	Funktion zur vollständigen Kontrolle darüber, welches Jahr in der Jahresliste ausgewählt wird.
Jahrbauer	Jahrbauer?	Funktion zur vollständigen Kontrolle über das Jahr Widget UI
HideyearPickerdividers	bool?	Flagge, um Trenner im Jahr Picker zu verbergen
scrollviewTopeAntextstyle	Textstyle?	Benutzerdefinierte Textstil für Scroll -Ansicht der oberen Woche Beschriftungen Header
HIDSCROLLVIEWTOPHEADER	bool?	Flag, um die obere Woche Beschriftungen Header auf dem Scroll View Picker auszublenden
HidescrollViewTopheaDerDivider	bool?	Flag, um die obere Woche zu verbergen. Labels Header -Teiler auf die Bildlaufansicht
HIDSCROLLVIEWMONTHWEEKHEADER	bool?	Flag, um Monatskalenderwoche zu verbergen. Labels Header bei Scroll View
ScrollViewConstraints	Boxconstraints?	Boxconstraints für die Scroll -Kalenderansicht, arbeiten Sie nur für den Bildlaufmodus
ScrollViewmonthyeArbuilder	ScrollViewmonthyeArbuilder?	Funktion zur vollständigen Kontrolle über den Scroll -Kalender -Monat Jahr UI
Scrollviewonscrolling	Scrollviewonscrolling?	Funktion zum Rückruf über das Scrolling in der Bildlaufansicht
ScrollViewController	ScrollController?	Benutzerdefinierte Scroll -Controller in die Scroll -Kalenderansicht

Zusätzlich zu den oben genannten Konfigurationen hat CalendardatePicker2WitActionButtonsConfig 9 zusätzliche Optionen

Option	Typ	Beschreibung
gapbetweencalendarandbuttons	doppelt?	Die Lücke zwischen Kalender- und Aktionstasten
CancelButtonTextStyle	Textstyle?	Textstil für die Schaltfläche Abbrechen
Abbrechen	Widget?	Benutzerdefinierte Schaltfläche Abbrechen
OKButtonTextStyle	Textstyle?	Textstil für OK -Schaltfläche
Okbutton	Widget?	Benutzerdefinierte OK -Schaltfläche
ausgeschaltet aus der Zeit	bool?	Ist der Kalender aus dem Dialog geöffnet
geschlossenealogoncanceltapped	bool?	Schließen Sie den Dialogfeld, nachdem der Benutzer die Schaltfläche Abbrechen abgeschlossen hat
geschlossenealogonoktkaptiert	bool?	Schließen Sie den Dialogfeld, nachdem der Benutzer die OK -Schaltfläche geschaltet hat
Buttonpadding	Kantensets?	Benutzerdefinierte Padding für OK & Stornierungsknöpfe

Benutzerdefinierte Benutzeroberfläche

Durch die Verwendung der oben genannten Konfigurationen können Sie Ihren eigenen benutzerdefinierten Kalender -Picker nach Bedarf erstellen.

 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,
);

Multisprachiger Unterstützung

Dieses Paket enthält mehrsprachige Unterstützung. Um dies zu aktivieren, geben Sie Ihr Locale in das MaterialApp an:

 MaterialApp (
  localizationsDelegates : GlobalMaterialLocalizations .delegates,
  supportedLocales : const [
    Locale ( 'en' , '' ),
    Locale ( 'zh' , '' ),
    Locale ( 'ru' , '' ),
    Locale ( 'es' , '' ),
    Locale ( 'hi' , '' ),
  ],
  ...
);

中文	русский	Español	हिंदी

Beiträge

Fühlen Sie sich frei, zu diesem Projekt beizutragen. ? Pull -Anfragen sind willkommen!

Es gibt einige Tipps, bevor ein PR erstellt wird:

• Bitte erstellen Sie immer ein Problem/eine Funktion, bevor Sie eine PR anheben
• Bitte erstellen Sie immer ein minimal reproduzierbares Beispiel für ein Problem
• Bitte verwenden Sie die offizielle DART -Erweiterung als Ihr Formatierer oder verwenden Sie dart format . -l 80 Wenn Sie keinen VS -Code verwenden
• Bitte behalten Sie Ihre Änderungen an seinem minimal benötigten Bereich bei (Vermeiden Sie es, nicht verwandte Änderungen einzuführen).
• fix: folgen Sie dieser GIT feat: -Konvent