May 14, 2013

Date Picker trong CakePHP 2.x với Bootstrap

Mục tiêu:


Chọn ngày format dd-mm-yyyy sau đó save vào CSDL trường kiểu date.


Tại View:

 echo $this->Html->script('bootstrap-datepicker.min');
 echo $this->Html->script('bootstrap-datepicker.vi');//File ngôn ngữ cho datepicker
 echo $this->Html->css('bootstrap-datepicker');
<script type="text/javascript">
    $(document).ready(function(){
        $('.datepicker').datepicker({
            language:'vi',
            format:'dd-mm-yyyy'
        });
        });
</script>

Code:

echo $this->BootstrapForm->input('ngay_su_dung', array('label' => 'Ngày sử dụng',
                'type' => 'text',
                'class'=>'datepicker',
                'empty'=>false)
            );


Tại Model:
public $validate = array(
...,
'ngay_su_dung' => array(
            'date' => array(
                'rule' => array('date'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
...
);


Tại controller:
Tại controller sẽ nhận chuổi ngày tháng dạng :dd-mm-yyyy, chúng ta cần 1 đoạn nhỏ code để mọi thứ ok.
public function add(){

 $date=$this->request->data['NhatKySuDung']['ngay_su_dung'];//Nhận chuổi ngày tháng
                    $array_date=  explode('-', $date);//Tách chuổi này thành array(day,month,year)
                    $this->request->data['NhatKySuDung']['ngay_su_dung']=array();
                    $this->request->data['NhatKySuDung']['ngay_su_dung']=array('day'=>$array_date[0],
                        'month'=>$array_date[1],'year'=>$array_date[2]);
}

Full code: 
public function add() {
        if ($this->request->is('post')) {
                    //print_r($this->request->data);
                    $date=$this->request->data['NhatKySuDung']['ngay_su_dung'];
                    //echo $date;
                    $array_date=  explode('-', $date);
                    //print_r($array_date);die;
                    $this->request->data['NhatKySuDung']['ngay_su_dung']=array();
                    $this->request->data['NhatKySuDung']['ngay_su_dung']=array('day'=>$array_date[0],
                        'month'=>$array_date[1],'year'=>$array_date[2]);
                    $current_user_id=$this->Auth->user('id');
                    $this->request->data['NhatKySuDung']['user_id']=$current_user_id;
            $this->NhatKySuDung->create();
            if ($this->NhatKySuDung->save($this->request->data)) {
                $this->Session->setFlash(
                    __('The %s has been saved', __('nhat ky su dung')),
                    'alert',
                    array(
                        'plugin' => 'TwitterBootstrap',
                        'class' => 'alert-success'
                    )
                );
                $this->redirect(array('action' => 'index'));
            } else {
                $this->Session->setFlash(
                    __('The %s could not be saved. Please, try again.', __('nhat ky su dung')),
                    'alert',
                    array(
                        'plugin' => 'TwitterBootstrap',
                        'class' => 'alert-error'
                    )
                );
            }
        }
        $taiSans = $this->NhatKySuDung->TaiSan->find('list');
        $nguoiSuDungs = $this->NhatKySuDung->NguoiSuDung->find('list');
        $users = $this->NhatKySuDung->User->find('list');
        $this->set(compact('taiSans', 'nguoiSuDungs', 'users'));
    }

View:
<?php
    echo $this->Html->script('bootstrap-datepicker.min');
    echo $this->Html->script('bootstrap-datepicker.vi');
    echo $this->Html->script('bootstrap-timepicker.min');
    echo $this->Html->css('bootstrap-datepicker');
    echo $this->Html->css('bootstrap-timepicker');



?>
<div class="row-fluid">
    <div class="span9">
        <?php echo $this->BootstrapForm->create('NhatKySuDung', array('class' => 'form-horizontal')); ?>
        <fieldset>
            <legend><?php echo __('Add %s', __('Nhat Ky Su Dung')); ?></legend>
            <?php
            echo $this->BootstrapForm->input('tai_san_id', array(
                'required' => 'required',
                'helpInline' => '<span class="label label-important">' . __('Required') . '</span>&nbsp;')
            );
            echo $this->BootstrapForm->input('nguoi_su_dung_id', array(
                'required' => 'required',
                'helpInline' => '<span class="label label-important">' . __('Required') . '</span>&nbsp;')
            );
            echo $this->BootstrapForm->input('ngay_su_dung', array('label' => 'Ngày sử dụng',
                'type' => 'text',
                'class'=>'datepicker',
                'empty'=>false)
            );
            echo $this->BootstrapForm->input('user_id', array(
                'required' => 'required',
                'helpInline' => '<span class="label label-important">' . __('Required') . '</span>&nbsp;')
            );
            echo $this->BootstrapForm->input('ngay_tao', array(
                'required' => 'required',
                'helpInline' => '<span class="label label-important">' . __('Required') . '</span>&nbsp;')
            );
            echo $this->BootstrapForm->input('gio_bat_dau',array('class'=>'timepicker','type'=>'text'));
            echo $this->BootstrapForm->input('gio_ket_thuc',array('class'=>'timepicker','type'=>'text'));
            echo $this->BootstrapForm->input('dia_diem');
            echo $this->BootstrapForm->input('ghi_chu');
            echo $this->BootstrapForm->input('trang_thai', array(
                'required' => 'required',
                'helpInline' => '<span class="label label-important">' . __('Required') . '</span>&nbsp;')
            );
            ?>
            <?php echo $this->BootstrapForm->submit(__('Submit')); ?>
        </fieldset>
        <?php echo $this->BootstrapForm->end(); ?>
    </div>
    <div class="span3">
        <div class="well" style="padding: 8px 0; margin-top:8px;">
            <ul class="nav nav-list">
                <li class="nav-header"><?php echo __('Actions'); ?></li>
                <li><?php echo $this->Html->link(__('List %s', __('Nhat Ky Su Dungs')), array('action' => 'index')); ?></li>
                <li><?php echo $this->Html->link(__('List %s', __('Tai Sans')), array('controller' => 'tai_sans', 'action' => 'index')); ?></li>
                <li><?php echo $this->Html->link(__('New %s', __('Tai San')), array('controller' => 'tai_sans', 'action' => 'add')); ?></li>
                <li><?php echo $this->Html->link(__('List %s', __('Nguoi Su Dungs')), array('controller' => 'nguoi_su_dungs', 'action' => 'index')); ?></li>
                <li><?php echo $this->Html->link(__('New %s', __('Nguoi Su Dung')), array('controller' => 'nguoi_su_dungs', 'action' => 'add')); ?></li>
                <li><?php echo $this->Html->link(__('List %s', __('Users')), array('controller' => 'users', 'action' => 'index')); ?></li>
                <li><?php echo $this->Html->link(__('New %s', __('User')), array('controller' => 'users', 'action' => 'add')); ?></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.datepicker').datepicker({
            language:'vi',
            format:'dd-mm-yyyy'
        });
        $('.timepicker').timepicker();
    });
</script>

Model:

<?php
App::uses('AppModel', 'Model');
/**
 * NhatKySuDung Model
 *
 * @property TaiSan $TaiSan
 * @property NguoiSuDung $NguoiSuDung
 * @property User $User
 */
class NhatKySuDung extends AppModel {

/**
 * Display field
 *
 * @var string
 */
    public $displayField = 'tai_san_id';


       
/**
 * Validation rules
 *
 * @var array
 */
    public $validate = array(
        'tai_san_id' => array(
            'numeric' => array(
                'rule' => array('numeric'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'nguoi_su_dung_id' => array(
            'numeric' => array(
                'rule' => array('numeric'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'ngay_su_dung' => array(
            'date' => array(
                'rule' => array('date'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'user_id' => array(
            'numeric' => array(
                'rule' => array('numeric'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'ngay_tao' => array(
            'datetime' => array(
                'rule' => array('datetime'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'gio_bat_dau' => array(
            'time' => array(
                'rule' => array('time'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'gio_ket_thuc' => array(
            'time' => array(
                'rule' => array('time'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
        'trang_thai' => array(
            'numeric' => array(
                'rule' => array('numeric'),
                //'message' => 'Your custom message here',
                //'allowEmpty' => false,
                //'required' => false,
                //'last' => false, // Stop validation after this rule
                //'on' => 'create', // Limit validation to 'create' or 'update' operations
            ),
        ),
    );

    //The Associations below have been created with all possible keys, those that are not needed can be removed

/**
 * belongsTo associations
 *
 * @var array
 */
    public $belongsTo = array(
        'TaiSan' => array(
            'className' => 'TaiSan',
            'foreignKey' => 'tai_san_id',
            'conditions' => '',
            'fields' => '',
            'order' => ''
        ),
        'NguoiSuDung' => array(
            'className' => 'NguoiSuDung',
            'foreignKey' => 'nguoi_su_dung_id',
            'conditions' => '',
            'fields' => '',
            'order' => ''
        ),
        'User' => array(
            'className' => 'User',
            'foreignKey' => 'user_id',
            'conditions' => '',
            'fields' => '',
            'order' => ''
        )
    );
}







No comments:

Post a Comment