Using a Date Picker with Data Assist Search
A question I have seen quite a lot on the Web Assist Data Assist forum is how to integrate a Date Picker into a DataAssist generated search form. Well with jQuery is is very simple using a very simple plugin written by Ted Devito. I have included the plugin and css file in the download file which contains a working example (just click anywhere in the Order Date text input box).
First obviously generate your DataAssist Pages and that will give you a search page with a form something like this:
In the head of the document locate the css links and add the calendar css file included in the download like so:
<link href="WA_DataAssist/styles/Refined_Pacifica.css" rel="stylesheet" type="text/css" />
<link href="WA_DataAssist/styles/Arial.css" rel="stylesheet" type="text/css" />
<!-- add calendar css file, make sure you link to the file stored in your site -->
<link href="css/calendar.css" rel="stylesheet" type="text/css" />
Now add the necessary jQuery files, also included in the download, like so:
<!-- add jquery files, make sure you link to the files stored in your site -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cal.js"></script>
Finally you need to call the plugin like so:
<script type="text/javascript">
// <![CDATA[
$(function() {
$('input.calendar').simpleDatepicker({enddate: '<?php echo date('m/d/Y',time()); ?>'});
});
// ]]>
</script>
I set the end date for the search to today via PHP as I do not want to search in the future but this can be left out if you wish. A full run down on the options is available on the plugin page.
I have put a working example (just click anywhere in the Order Date text input box) on my site and I have included the plugin and css files etc. in the download which again is available on my site.
