Yii: wstawianie daty w formularzu

Pamiętam czasu kiedy przy formularzu w którym trzeba było podać datę trzeba się było napracować. Bto albo trzeba było zrobić pole tekstowe i mieć nadzieję, że użytkownik wpisze datę w odpowiednim formacie a potem to pole sprytnie walidować i monitować użytkownika o więcej staranności. Można też było zrobić trzy listy rozwijane ale tu też nie było lekko, bo liczba dni zależy od miesiąca a bywa, że i od roku, jak w przypadku lutego. A poza tym ile to się trzeba było naklikać, żeby datę wybrać

Na szczęście idąc z duchem postępu możemy sięgać po nowe, bardzo poręczne narzędzie. Akurat robię ostatnio formularz w którym trzeba podać datę, więc wyszukałam sobie wygodny plugin jQuery UI Datepicker, który jak się okazało jest dołączony do frameworka Yii. Zatem jeśli konstruujemy formularz w oparciu o CActiveForm wystarczy zamiast zwykłego pola tekstowego:

$form->textField($model,'date'); 

wstawić widget:

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date',
    'htmlOptions' => array(
        'size' => '15',         // textField size
        'maxlength' => '10',    // textField maxlength
    ),
));

i już po kliknięciu w pole tekstowe pojawia się klikalna kartka z kalendarza.

jQuery UI Datepicker

Widget można w sporym zakresie parametryzować, żeby lepiej dopasować go do strony. Można na przykład ustawić język.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date',
    'language' => 'pl',    //<-- język
    'htmlOptions' => array(
        'size' => '15',         
        'maxlength' => '10',    
    ),
));

jQuery UI Datepicker

Przy zapisie danych do bazy warto wymusić format (oczywiście przed zapisem trzeba ten format jednak sprawdzić w razie gdyby jakiś kawalarz chciał wpisac datę ręcznie).

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date',
    'language' => 'pl',     
    'options' => array(
         'dateFormat' => 'yy-mm-dd',     //<-- format daty
     ),     
    'htmlOptions' => array(
        'size' => '15',         
        'maxlength' => '10',    
    ),
));

jQuery UI Datepicker

Można też blokować kalendarz umożliwiając wpisanie daty tylko z jednego miesiąca, jednego roku albo z podanego zakresu lat. ?Można tez zmieniać skórki dopasowując widget pod względem wizualnym.

Leave a Reply

%d bloggers like this: