calendar_date_picker2

CalendardatePicker2

ตัวเลือกปฏิทินที่มีน้ำหนักเบาและปรับแต่งได้ตามปฏิทิน Flutter -Picker พร้อมรองรับตัวเลือกวันที่เดนเดทตัวเลือกระยะและตัวเลือกหลายตัว

โหมดเดี่ยว	โหมดหลาย	โหมดช่วง	ฟังก์ชั่นกล่องโต้ตอบ

ม้วนเดี่ยว	มัลติโรลหลาย	ม้วนช่วง	ม้วนกล่องโต้ตอบ

อินโทร

CalendardatePicker2 ประกอบด้วยสองวิดเจ็ตหลัก:

• CalendarDatePicker2 วิดเจ็ตนี้มีเฉพาะปฏิทิน UI และจะปล่อยเหตุการณ์เมื่อใดก็ตามที่ผู้ใช้แตะวันที่แตกต่างกัน
• CalendarDatePicker2WithActionButtons วิดเจ็ตนี้รวมถึงปฏิทิน UI และปุ่มการกระทำ (ยกเลิก & ตกลง) วิดเจ็ตนี้จะปล่อยค่าที่อัปเดตเมื่อปุ่ม 'ตกลง' ของผู้ใช้เท่านั้น

คุณสมบัติ

• Extended CalendardatePicker ช่วยให้ null initialdate
• UI ที่ปรับแต่งได้สูง
• รองรับสามโหมด: เดี่ยวหลายช่วงและช่วง
• รองรับสี่มุมมอง: วันเดือนปีและม้วน
• ในตัว showCalendarDatePicker2Dialog
• สนับสนุนหลายภาษา
• สนับสนุนวัสดุ 3

โยกย้ายจาก 0.xx

เวอร์ชัน 1.xx จะเป็นค่าเริ่มต้นเปิดใช้งานตัวเลือกเดือน หากคุณต้องการโยกย้ายไปยัง v1.xx จาก v0.xx และต้องการรักษาพฤติกรรมเก่าคุณจะต้องตั้งค่า disableMonthPicker ให้เป็น true

วิธีใช้

ตรวจสอบให้แน่ใจว่าได้ตรวจสอบตัวอย่างสำหรับรายละเอียดเพิ่มเติม

การติดตั้ง

เพิ่มบรรทัดต่อไปนี้ใน pubspec.yaml :

 dependencies :
calendar_date_picker2 : ^1.1.8

การตั้งค่าพื้นฐาน

ตัวอย่างที่สมบูรณ์มีอยู่ที่นี่

CalendArdatePicker2 ต้องการให้คุณจัดเตรียม config และ value :

• config มีการกำหนดค่าสำหรับการตั้งค่าปฏิทินและ UI ของคุณ
• value คือค่าเริ่มต้นที่ส่งผ่านไปยังตัวเลือกปฏิทินของ value จะต้องเป็น List

ตัวอย่างการทำงานขั้นต่ำ

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

การกำหนดค่าตัวเลือกวันที่เดี่ยว

ในระหว่างการเริ่มต้นของ CalendarDatePicker2Config calendarType ของอินสแตนซ์การกำหนดค่าจะตั้งค่าเป็นค่าเริ่มต้นเป็น CalendarDatePicker2Type.single ดังนั้นคุณไม่จำเป็นต้องตั้งค่าประเภทปฏิทินโดยเฉพาะ

การกำหนดค่าตัวเลือกวันที่หลายวัน

ในการใช้ตัวเลือกวันที่หลายโหมดคุณจะต้องตั้งค่าปฏิทินของ config เป็น CalendarDatePicker2Type.multi :

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

การกำหนดค่าช่วงวันที่ตัวเลือก

ในการใช้ตัวเลือกวันที่โหมดช่วงคุณจะต้องตั้งค่าปฏิทินของ config เป็น CalendarDatePicker2Type.range :

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

ใช้วิธีการแสดงกล่องโต้ตอบในตัว

แพ็คเกจนี้มีการสนับสนุนในตัวเพื่อแสดงปฏิทินเป็นกล่องโต้ตอบ ในการใช้งานคุณจะต้องเรียก showCalendarDatePicker2Dialog ซึ่งต้องใช้อาร์กิวเมนต์ที่จำเป็นสามประการ: context , config , dialogSize :

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

ตัวเลือกการกำหนดค่า

สำหรับวิดเจ็ต CalendardAtePicker2

