close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Date Picker for Data Assist?

Thread began 9/19/2010 7:38 am by post89658 | Last modified 12/11/2010 7:21 pm by Dave Buchholz | 4922 views | 39 replies |

post89658

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

Sign in to reply to this post

neilo

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.

Attached Files
datepicker.zip
Sign in to reply to this post

Dave BuchholzBeta Tester

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.

Sign in to reply to this post

neilo

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)?

Sign in to reply to this post

neilo

I see you have posted a tutorial - thanks for that!

Sign in to reply to this post

Dave BuchholzBeta Tester

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.

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

Dave BuchholzBeta Tester

no worries

Sign in to reply to this post

post89658

Thank you

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.

Sign in to reply to this post

post89658

MySQL date format?

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.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

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.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...