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

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 Fli...
29 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