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.

Demo : http://dev.dirtyhandsphp.com/cakephp/Home/datepicker/

That's it. If you have any question or any doubt please let me know through comments.

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


Labels:
Location: Bangalore, Karnataka, India

Comments

Post a Comment

Thanks for your valuable comments.

Popular posts from this blog

How to draw Dynamic Line or Timeseries Chart in Java using jfreechart library?

Today we are going to write a code to draw a dynamic timeseries-cum-line chart in java.   The only difference between simple and dynamic chart is that a dynamic event is used to create a new series and update the graph. In out example we are using timer which automatically calls a funtion after every 1/4 th second and graph is updated with random data. Let's try with the code : Note : I had tried my best to provide complete documentation along with code. If at any time anyone have any doubt or question please post in comments section. DynamicLineAndTimeSeriesChart.java import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.Timer; import javax.swing.JPanel; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartPanel; import org.jfree.chart.JFreeChart; import org.jfree.chart.axis.ValueAxis; import org.jfree.chart.plot.XYPlot; import...
37 comments
Read more

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 = {             ...
13 comments
Read more

phpExcelReader uses and problems?

If you will search over internet about excel reader in PHP at the end you would be redirected to the following this link only. It’s well written code but there are also some problems in that. Some documentation is missing. In this post we are going to discuss how to use phpExcelReader and which type of problems you could face. Download :  1) You can download the original library from here . 2) Mine one(with bug fixes) is available here . Go there, Click on File menu then download it. How to use : 1)  In the package itself example2.php is a very good example of using excel reader. 2)  Beginners can have a look at following example <?php             ini_set("display_errors",1);             error_reporting(E_ALL ^ E_NOTICE);             require_once 'phpExcelReader/...
21 comments
Read more