calendar_date_picker2

Calendardatepicker2

Um seletor de calendário leve e personalizável baseado no Flutter CalendardatePicker, com suporte para seletor de data, seletor de gama e seleção de vários.

modo único	MODO MULTI	modo de alcance	Função de diálogo

rolagem única	Multi Scroll	rolagem de alcance	Rolagem de diálogo

Introdução

CalendardatePicker2 consiste em dois widgets principais:

• CalendarDatePicker2 , esse widget inclui apenas a interface do usuário do calendário e emitirá um evento sempre que o usuário tocar uma data diferente.
• CalendarDatePicker2WithActionButtons , esse widget inclui interface do usuário do calendário e os botões de ação (Cancelar e OK). Este widget emitirá apenas o valor atualizado quando o usuário tocar no botão 'OK'.

Características

• Calendardatepicker estendido permite null InitialDate
• UI altamente personalizável
• Suporta três modos: único, multi e range
• Suporta quatro visualizações: dia, mês, ano e rolagem
• showCalendarDatePicker2Dialog integral
• Suportes multi-linguagem
• Apoio ao material 3

Migrar de 0.xx

Versão 1.xx Por padrão, o seletor de ativação do mês. Se você deseja migrar para v1.xx da v0.xx e gostaria de manter o comportamento antigo, precisará definir disableMonthPicker como true .

Como usar

Verifique os exemplos para obter mais detalhes.

Instalação

Adicione a seguinte linha ao pubspec.yaml :

 dependencies :
calendar_date_picker2 : ^1.1.8

Configuração básica

O exemplo completo está disponível aqui.

CalendardatePicker2 exige que você forneça config e value :

• config contém as configurações para sua configuração de calendário e interface do usuário.
• value é os valores iniciais passados ​​para o seu seletor de calendário, value deve ser uma List .

A amostra mínima de trabalho

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

Configuração do selecionador de data única

Durante a inicialização do CalendarDatePicker2Config , o calendarType da instância de configuração será definido por padrão como CalendarDatePicker2Type.single , para que você não precise definir o tipo de calendário especificamente.

Configuração do seletor de várias data

Para usar o seletor de data de vários modos, você precisará definir o calendário do Config como CalendarDatePicker2Type.multi :

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

Configuração do seletor de data de data

Para usar o seletor de data do modo de alcance, você precisará definir o CalENDARTYPE de config como CalendarDatePicker2Type.range :

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

Use o método de exibição de diálogo interno

Este pacote inclui suporte interno para exibir o calendário como uma caixa de diálogo. Para usá -lo, você precisará ligar para showCalendarDatePicker2Dialog , que leva três argumentos necessários: context , config , diálogo: dialogSize :

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

Opções de configuração

Para o widget calendardatepicker2

Argumento	Tipo	Descrição
Config	Calendardatepicker2config	Configurações relacionadas à interface do usuário do calendário
valor	Lista <DateTime?>	Os selecionados [DateTime] s que o seletor deve exibir.
onvaluechanged	Valuechanged <List <TateTime>>?	Chamado quando as datas selecionadas foram alteradas
ExibirMONTHDATE	DateTime?	Data para controlar o calendário exibido mês
OnDisplayedmonthChanged	Valuechanged <TateTime>?	Chamado quando o usuário navega para um novo mês/ano no seletor no modo não rolante

Para calendardatepicker2config:

Opção	Tipo	Descrição
CalendarType	Calendardatepicker2type?	Tipo de seletor de calendário, tem 3 valores: único, multi, intervalo
rangebidirecional	bool?	Sinalizador para permitir a seleção de datas também em ordem crônica reversa
FirstDate	DateTime?	O usuário mais antigo do DateTime permitido pode selecionar
lastdate	DateTime?	O mais recente usuário do DateTime permitido pode selecionar
CurrentDate	DateTime?	O tempo de dados representando hoje que será descrito no calendário
CalendarViewMode	Calendardatepicker2mode?	A visualização inicialmente exibida do seletor do calendário, com quatro opções disponíveis: dia, mês, ano e rolagem
CalendarViewScrollphysics	Scrollphysics?	A física de rolagem para a visualização do mês do calendário
DynamicCalendarArws	bool?	Sinalizador para ativar linhas de calendário dinâmico com base em mês específico
PermiteMameValueSelection	bool?	Bandeira para controlar o comportamento [Onvaluechanged]
animateTodisplayedmonthtate	bool?	Sinalize para sempre animar o Monthor
SemanticsDictionary	Mapa?	Dicionário personalizado para etiquetas semânticas
desabilitar vibração	bool?	Sinalizador para desativar a vibração na seleção de data
SeanDaylabels	List <String>?	Etiquetas personalizadas da semana, devem começar com domingo
SeanDayLabelTextStyle	TextStyle?	Estilo de texto personalizado para etiquetas durante a semana
SeanDaylabelbuilder	SeanDaylabelbuilder?	Função para fornecer controle total durante o widget da etiqueta do dia da semana
Primeiro dia da semana	int?	Índice do primeiro dia da semana, onde 0 pontos para domingo e 6 pontos para sábado.
LastMonthicon	Widget?	Ícone personalizado para o controle do botão no mês passado
Hidelastmothicon	bool?	Bandeira para esconder o ícone do mês passado
Nextmonthicon	Widget?	Ícone personalizado para o controle do botão no próximo mês
Hidenextmothicon	bool?	Bandeira para se esconder no próximo mês do ícone
ControlSheight	dobro?	Altura personalizada para o controle do calendário Altura de alternância
ControlStExtStyle	TextStyle?	Estilo de texto personalizado para controle de alternância do modo calendário
centralignmodepicker	bool?	Bandeira para centralizar a etiqueta de texto do ano e mês em controles
MODEPICKERSGAP	dobro?	Distância de lacuna personalizada entre os selecionadores de modo de mês e ano
Desablemodepicker	bool?	Sinalizador para desativar o seletor de modo e ocultar o ícone de alternância
modepickertexthandler	Modepickertexthandler?	Função para controlar Modo Picker Texto exibido
ModePickerBuilder	ModePickerBuilder?	Função para fornecer controle total sobre a interface do usuário do seletor de modo
custommodepickericon	Widget?	Ícone personalizado para o ícone do botão de seleção de modo
UseabbrlabelfformOnthmodepicker	bool?	Use o rótulo de abreviação para o seletor de modo de mês, só funciona quando o seletor do mês estiver ativado
DayViewController	PageController?	Controlador de página personalizado para a visualização do dia do calendário
DayMaxWidth	dobro?	Largura máxima do widget do dia. Quando [DaymaxWidth] não é nulo, ele substituirá as configurações de tamanho padrão
Dayborderradius	Fronteira?	Raio de borda personalizado para indicador diurno
DayTextStyle	TextStyle?	Estilo de texto personalizado para os dias do calendário
TodayTextStyle	TextStyle?	Estilo de texto personalizado para os dias atuais do calendário
DisabledDayTextStyle	TextStyle?	Estilo de texto personalizado para os dias de calendário deficientes
DayTextStylePredicate	DayTextStylePredicate?	Função para fornecer controle total sobre o dia (s) de texto (s) de texto (s) do calendário
SelecteddayDayhighlightcolor	Cor?	O dia de destaque da cor selecionada
SelectedDayTexTStyle	TextStyle?	Estilo de texto personalizado para dia (s) de calendário selecionado
SelecioneBableDayPredicate	SelectableDableDayPredicate?	Função para fornecer controle total sobre quais datas no calendário podem ser selecionadas
SelectedRangedayTextStyle	TextStyle?	Estilo de texto personalizado para o (s) dia (s) de calendário selecionado
SelectedRangeHighlightColor	Cor?	A cor de destaque para o dia (s) incluído no intervalo selecionado
SelectedRangedEcorationPredicate	SelectedRangedEcorationPredicate?	Predicar para determinar a decoração da caixa de widgets do dia por um dia em alcance selecionado
SelectedRangeHighlightbuilder	SelectedRangeHighlightbuilder?	Função para fornecer controle total sobre destaque do seletor de gama
DaysplashColor	Cor?	A cor do splash do widget
Daybuilder	Daybuilder?	Função para fornecer controle total sobre o widget de interface do dia
DayModescrollDirection	Eixo?	Direção de rolagem do eixo para o modo [calendardatepicker2mode.day]
MonthViewController	Scrollcontroller?	Controlador de rolagem personalizado para a visualização do mês do calendário
Monthbuilder	Monthbuilder?	Função para fornecer controle total sobre o widget UI
Hidemonthpickerdividers	bool?	Bandeira para ocultar divisores no mês do mês
SelectablemonhenThPredicate	Selectablemonhenthpredicate?	Função para fornecer controle total sobre qual mês na lista do mês pode ser selecionado.
Disablemonthpicker	bool?	Bandeira para desativar o seletor do mês
MonthTextStyle	TextStyle?	Estilo de texto personalizado para o (s) mês (s)
SelectedmonthTextStyle	TextStyle?	Estilo de texto personalizado para o (s) mês (s) selecionado (s)
DisableMOntHTextStyle	TextStyle?	Estilo de texto personalizado para mês deficiente (s)
ano VIViário do ano	Scrollcontroller?	Controlador de rolagem personalizado para a visualização do ano civil
Ano de Bordanha	Fronteira?	Raio de fronteira personalizado para indicador de ano
YearTextStyle	TextStyle?	Estilo de texto personalizado para ano (s)
SelectedYearTextStyle	TextStyle?	Estilo de texto personalizado para ano (s) selecionado (s)
DisabledyEarTextStyle	TextStyle?	Estilo de texto personalizado para ano (s) deficiente (s)
Selectableyearpredicate	SelectableYearpredicate?	Função para fornecer controle total sobre qual ano o ano é selecionado.
Yearbuilder	Yearbuilder?	Função para fornecer controle total durante o ano widget ui
hideyearpickerdividers	bool?	Bandeira para esconder divisores no ano do ano
scrollViewTopheadeRTextStyle	TextStyle?	Estilo de texto personalizado para rótulos de rolagem de rolagem Cabeçalho de etiquetas de primeira semana
HidescrollViewTopheader	bool?	Sinalizador para ocultar o cabeçalho dos rótulos da primeira semana no seletor de rolagem de rolagem
HidescrollViewTopheaderDivider	bool?	Sinalizador para ocultar o divisor de cabeçalho de rótulos da semana de primeira semana na visualização de rolagem
HidescrollViewMONHWeekHeeker	bool?	Bandeira para ocultar o cabeçalho da semana do calendário do mês na visualização de rolagem
ScrollViewConstraints	BoxConstraints?	BoxConstrans para a visualização do calendário de rolagem, só trabalhe para o modo de rolagem
ScrollViewMOTHYEARBUILDER	ScrollViewMóthyearbuilder?	Função para fornecer controle total sobre a interface do usuário do mês do mês de rolagem
scrollViewOnScrolling	ScrollViewOnScrolling?	Função para retorno de chamada sobre rolagem na visualização de rolagem
scrollViewController	Scrollcontroller?	Controlador de rolagem personalizado para a visualização do calendário de rolagem

Além das configurações acima, CalendardatePicker2WithActionButTonsConfig tem 9 opções extras

Opção	Tipo	Descrição
gapbetbetweencaleendArandbuttons	dobro?	A lacuna entre os botões de calendário e ação
CancelButtonTextStyle	TextStyle?	Estilo de texto para cancelar o botão
CancelButton	Widget?	Botão de cancelamento personalizado
OkButtonTextStyle	TextStyle?	Estilo de texto para o OK Button
Okbutton	Widget?	Botão OK personalizado
OpenEdFromdialog	bool?	O calendário é aberto da caixa de diálogo
BOLHEGALOGONCANCELLATADO	bool?	Feche a caixa de diálogo após o usuário tocar o botão de cancelamento
BOLHOGILOGONOKAPT	bool?	Feche a caixa de diálogo após o usuário tocar o botão OK
ButtonPadding	Edgeinsets?	Botões de embrulho personalizado para os botões OK & Cancelar

UI personalizada

Ao usar as configurações acima, você pode fazer seu próprio seletor de calendário personalizado.

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

Suporte de vários idiomas

Este pacote possui suportes de vários idiomas. Para habilitá -lo, adicione seu Locale ao embrulho MaterialApp :

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

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

Contribuições

Sinta -se à vontade para contribuir com este projeto. ? Os pedidos de puxão são bem -vindos!

Existem algumas dicas antes de criar um PR:

• Por favor, crie sempre um problema/recurso antes de levantar um PR
• Por favor, crie sempre um exemplo reproduzível mínimo para um problema
• Use a extensão oficial do DART como seu formatador ou use dart format . -l 80 se você não estiver usando o código VS
• Por favor, mantenha suas alterações no escopo mínimo necessário (evite introduzir alterações não relacionadas)
• Siga esta Convenção de Commit Git, adicionando feat: ou fix: ao seu compromisso de relações públicas