การโต้แย้ง	พิมพ์	คำอธิบาย
การกำหนดค่า	CalendardatePicker2Config	ปฏิทิน UI การกำหนดค่าที่เกี่ยวข้อง
ค่า	รายการ <DateTime?>	[DateTime] ที่เลือกซึ่งตัวเลือกควรแสดง
onvaluechanged	ValueChanged <list <DateTime>>?	เรียกว่าเมื่อวันที่ที่เลือกเปลี่ยนไป
แสดง	DateTime?	วันที่ควบคุมปฏิทินที่แสดงเดือน
ondisplayedmonthchanged	ValueChanged <DateTime>?	เรียกว่าเมื่อผู้ใช้นำทางไปยังเดือน/ปีใหม่ในตัวเลือกภายใต้โหมดที่ไม่ใช่แบบเลื่อน

สำหรับ CalendardatePicker2Config:

ตัวเลือก	พิมพ์	คำอธิบาย
ปฏิทิน	CalendardatePicker2Type?	ประเภทตัวเลือกปฏิทินมี 3 ค่า: เดี่ยวหลายช่วง
เกี่ยวกับทิศทางรอบทิศทาง	บูล?	ตั้งค่าสถานะเพื่อเปิดใช้งานช่วงวันที่เลือกตามลำดับย้อนกลับแบบโครโนโลยี
วันแรก	DateTime?	ผู้ใช้ DateTime ที่อนุญาตเร็วที่สุดสามารถเลือกได้
วันสุดท้าย	DateTime?	ผู้ใช้ DateTime ที่อนุญาตล่าสุดสามารถเลือกได้
วันปัจจุบัน	DateTime?	DateTime ที่เป็นตัวแทนในวันนี้ซึ่งจะระบุไว้ในปฏิทิน
CalendarViewMode	CalendardatePicker2Mode?	มุมมองที่แสดงครั้งแรกของตัวเลือกปฏิทินที่มีสี่ตัวเลือกให้เลือก: วันเดือนปีและม้วน
CalendarViewScrollphysics	Scrollphysics?	ฟิสิกส์เลื่อนสำหรับมุมมองเดือนปฏิทิน
DynamicCalendArrows	บูล?	ตั้งค่าสถานะเพื่อเปิดใช้งานแถวปฏิทินแบบไดนามิกตามเดือนที่เฉพาะเจาะจง
อนุญาตให้มีการคัดเลือก	บูล?	ธงเพื่อควบคุมพฤติกรรม [onvaluechanged]
AnimatetodisplayedMonthdate	บูล?	ตั้งค่าสถานะให้เคลื่อนไหวเพื่อแสดงผล
semanticsdictionary	แผนที่?	พจนานุกรมที่กำหนดเองสำหรับป้ายกำกับความหมาย
การปิดบัญชี	บูล?	ตั้งค่าสถานะเพื่อปิดการสั่นสะเทือนในการเลือกวันที่
วันธรรมดา	รายการ <String>?	ฉลากวันธรรมดาที่กำหนดเองควรเริ่มต้นด้วยวันอาทิตย์
WeehdayLabelTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับป้ายกำกับวันธรรมดา
WeehdayLabelBuilder	WeehdayLabelBuilder?	ฟังก์ชั่นเพื่อให้การควบคุมอย่างเต็มที่กับวิดเจ็ตฉลากวันธรรมดา
Firstdayofweek	int?	ดัชนีของวันแรกของสัปดาห์ที่ 0 คะแนนถึงวันอาทิตย์และ 6 คะแนนถึงวันเสาร์
LastMonthicon	วิดเจ็ต?	ไอคอนที่กำหนดเองสำหรับการควบคุมปุ่มเดือนที่แล้ว
Hidelastmonthicon	บูล?	ธงเพื่อซ่อนไอคอนเดือนที่แล้ว
Nextmonthicon	วิดเจ็ต?	ไอคอนที่กำหนดเองสำหรับการควบคุมปุ่มเดือนหน้า
Hidenextmonthicon	บูล?	ธงเพื่อซ่อนไอคอนเดือนถัดไป
การควบคุม	สองเท่า?	ความสูงที่กำหนดเองสำหรับความสูงของการควบคุมปฏิทิน
Controlstextstyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับโหมดปฏิทินการควบคุมสลับ
CenteralignModepicker	บูล?	ธงเพื่อรวมศูนย์ข้อความประจำปีและเดือนในการควบคุม
MODEPICKERSGAP	สองเท่า?	ระยะห่างจากช่องว่างที่กำหนดเองระหว่างตัวเลือกโหมดเดือนและปี
คนพิการ	บูล?	ตั้งค่าสถานะเพื่อปิดการใช้งานตัวเลือกโหมดและซ่อนไอคอนสลับ
ModePickertexthandler	ModePickertexthandler?	ฟังก์ชันเพื่อควบคุมโหมดตัวเลือกแสดงข้อความ
modepickerbuilder	ModePickerBuilder?	ฟังก์ชั่นเพื่อให้การควบคุมเต็มโหมดตัวเลือกโหมด UI
CustomModepickericon	วิดเจ็ต?	ไอคอนที่กำหนดเองสำหรับไอคอนปุ่มตัวเลือกโหมด
USEABBRLABELFORMONTHMODEPICKER	บูล?	ใช้ฉลากตัวย่อสำหรับตัวเลือกโหมดเดือนจะใช้งานได้เฉพาะเมื่อเปิดใช้งานตัวเลือกเดือน
dayviewcontroller	PageController?	คอนโทรลเลอร์หน้าแบบกำหนดเองสำหรับมุมมองวันปฏิทิน
daymaxwidth	สองเท่า?	ความกว้างสูงสุดของวิดเจ็ตวัน เมื่อ [daymaxwidth] ไม่เป็นโมฆะมันจะแทนที่การตั้งค่าขนาดเริ่มต้น
DayBorderRadius	Borderradius?	รัศมีเส้นขอบที่กำหนดเองสำหรับตัวบ่งชี้วัน
daytextstyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับวันปฏิทิน (s)
TodayTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับวันปฏิทินปัจจุบัน
disableddayTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับวันปฏิทินปิดใช้งาน
daytextstylepredicate	DayTextStylePredicate?	ฟังก์ชั่นเพื่อให้การควบคุมอย่างเต็มที่ในรูปแบบข้อความวันปฏิทิน
SelecteddayHighlightColor	สี?	วันที่เลือกสีไฮไลต์
SelecteddayTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับวันปฏิทินที่เลือก
Selecedabledaypredicate	SelectedableDayPredicate?	ฟังก์ชั่นเพื่อให้การควบคุมอย่างเต็มที่ว่าวันที่ในปฏิทินสามารถเลือกได้
SelectedRangedayTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับวันปฏิทินช่วงที่เลือก
SelectedRangeHighlightColor	สี?	สีไฮไลต์สำหรับวันที่รวมอยู่ในช่วงที่เลือก
SelectedRangedecorationPredicate	SelectedRangedecorationPredicate?	เพรดิเคตเพื่อพิจารณาการตกแต่งกล่องวิดเจ็ตวันสำหรับวันในช่วงที่เลือก
SelectedRangeHighlightBuilder	SelectedRangeHighlightBuilder?	ฟังก์ชั่นเพื่อให้การควบคุมแบบไฮไลต์ช่วงตัวเลือกช่วง
daysplashcolor	สี?	สีสาดของวิดเจ็ตวัน
ผู้ก่อสร้าง	daybuilder?	ฟังก์ชั่นเพื่อให้การควบคุมอย่างเต็มที่กับวิดเจ็ตวัน UI
Daymodescrolldirection	แกน?	ทิศทางการเลื่อนแกนสำหรับ [CalendardatePicker2Mode.day] โหมด
MonthViewController	ScrollController?	ตัวควบคุมการเลื่อนแบบกำหนดเองสำหรับมุมมองเดือนปฏิทิน
ผู้สร้างรายเดือน	monthbuilder?	ฟังก์ชั่นเพื่อให้การควบคุมเต็มรูปแบบ Month Widget UI
Hidemonthpickerdividers	บูล?	ธงเพื่อซ่อนตัวแบ่งในเดือนที่เลือก
SelectableMonthPredicate	Selectablemonthpredicate?	ฟังก์ชั่นเพื่อให้การควบคุมเต็มรูปแบบในเดือนที่สามารถเลือกรายการเดือน
disablemonthpicker	บูล?	ธงเพื่อปิดการใช้งานตัวเลือกเดือน
MonthTextSyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับเดือน
SelectedMonthTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับเดือนที่เลือก
disabledMonthTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับเดือนที่ปิดใช้งาน
YearViewController	ScrollController?	ตัวควบคุมการเลื่อนแบบกำหนดเองสำหรับมุมมองปีปฏิทิน
YearBorderRadius	Borderradius?	รัศมีเส้นขอบที่กำหนดเองสำหรับตัวบ่งชี้ปี
YeartextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับปี
SelectedYearTextStyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับปีที่เลือก
disabledeartextstyle	TextStyle?	สไตล์ข้อความที่กำหนดเองสำหรับปีที่ปิดใช้งาน
SelectableYearPredicate	SelectableYearPredicate?	ฟังก์ชั่นเพื่อให้การควบคุมเต็มรูปแบบในรายการปีใดในปีที่เลือก
ปี	ปี?	ฟังก์ชั่นเพื่อให้การควบคุมอย่างเต็มที่ในวิดเจ็ตปี UI
Hideyearpickerdivividers	บูล?	ธงเพื่อซ่อนตัวแบ่งในปีที่เลือก
ScrollViewTopheAderTextStyle	TextStyle?	รูปแบบข้อความที่กำหนดเองสำหรับมุมมองสกรอลล์
Hidescrollviewtopheader	บูล?	Flag เพื่อซ่อนส่วนหัวฉลากสัปดาห์บนสุดบนตัวเลือกมุมมองเลื่อน
Hidescrollviewtopheaderdivider	บูล?	ธงเพื่อซ่อนตัวแบ่งส่วนหัวฉลากสุดสัปดาห์บนมุมมองเลื่อน
Hidescrollviewmonthweekheader	บูล?	Flag เพื่อซ่อนส่วนหัวป้ายรายเดือนปฏิทินเดือนบนมุมมอง Scroll
ScrollViewConstraints	BoxConstraints?	BOXCONTRAINTS สำหรับมุมมองปฏิทินสโครลเฉพาะทำงานสำหรับโหมดเลื่อน
Scrollviewmonthyearbuilder	ScrollviewMonthyearbuilder?	ฟังก์ชั่นเพื่อให้การควบคุมอย่างเต็มที่ในเดือนปฏิทินม้วนปี UI ปี UI
Scrollviewonscrolling	Scrollviewonscrolling?	ฟังก์ชั่นการโทรกลับมากกว่าการเลื่อนดูบนมุมมองเลื่อน
ScrollViewController	ScrollController?	คอนโทรลเลอร์เลื่อนแบบกำหนดเองไปยังมุมมองปฏิทินสโครล

นอกเหนือจากการกำหนดค่าข้างต้น CalendardatePicker2WithActionButTonsonfig มี 9 ตัวเลือกเพิ่มเติม

ตัวเลือก	พิมพ์	คำอธิบาย
Gapbetweencalendarandbuttons	สองเท่า?	ช่องว่างระหว่างปฏิทินและปุ่มการกระทำ
CancelButtonTextStyle	TextStyle?	รูปแบบข้อความสำหรับปุ่มยกเลิก
CancelButton	วิดเจ็ต?	ปุ่มยกเลิกที่กำหนดเอง
okbuttontextstyle	TextStyle?	รูปแบบข้อความสำหรับปุ่มตกลง
Okbutton	วิดเจ็ต?	ปุ่มตกลงแบบกำหนดเอง
OpenDialog	บูล?	ปฏิทินเปิดจากกล่องโต้ตอบหรือไม่
clostialogoncanceltapped	บูล?	ปิดกล่องโต้ตอบหลังจากผู้ใช้แตะปุ่มยกเลิก
clostialogonoktapped	บูล?	ปิดกล่องโต้ตอบหลังจากผู้ใช้แตะปุ่มตกลง
buttonpadding	Edgeinsets?	การห่อหุ้มแบบกำหนดเองสำหรับปุ่ม OK & CANCEL

