Trabalhando com DateChooser

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

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

<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