jQuery datePicker
This is a quick note, not really a tutorial since this stuff is really trivial to setup. I use the jQuery datePicker plugin by Kelvin Luck.
The HTML / Smarty code:
{config_load file="$config_file"}
<script type="text/javascript" src="{$baseUrl}/js/date.js"></script>
<script type="text/javascript" src="{$baseUrl}/js/date_{$language}.js"></script>
<!--[if IE]><script type="text/javascript" src="{$baseUrl}/js/jquery.bgiframe.js"></script><![endif]-->
<script type="text/javascript" src="{$baseUrl}/js/jquery.datePicker.js"></script>
<link rel="stylesheet" href="{$designDir}/css/datePicker.css" type="text/css" />
{literal}
<script type="text/javascript">
Date.format = 'yyyy-mm-dd';
$(function(){ $('input.date-pick').datePicker({startDate:'1996-01-01'}); });
</script>
{/literal}Note the dependency on Jörn Zaefferer‘s date library.
In this case we have German as an alternative language, hence the date_{$language}.js above. We begin with looping through all input fields with the class date-pick and apply the date picker logic to them.
Using Date.format = ‘yyyy-mm-dd’ will make sure that we get the date in this format in the PHP $_POST array, this format makes any further conversions unnecessary in order to do direct date comparisons in MySql. This works for example:
$sql = "SELECT * FROM products WHERE some_datetime > {$_POST['start_date']}";Note the use of startDate:’1996-01-01′, we want to be able to select dates in the past with this date as the limit.
The default CSS looks like crap IMO, the above screenshot uses this CSS instead.
Related Posts
Tags: date picker, jquery, multi language