Date Picker for Data Assist?
Hi -
Im newbie to Data Assist.
Is it possible to get a date picker for date field in the wizard insert record form?
Please advice.
Kind r
Bjørn-Tore
Hi -
Im newbie to Data Assist.
Is it possible to get a date picker for date field in the wizard insert record form?
Please advice.
Kind r
Bjørn-Tore
Hi Bjørn,
I don't think DataAssist supports datepicker (yet - I expect it will in a future release). It is a simple procedure to do for yourself, though.
1. Download and unzip the attached archive, (it contains the jquery .js & .css files and images folder) Upload that folder (datepicker) into to the same directory as your 'xxxxxInsert.php' file.
2. Paste the following three lines between the <head></head> tags of your 'xxxxxInsert.php' page:
<link type="text/css" href="datepicker/jquery-ui-1.8rc1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="datepicker/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="datepicker/jquery-ui-1.8rc1.custom.min.js"></script>
3. Paste the following javascript code also between the <head></head> tags of your 'xxxxxInsert.php' page (somewhere after the lines mentioned in step 2 - just before the closing </head> tag would do:
<script type="text/javascript">
$(function(){
$('#event_date').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onClose: closeDatePicker_event_date
});
});
function closeDatePicker_event_date() {
var tElm = $('#event_date');
if (typeof Date_Picker_Spry != null && typeof Date_Picker_Spry != "undefined") {
Date_Picker_Spry.validate();
}
var docElm = document.getElementById("event_date");
var tBlur = docElm.getAttribute("onBlur");
if (!tBlur) tBlur = docElm.getAttribute("onblur");
if (!tBlur) tBlur = docElm.getAttribute("ONBLUR");
if (tBlur) {
tBlur = tBlur.replace(/\bthis\b/g, "docElm");
eval(tBlur);
}
}
</script>
4. Change the name of the variables (color-coded blue) in the code above to match the ID of the date field that you want to apply the date picker to. The ID will be shown in the code for the date field on your page, i.e. :
<td width="371" valign="top" class="WADADataTableCell"><input type="text" name="event_date" id="event_date" value="" size="38" /></td>
5. if you want a datepicker on more than one date field, just duplicate the block of javascript code in (3.) above, and change the same variables to the ID of your second date field.
6. Upload your 'xxxxxInsert.php' page and the datepicker folder containing the jquery .js and .css files.
Without wanting to take anything away from Neilo's comprehensive answer using jQuery UI for a simple date picker introduces a massive overhead in terms of the size of the extra js and css files needed. I use a much simpler jQuery plugin in my applications. In fact as this question seems to get asked quite a bit I'll write up a blog post on how to implement this at some point this week.
Cheers for that Dave,
Will look forward to the blogpage!
If the various options are defined by class attribute (i.e. one, two, three, four) from:
$('input.one').simpleDatepicker();
$('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 });
$('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' });
$('input.four').simpleDatepicker({ x: 45, y: 3 });
How would these be applied to a DataAssist insert page where each (WADADataTableCell) class is the same (defining the style for the DataAssist inputs)? I can foresee considerable extra work reworking the DataAssist CSS to accomodate these options as a 'plugin'?
Could you still then apply native jquery 'schemes' (a la 'themeroller') that coordinate with your other jquery functions, or would you need to manually adapt the css?
Would the extra (not 'massive'!) overhead not be worth it (and easier)?
I see you have posted a tutorial - thanks for that!
Neilo,
You simply add your chose class to the date field, there is no need to add anything to the data assist css.
The UI script file you posted is 213kb which is approx. 3 times the size of the actual jQuery file plus another 33kb for the CSS file, this is one of things I don't like about jQueryUI but as with all these things it is just my opinion and in the long run you should use what you find easiest to implement.
Thanks Dave,
'You simply add your chose class to the date field' Yes I see that now, thanks - I did mention that I had found your tutorial.
I don't use what's easiest to implement, and I don't think I should. I use what's best for style and function in a given situation.
I have no doubt that your 'plugin' will be useful to me on such occasions.
Thank you all for good anwers. Ill check them out.
Would also love this to be a included feature of DataAssist.
kind r
Bjørn.
hi -
I liked the Jquery simpledate plugin.
i have it up and running nicely in my DataAssist page. But the date format is like 9/22/2010.
Is it possible to get this in MySQL style for input in DB? Like 2010-09-22 ?
Code:
<script type="text/javascript">
// <![CDATA[
$(function() {
$('input.calendar').simpleDatepicker({ startdate: 2008, enddate: 2012 });
});
// ]]>
</script>
Please advice.
Kind r
Bjørn.
Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.
These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.