Skip to main content

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 :)


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

Post a comment

Thanks for your valuable comments.

Popular posts from this blog

Odoo: Qweb Templates Cache Issue

Hi Everyone, Today I was working on a hotel booking template in Odoo and changes made in the Qweb template(.xml) were not reflecting on updating module with odoo service restart. Tried few times without any success :(. Finally, I decided to delete the old template from Odoo backend and then update module again and it worked like a charm!! :) Steps to delete template from backend: Settings --> User Interface --> Views --> Search by template name Delete the used template. Although it's a small post, but I'm sure it will meet the purpose and help someone in the future. Thanks!!! Enjoy Programming!! :) Reference Links: =================================== https://www.odoo.com/forum/help-1/question/odoo-cache-and-updating-qweb-templates-84492

Odoo12/13: Add an extra action in the tree view action button

This post will help you to add an action window in Odoo. Odoo13: <act_window id="action_make_bank_payment"              name="Do Bank Payment"              res_model="account.ob.payment"              binding_model="account.move"              view_mode="form"              target="new"              binding_views="list,form"              domain="[('type','=', 'in_invoice')]"              groups="account.group_account_user" /> Odoo12: <act_window id="action_make_bank_payment"              name="Do Bank Payment"              res_model="account.ob.payment"             view_mode="tree,form"              domain="[('type','=', 'in_invoice')]"              groups="account.group_account_user" /> Thanks!!! Enjoy Programming!! :) Reference: https://www.odoo.com/es_

Odoo/OpenERP: one2one relational field example

one2one relational field is deprecated in OpenERP version>5 but you can achieve the same using many2one relational field. You can achieve it in following two ways : 1) using many2one field in both the objects ( http://tutorialopenerp.wordpress.com/2014/04/23/one2one/ ) 2)  using inheritance by deligation You can easily find the first solution with little search over internet so let's start with 2nd solution. Scenario :  I want to create a one2one relation between two objects of openerp hr.employee and hr.employee.medical.details What I should do  i. Add _inherits section in hr_employee class ii. Add field medical_detail_id in hr_employee class class hr_employee(osv.osv):     _name = 'hr.employee'     _inherits = {' hr.employee.medical.details ': "medical_detail_id"}     _inherit = 'hr.employee'         _columns = {              'emp_code':fields.char('Employee Code', si