Saturday, 11 August 2012

Steps to Implement Datepicker in CakePHP


1) Download Jquery UI library from http://jqueryui.com/download/. In my case I have downloaded version 1.8.22 library. Extract downloaded zip folder. 

2) Copy \js\jquery-ui-version.custom.min.js file to \app\webroot\js\jquery-ui-version.custom.min.js 

If you have not included jquery main file then also copy

\js\jquery-version.min.js file to \app\webroot\js\jquery-version.min.js 

3) Copy  \css\ui-lightness\jquery-ui-version.custom.css file to \app\webroot\css\jquery-ui-version.custom.css 

4) Copy all images from \css\ui-lightness\images\.. to \app\webroot\img\...  

5) Open \app\webroot\css\jquery-ui-version.custom.css file and replace "images/" text(path) with "../img/".

6) Open view file and include following two lines : I have mentioned my file names here.

<?php echo $this->Html->css('jquery-ui-1.8.22.custom'); ?>
<?php echo $this->Html->script('jquery-1.8.2.min'); ?>
<?php echo $this->Html->script('jquery-ui-1.8.22.custom.min'); ?>

7) Add a div with id "datepicker" where you want to display calender. e.g 

I have took three divs to make everything clear. Please use CakePHP convetions to generate form and it's fileds. To make everything clear I opted static html.

<div style="height:500px;">
        <div style="clear:both;float:left;padding-left:60px;"><H1>DatePicker Example</H1></div>
        <div class="cb">&nbsp;</div>
        <?php echo $this->Form->create(false); ?>
        <?php echo $this->Form->input("date", array('label' => "Date : ", 'type' => 'text', 'class' => 'fl tal vat w300p', 'error' => false , 'id' => 'select_date')); ?>
        <?php echo $this->Html->div('datepicker_img w100p fl pl460p pa', $this->Html->image('datepicker_calendar_icon.gif'),array('id' => 'datepicker_img')); ?>
        <?php echo $this->Html->div('datepicker fl pl460p pa', ' ' ,array('id' => 'datepicker')); ?>
        <div class="cb">&nbsp;</div>
        <?php echo $this->Form->end(); ?>
</div>

8) Add following javascript code at end of the file.
               
        $(document).ready(function(){
              $("#datepicker_img img").click(function(){
                     $("#datepicker").datepicker(
                    {
                           dateFormat: 'yy-mm-dd',
                           onSelect: function(dateText, inst){
                                 $('#select_date').val(dateText);
                                 $("#datepicker").datepicker("destroy");
                          }
                     }
                     );
               });
        });

When user will click on image a calender would appear. Select data and it would convert the date into ISO format yyyy-mm-dd and populate input box. After that calender would get destryoed.
That's it. If you have any question or any doubt please let me know through comments.

Thanks!!!!!!! Enjoy Programming :)


9 comments:

  1. Replies
    1. Please check demo here : http://dev.dirtyhandsphp.com/cakephp/Home/datepicker/

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Replies
    1. Please check demo here : http://dev.dirtyhandsphp.com/cakephp/Home/datepicker/

      Delete
  4. Please check demo here : http://dev.dirtyhandsphp.com/cakephp/Home/datepicker/

    ReplyDelete
  5. Shiv bhai u are great.

    ReplyDelete

Thanks for your valuable comments.

Odoo 10: Close wizard and open standard form

Hi, Today we are going to learn how to open standard form after saving data in wizard. Let's say I have created an wizard to fill bas...