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

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
12 comments
Read more

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

Flickr and OAuth

What is Flickr? I think you landed on this page because you know what Flickr is, so let’s come to the point and discuss about the API. Why am explaining? Although each and everything, about API, is well documented on Flickr website here , I'm just trying to explain the whole process by dividing it into small parts. Old Authentication API The current Flickr authorization scheme is not the first one it used. In the early days of Flickr, users granted the power to an app to act on their behalf by giving  the apps their Flickr username and password. Doing so meant that in order to revoke  an app’s permission, users would have to change their Flickr password. Of course, doing that would also instantly revoke permissions of other third-­party apps with knowledge of the user’s password. The new authorization scheme is meant to correct obvious problems with the old scheme. Why should you as a user have to use your Flickr password for anything other than your dealings with Flickr?
29 comments
Read more