Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

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 CheckBoxPermitir 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 CheckBoxPermitir Seleção de grupo” habilita a seleção de não continuas (allowDisjointSelection). Pressionando a tecla “ctrl” e selecionando várias datas.
Arquivo main01.mxml
<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

7 comentários

Deixe uma resposta

  1. 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

     
  2. Sim. Mais na época que escrevi o POST só existia para inglês e japonês.

     
  3. 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 ?

     
  4. 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 ?

     
  5. Com Renderer você pode fazer o que quiser...

     
  6. 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!!