UI ที่กำหนดเอง

โดยใช้การกำหนดค่าด้านบนคุณสามารถสร้างตัวเลือกปฏิทินที่กำหนดเองของคุณเองตามความต้องการของคุณ

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

การสนับสนุนหลายภาษา

แพ็คเกจนี้มีการรองรับหลายภาษา หากต้องการเปิดใช้งานให้เพิ่ม Locale คุณลงใน Wrapping MaterialApp :

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

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

ผลงาน

อย่าลังเลที่จะมีส่วนร่วมในโครงการนี้ - ยินดีต้อนรับคำขอดึง!

มีเคล็ดลับบางอย่างก่อนที่จะสร้าง PR:

• โปรดสร้างปัญหา/คุณสมบัติเสมอก่อนที่จะเพิ่มการประชาสัมพันธ์
• โปรดสร้างตัวอย่างที่ทำซ้ำขั้นต่ำสำหรับปัญหาได้เสมอ
• โปรดใช้ส่วนขยาย DART อย่างเป็นทางการเป็นรูปแบบของคุณหรือใช้ dart format . -l 80 หากคุณไม่ได้ใช้รหัส VS
• โปรดเปลี่ยนแปลงขอบเขตขั้นต่ำที่จำเป็น (หลีกเลี่ยงการแนะนำการเปลี่ยนแปลงที่ไม่เกี่ยวข้อง)
• feat: ติดตามการประชุม GIT fix: