Bha, venho novamente aqui para falar um pouco do DateChooser. O DateChooser exibe o nome de um mês, o ano, e uma grade de dias do mês, com colunas marcadas para o dia da semana. O usuário poderá selecionar uma data, uma série de datas, ou várias datas. O DateChooser contém botões para frente e para trás para alterar o mês e o ano.
Você pode permitir que usuários selecione várias datas, desabilite a seleção de determinadas datas, e limitar a exibição de um intervalo de datas. Ou seja, um calendário com apenas uma linha de código.
Neste primeiro exemplo, há dois CheckBox que habilitam e desabilitam as múltiplas seleçoes:
- O CheckBox “Permitir Seleção de grupo” habilita a a seleção de um bloco de datas (allowMultipleSelection). Pressionando a tecla “shift” e selecionando um intervalo de datas.
- O CheckBox “Permitir Seleção de grupo” habilita a seleção de não continuas (allowDisjointSelection). Pressionando a tecla “ctrl” e selecionando várias datas.
<mx:CheckBox id="AllowDisjointSelection" x="10" y="81" width="174" selected="true"
label="Permitir Seleção múltipla" />
<mx:CheckBox id="AllowMultipleSelection" x="10" y="56" width="174"
selected="true"
label="Permitir Seleção de grupo" />
<br:DateChooser id="DateChooser" y="105" x="10"
allowMultipleSelection="{AllowMultipleSelection.selected}"
allowDisjointSelection="{AllowDisjointSelection.selected}" />
<mx:DataGrid id="selDates" y="58" x="192" height="227" width="508"
dataProvider="{DateChooser.selectedRanges}"
labelFunction="FormataDatas"
verticalScrollPolicy="on" >
<mx:columns>
<mx:DataGridColumn dataField="rangeStart" headerText="Data de Início:" />
<mx:DataGridColumn dataField="rangeEnd" headerText="Data de Fim:" />
<mx:DataGridColumn labelFunction="CalculaDias" headerText="Quantidade de Dias:" />
</mx:columns>
</mx:DataGrid>
Veja que neste exemplo estou utilizando uma extensão do DateChooser. Neste arquivo apenas alterei o idioma para português. Veja que utilizei a mesma estrutura de pasta, apenas iniciando com a pasta “br“.
Arquivo br.mx.controls.DateChooser.mxml<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:dayNames>
<mx:Array>
<mx:String>D</mx:String>
<mx:String>S</mx:String>
<mx:String>T</mx:String>
<mx:String>Q</mx:String>
<mx:String>Q</mx:String>
<mx:String>S</mx:String>
<mx:String>S</mx:String>
</mx:Array>
</mx:dayNames>
</mx:DateChooser>
No segundo exemplo, utilizei uma lista para determinar quais dias da semana devem ser desabilitados. Este recurso é útil quando precisamos restringir a seleção dos domingos, por exemplo.
Arquivo main02.mxml<br:DateChooser id="dateChooser" x="10" y="59"
disabledDays="{listaDiasDesabilitados.selectedIndices}"
selectedDate="{new Date()}"
yearNavigationEnabled="true"
change="dateChooser_change(event)" />
<mx:List x="198" y="77" height="162" width="113"
id="listaDiasDesabilitados"
dataProvider="{Semanas}"
allowMultipleSelection="true" />
Para ver o código fonte, clique aqui.
Gostou? Não esqueça de curtir!
Ou compartilhe o link com seus amigos
Siga-me
Fala aii grande Eduardo!!!
blza? seu site tem sido de grande utilidade no meu aprendizado!!
Tenho uma dúvida com o DateField, vc poderia me ajudar? eu queria que quando minha APP fosse carregada ela já fosse exibida a data atual no campo. Tentei usar o showToday="true" porém nao funcionou!!
Saberia algo??? se puder ajudar fico grato!! grande abraçoo!!
[...] DateChooser http://fabiophx.blogspot.com/2009/04/datechoosercustom.html – colorindo com eventos http://blog.mxml.com.br/trabalhando-com-datechooser [...]
Ola Eduardo o exemplo do fabio para coloria a celula do DateChooser, ficou bem bacana, mas seria possível no lugar de colorir colocar uma imagem ?
Com Renderer você pode fazer o que quiser...
bom dia Eduardo,vi o seu post e achei muito legal.
Estou criando uma tela de agendamento e gostaria de saber como proceder para após ser preenchido o grid com as datas poder recuperá-las.
Ja tentei pegar o dataprovider,mas eu nao consigo pegar o valor da coluna que fica o dia.
será que vc poderia me dar uma ajuda ?
Otima dica, vai me ajudar muito, eu gostaria tambem de trocar uma dica, no caso do primeiro exemplo, nao precisa colocar aquele array daynames, se compigurar o flash builder pra compilar com a propriedade "-locale=pt_BR" (sem aspas) todos os componentes com nomes, como o datechooser irao para o portugues. Faça um teste. =D
Sim. Mais na época que escrevi o POST só existia para inglês e japonês.