Using the Unobtrusive Date Picker Widget in CakePHP
First things first
- Download and extract the Unobtrusive Date-Picker Widget here: http://www.frequency-decoder.com/2006/10/02/unobtrusive-date-picker-widgit-update
- Copy the 'css/datepicker.css' file to 'app/webroot/css'
- Copy the 'js/datepicker.js' file to 'app/webroot/js'
- Copy the contents of the media folder to 'app/webroot/img/datepicker'
- Open the datepicker.css file in your 'app/webroot/css' folder. Using the Find/Replace functionality of your editor replace all occurences of '../media' with '../img/datepicker'
Edit the default view
Note: If you do not have a default.thtml file then you will need to create one, for simplicity you can just copy Cake's default one from 'cake/libs/view/templates/layouts' to 'app/views/layouts' and edit the latter.
Put the following before the closing head tag
<?php echo $html->css('datepicker')."\n"; ?>
<?php echo $javascript->link('datepicker.js')."\n"; ?>
Note: This may give you an error when you try to load your page, that is because you are trying to use the javascript helper but you have not defined it in your controller. Since it will be used site-wide the easiest thing is to define it in 'app_controller.php'.
Create 'app/app_controller.php' and enter the following:
<?php
class AppController extends Controller
{
var $helpers = array('Javascript');
}
?>
Create afterFind and beforeSave methods
So in order to separate the date from the time when using the dateTime format in MySQL you could use a custom query string, but this was not recommended to me so instead I decided to run an after find to create a pseudo-field.
You will need to recombine the fields before it is written back to the database otherwise the information will not be properly saved, this is where the beforeSave method comes into play.
Edit your model and enter the following methods:
<?php
/*
* The validation below is optional, just to give you an idea
* of how to validate these fields.
*/
var $validate = array(
'dateOnly' => '/[0-9]{2}[\-\/\.][0-9]{2}[\-\/\.][0-9]{2,4}$/i',
'headline' => VALID_NOT_EMPTY,
'detail' => VALID_NOT_EMPTY
);
// Extra form validation, since VALID_NOT_EMPTY does not work on
// these fields.
function validates() {
$event = $this->data['Event'];
if(empty($event['date_hour']) || empty($event['date_meridian']) || empty($event['date_meridian']))
$this->invalidate('date');
$errors = $this->invalidFields();
return count($errors) == 0;
}
/*
* The validation above is optional, just to give you an idea
* of how to validate these fields.
*/
function afterFind($results) {
// Create a dateOnly pseudofield using date field.
foreach ($results as $key => $val) {
if (isset($val['Event']['date']))
$results[$key]['Event']['dateOnly'] = date('m-d-Y',strtotime($val['Event']['date']));
}
return $results;
}
function beforeSave()
{
// Convert 12 hour to 24 hour
if($this->data['Event']['date_meridian'] == 'pm')
$hour = $this->data['Event']['date_hour'] + 12;
else
$hour = $this->data['Event']['date_hour'];
// Get month day and year from date string
$timestamp = strtotime(str_replace('-','/',$this->data['Event']['dateOnly']));
$month = date('m',$timestamp);
$day = date('d',$timestamp);
$year = date('Y',$timestamp);
$this->data['Event']['date'] = date('Y-m-d H:i:s', mktime(
$hour,
$this->data['Event']['date_min'],
null,
$month,
$day,
$year));
return true;
}
?>
Note: Be sure to substitue ['Event'] with your App name and ['date'] with the field in the database that contains the dateTime value.
Edit your view
You will need to modify you view to display the new format, below is what I used. Feel free to make any necessary changes for your application.
Example view:
<table cellpadding="0" cellspacing="0" class="view">
<tr>
<td><span class="title"><?php echo $form->labelTag('Event/dateOnly', 'Date');?></span></td>
<td>
<?php echo $html->input('Event/dateOnly', array('size' => '15', 'class' => 'w8em format-m-d-y divider-dash highlight-days-12 no-transparency'));?>
</td>
<td><?php echo $html->tagErrorMsg('Event/dateOnly', 'Please select the Date.');?></td>
</tr>
<tr>
<td><span class="title"><?php echo $form->labelTag('Event/date', 'Time');?></span></td>
<td>
<?php echo $html->hourOptionTag('Event/date'); ?>
<?php echo $html->minuteOptionTag('Event/date'); ?>
<?php echo $html->meridianOptionTag('Event/date'); ?>
<?php echo $html->checkbox('Event/allday', null, array());?>
<?php echo $form->labelTag('Event/allday', 'Allday');?>
</td>
<td><?php echo $html->tagErrorMsg('Event/date', 'Please select the Time.');?></td>
</tr>
</table>
You should now have a fully working date picker. If you are having problems, please post your comments and I will try to help resolve them.
Screenshots:
http://www.nexgentec.com/bakery/date-picker.jpg http://www.nexgentec.com/bakery/date-picker2.jpg
Thanks to Paul Gardner too, your comments really helps me a lot
Thank you all
Basically, I have a form and when the user submits the form, a div on the page is updated with the new content. On this form I have a datePicker. When the div is updated, the datepicker icon disppears.
I have had no problems with the datePicker displaying on initial page load.
Initially, I thought that calling datePickerController.creat() once the div content was loaded would recreate the datePicker, but this does not work. . .
However, I have to use that date picker here and there so I added an element:
View Template:
<!-- datePicker.ctp -->
<div class="input float medium time">
<?= $form->label($name, $name) ?>
<?= $form->day($name, false, array('id' => $name.'-dd'), true) ?>
<?= $form->month($name, false, array('id' => $name.'-mm'), true) ?>
<?= $form->year($name, '1980', date('Y') +1, false, array('id' => $name, 'class' => 'show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 split-date opacity-90'), true) ?>
<a href="#" onclick="getElementById('<?=name?>').setValue('');getElementById('<?=$name?>-mm').setValue('');getElementById('<?=$name?>-dd').setValue('');return false;"><?php __("clear"); ?></a>
<?=$form->error($name, $session->flash())?>
</div>
It has also clear button for added bonus. First boolean (false) is needed when you use this in edit page since it takes the value from database. Second boolean (true) is for "showEmpty", when there is a need for "null" values for date.
Usage of this element is simple. In my "edit.ctp":
View Template:
<?= $this->element('datePicker', array("name" => "years_from")); ?>
<?= $this->element('datePicker', array("name" => "years_to")); ?>
"years_from" and "years_to" are database fields of type datetime. So that will print out two datePicker elements that are working simultaneous.
*******************
Thanks for all the great hints and comments.
I just wanted to note that the above statement will always output the generic failure message which is set in the session.
the better way to do it would be:
echo $form->error($name, Set::classicExtract($this->validationErrors, $name));
The only requirement for this to work is to pass not only the field name, but the FULL path to the element like this: "Model.field_name"
Cheers, Stefan
Date picker display correctly. This is my view :
echo $form->input('Ticket/req_date',array('label'=>'Request Date','Size'=>'15','class'=>w8em format-m-d-y divider-dash highlight-days-12 no-transparency'));
but when i save form it result '0000-00-00:00:00'
I think you right. Maybe I miss understanding about this control right? It look that form can not translate text returned by datepicker, so when saved it return nothing, meaning '0000-00-00:00:00'.
Do you have an idea to use datepicker like in desktop language programming (such as visual basic or whatever) can do?
very thank brother
View Template:
<?php echo $form->input('Ticket/req_date',array('label'=>'Request Date','Size'=>'15','class'=>w8em format-m-d-y divider-dash highlight-days-12 no-transparency'));?>
The 'date picker' icon appears and it is workable. But it can not save the date value. So I view the html source, eventually it created an input text field with a name of 'data[Post][Ticket/req_date]', reflecting to my tables, I dont have any column name such asTicket/req_date in my 'post' table, I only have a column by the name 'date'. I think for you having such name will:1. Make your 'date picker' icon appear, able to popup and even return the date value to the 'date' field once you clicked the pop up 'date picker'.
BUT
2. I think without any extra custom code, the add function will fail to automatically read, carry & insert the date value because your table dont have any column by the name of 'Ticket/req_date'. So better check on these.
ps: sorry I had left out desktop application development for ages bro. more into web these days.
thank for your help, but still not success for me.
This is my default layout:
if(isset($javascript)) {
echo $javascript->link('datepicker.js')."\n";
}
This is my model
----------------------------
var $name = 'Ticket';
var $validate=array(
'req_date'=>array('rule'=>'date',
'required'=>true,
'message'=>'You must supply a valid date.')
);
//req_date is my datefield
----------------------------
this is my view:
echo $form->input('Ticket/req_date',array(
'label'=>'Request Date',
'size' => '15',
'class'=>'show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67'
));
it display textbox with no datepicker
Ticket.req_date or just 'req_date' display combo month, combo date, combo year, combo time, combo pm/am
my cake version is cake 1.2.3.8166.
any comment or suggest?
thank
Above all, my code is for using combo box like this: [day] [month] [year] [date_picker_ikon]
For such combo box, when calling the FD's date picker, the class name somehow must consist split-date in it. I tried to get it done by just using a text field, but failed. So i tried using using combo box instead & Alhamdulillah its running nicely.
In naming my input field, I stick in using the exact name as my table's column name.
Better start by checking whether you have copied all of the essential files in proper directory 1st to ensure your date picker icon to appear in your form.
I m still not success eventhough i have check for many time that my code is the same with marcel'sample.
The data always can not be save. what wrong?
thank alot for any help
I am newbiew in Cakephp, I have view like this:
echo $form->input('RequestDate',array('size' => '15', 'class' => 'w8em format-m-d-y divider-dash highlight-days-12 no-transparency'));
but it display month with combo box month, date with combobox date, etc
It will success if I change my real field (requestDate) with dateOnly or some word such as mydate etc. As you can see the requesDate will never save date after the form saved.
The validation date is also not work and display "form can not be save" if I set your validation option in my model.
please tell me why. really thank
oktar
Here it goes:
1. Create app_controller.php in /app/app_controller.php with these codes:
Controller Class:
<?phpclass AppController extends Controller {
var $helpers = array('Javascript');//enables default.ctp using the Javascript $helpers
}
?>
2. In default.ctp found in /app/views/layouts/default.ctp, put these codes within the head tag:
View Template:
<head>
<?php echo $html->css('datepicker')."\n"; ?>
<?php echo $javascript->link('datepicker.js')."\n"; ?>
</head>
<body>
<div id="container">
<div id="content">
<div id="top"><strong><?php $session->flash('top');?></strong><br></div>
<?php echo $content_for_layout;?>
<div id="bottom"><strong><?php $session->flash('bottom');?></strong></div>
</div></div>
</body>
3. I'm using a 'Post' controller with an 'add' action, so in my case, I created the view file of add.ctp in /app/views/posts/add.ctp, with these codes:
View Template:
<?php
//the cake's e() function is similiar to php's echo
e($form->create('Post'));//Create Form
//Create label for Date field named 'Date'
e($form->label('date', 'Date'));
//Create combo box for 'day'
e($form->day('date', date('d'), array('id' => 'FieldId-dd'), false)." - ");
//Create combo box for 'month'
e($form->month('date', date('m'), array('id' => 'FieldId-mm'), false)." - ");
//Create combo box for 'year' and call date picker's class.
//See in the class called got 'split-date'.
//Use this for splitting the day, month & year field.
e($form->year('date', '1900', date('Y') + 50, date('Y'), array('id' => 'FieldId', 'class' => 'show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 split-date opacity-90'), false));
//Create error massage feature, any error generated
//by $validation for 'date' in /app/models.post.php will show up here.
e($form->error('date', $session->flash()));
//Ends this form with a 'submit' button
e($form->end('Submit'));
?>
4. I'm using a 'Post' model, so in my case in post.php is in /app/models/post.php, put these codes:
Model Class:
<?php//I'm just writing down the validation part
var $validate=array(
'date'=>array('rule'=>'date',
'required'=>true,
'message'=>'You must supply a valid date.')
);
?>
5. I'm using a 'Post' controller, so in my case in posts_controller.php is in /app/controllers/posts_controller.php, this is my 'add' function:
Controller Class:
<?phpfunction add() {
if (!empty($this->data)) {
$this->Post->create();
if ($this->Post->save($this->data)) {
$this->Session->setFlash('The Post has been saved',null,null,'top');
$this->redirect(array('action'=>'index'));
} else {
$this->Session->setFlash('The Post could not be saved. Please, try again.',null,null,'top');
}
}
}
?>
-By doing all above, I'm able to create date combo box separated by day, month and year.
-Beside my year combo box there is a calendar icon, when clicked, I'm able to browse specific date.
-I'm also able to validate my date entry (it will pop up date error message when wrong date was selected e.g: 31st Feb 2009 which dont exist).
-No problem in saving the date field into DB without performing before or after filter.
Hope helps.
Hi Oktar, i got the same prob like u, eventually i solved it. 1st i show you the error file which shows 3 combo-box of month, day & year:
View: add.ctp
---
View Template:
e($form->input('date',array(
'label'=>'Date',
'size' => '15',
'class'=>'show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67'
)));
Then i change it to this:
View Template:
e($form->input('Post/date',array(
'label'=>'Date',
'size' => '15',
'class'=>'show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67'
)));
just change input name from 'date' to 'Post/date', then a text field and a date picker will appear
uncaught exception: Index or size is negative or greater than the allowed amount (NS_ERROR_DOM_INDEX_SIZE_ERR)
[Break on this error] var datePickerController=(function dateP...;script.setAttribute("charset","utf-8");
Any idea?
echo $form->hour('dateField', true, date('H') ) . " : ";
echo $form->minute('dateField', date('i') );
Thanks for humoring me!
Glad you found a solution :)
I would have replied, but the article comment email notifications from the site are showing blank and I did not know which article someone had commented on?!?
Yours seems to be the easier choice rather than adding the afterFind/beforeSave methods in 1.2, I tried it and it worked. Just to add additional info to those who will be trying this with more than one date picker.
The solution is easy this field (FieldId) will give one date picker:
* day: FieldId-dd
* month: FieldId-mm
* year: FieldId (no additional)
to add additional date picker just append 0-9 etc. to the FieldId:
* day: FieldId0-dd
* month: FieldId0-mm
* year: FieldId0 (no additional)
will give you additional instance of the date picker.
I wasn't keen on having to add the afterFind/beforeSave methods to all my models that used this so did some digging and I have it working a bit more Cake-like .. although I'm sure it could be better.
Drop the following into your views and one date picker will update separate day-month-year select lists.
echo $form->day('dateField', date('d'), array('id' => 'FieldId-dd'), false)." - ";
echo $form->month('dateField', date('m'), array('id' => 'FieldId-mm'), false)." - ";
echo $form->year('dateField', '1980', date('Y'), null, array('id' => 'FieldId', 'class' => 'w8em split-date divider-dash highlight-days-12 no-transparency'), false);
Substitute 'dateField' for your date field and 'FieldId' for your field's id (tends to follow ModelFieldName format) and hey presto!
No need to do any model trickery as the date fields are now formatted as Cake likes them.
This works by specifying the 'split-date' class which breaks the date across 3 text fields or select lists and the widget does the hard work for you as long as you only add the class information to the year field and give your fields the correct ids:
Unfortunately you can't use Cake's automagic $form->input as it doesn't allow you to specify 3 different ids (it takes the fields id and adds Day, Month, Year) and adds the class declaration to each part of the date (resulting in 3 date pickers).
This results in a bit more code in the view, especially when you have to add in labels and divs etc. but I can handle that in favour of not having to add the extra methods into the model to create a false date field to work on.
Hope this proves useful,
This works great. Appreciate the guidance.
I was wondering if you could provide an example of add/incorporating the time selection for your Cake-like date picker and allowing for years in the future?
Thanks for any help and your time!
it really helped me a lot!!!!thanx Marcel Manning (mmanning) for this code and documentation.
Thank You Tahmeed Alam, seems as though this is still the only Date Picker article in the Bakery.
like the paginator/sorting-table:
http://www.frequency-decoder.com/demo/table-sort-revisited/paginate/
i don't know how easy this one is to get along with cakePHP
It looks nice, but I would not recommend using it with CakePHP, since you can easily have the same functionality with AJAX.
The author states: "the script was developed for “worst case scenarios†and if at all possible, you should use an Ajax or simple server-side pagination solution instead." which I agree with.
If you could look at the code and make a suggestion or anyone for that matter I would really appreciate the help.
P.S.
If you want to email me that would work too, valendesigns@gmail.com
So if you're using cake 1.2 then things have changed and so when you make a form the regular way of $form->create() then the right way to do the view parts would be:
input('Event/dateOnly', array('size' => '15', 'class' => 'w8em format-m-d-y divider-dash highlight-days-12 no-transparency'));?>
hour(); ?> minute(); ?> meridian(); ?>
and in the model class you need to change the [date_hour] [date_min] and [date_meridian] to [hour] [min] and [meridian] and things should work properly now. Hope this helps anyone who couldn't get this to work.
First, I had to add some code to handle the case that the date is null in the afterFind method of the model.
Then I'm completely clueless as to how the date_hour and date_meridian that are referenced in the validates method are created. Either they're missing, or I'm missing somthing else.
So by including the code:
<?=$form->input('dateOnly', array('size' => '15', 'class' => 'w8em format-m-d-y divider-dash highlight-days-12 no-transparency'));?>
I get HTML like:
<div class="input text">
<label for="DateOnly">Date Only</label>
<input name="data[Job][dateOnly]" type="text" size="15" class="w8em format-m-d-y divider-dash highlight-days-12 no-transparency" value="11-24-2008" id="JobDateOnly" />
</div>
Which I'm guessing means the class is getting added to the wrong HTML tag.
Any suggestions?
Thank goodness for Firebug - I was able to browse the DOM and see the Cake error there. Since it couldn't find the JS file, it was replacing the JS with HTML that was intended to show me the error.
Unfortunately, the browser just swallows that error, since it is embedded between script tags.
Comments are closed for articles over a year old