Announcement

**Sparticuz** · 02-18-2011, 01:03 PM

Re: jQuery Datepicker

I figured it out. I'll put a how to together in the next few days.

**peteconway** · 02-18-2011, 08:34 PM

Re: jQuery Datepicker

Thanks - interested in the time as well. Appreciated.

**chadbrown** · 02-18-2011, 09:25 PM

Re: jQuery Datepicker

Very Interesting how is the reaction time on month changes?

**Sparticuz** · 02-21-2011, 01:00 PM

jQuery Datetimepicker HOW TO

A few things you'll need:
jQuery (www.jquery.com)
jQuery UI (www.jqueryui.com)
jQuery Timepicker Addon (http://trentrichardson.com/examples/timepicker/ or https://github.com/trentrichardson/j...mepicker-Addon)

Some background: I'm using this in a few places in my application with more than one being on a page. It was working for me with both the standard jQuery UI Datepicker, as well as with the Timepicker Addon. The datepicker was just used when the mysql backend was a DATE type, the datetimepicker backend was a DATETIME type.

First I made sure that I was including jQuery in my html head by using this code. It will first try to get jquery from Google's CDN, otherwise fallback to local js file. There are many pro's for this easily avaliable with a quick google search (http://www.google.com/search?q=jquery+google+cdn). Though this is probably more for public sites. I've also included jQuery UI (also using Google's CDN) and finally, the jquery-ui-timepicker-addon script.

Code:

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.5.0.min.js"%3E%3C/script%3E'))</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-ui.1.8.9.min.js.js"%3E%3C/script%3E'))</script>

<script src="js/jquery-ui-timepicker-addon.js"></script>

Second, jQuery needs to be in noConflict mode due to Alpha 5 using the $() shorthand. This needs to be done immediately (or close to it) after loading the jQuery script. Also, in this code I include a small function called jq(). This function is needed because Alpha 5 uses periods in ID names, which messes with the jQuery element selector code.

Code:

<script>
var $j = jQuery.noConflict(true);
function jq(myid) { 
   return '#' + myid.replace(/(:|\.)/g,'\\$1');
 }
</script>

Ok, that's all that's needed in the html header. On to the grid.
For the normal Datepicker I didn't need any extra settings so I just used this code. Notice how I used the jq() function, that is the ID of the element when the page is published using firebug.

Code:

<script type="text/javascript">
$j(jq('PROSPECTS.V.R1.BIDDATE')).datepicker({
	onSelect: function(dateText, inst){
		{grid.Object}.setValue('G','BIDDATE',1,dateText);
	}
});
</script>

I placed this code in the 'Below Grid' Freeform Edit Region for that grid.
When I ran the grid it worked fine, updating the field as well as marking it dirty with the A5 ajax function.

Then onto the datetimepicker... The ID of this one seemed to change because it was a Linked Content Grid inside of another grid. Specifically the ESMI part seems to be random letters that could possible change. I would love to find a way to perhaps specifiy this with something similar to the {grid.componentname}. In this example, when I put the code in the Freeform edit region it did not work, So I ended up putting the code in the Javascript - System Events under the 'onGridRender' section. I think this may be because it was a linked content section

Code:

$j(jq('PROSPECTS_LCS_ADMIN_TM_GRID_NEW_PROSPECTS_PANEL_ESMI_P1.V.R1.NEXTCALL')).datetimepicker({
	ampm: true,
	stepMinute: 10,
	hourMin: 8,
	hourMax: 17,
	onClose: function(dateText, inst){
		{grid.Object}.setValue('G','NEXTCALL',1,dateText);
	}
});

I'm sure I've not done this the most efficient or effective way. Please improve, haha!

EDIT: Also, I think you'll need to have a jQuery UI theme linked in the header like so:

Code:

<link href="css/redmond/jqueryui-1.8.9.css" type="text/css" rel="stylesheet" />

**Sparticuz** · 02-21-2011, 04:24 PM

Re: jQuery Datetimepicker HOW TO

Originally posted by Sparticuz View Post

Specifically the ESMI part seems to be random letters that could possible change. I would love to find a way to perhaps specifiy this with something similar to the {grid.componentname}.

Yep, they seem to be random. It is changing for me when I do most things, republish the grid, restart the server, pretty much everything. I'm looking for a way to specify the ID, or to determine what the ID will be at render. Any help would be appreciated.

**frankbicknell** · 02-22-2011, 09:32 AM

Re: jQuery Datepicker

nevermind

**Sparticuz** · 02-22-2011, 04:37 PM

Re: jQuery Datetimepicker HOW TO

Originally posted by Sparticuz View Post

Yep, they seem to be random. It is changing for me when I do most things, republish the grid, restart the server, pretty much everything. I'm looking for a way to specify the ID, or to determine what the ID will be at render. Any help would be appreciated.

haha, So apparently {grid.componentname} was exactly what I needed (kinda).

Addendum to How-to:

So after playing around with it this morning, I've decided the correct place for this code is in the onGridRender function of the Javascript - System Events. For specifying the ID of the item, you must write it like this

Code:

$j(jq('{grid.ComponentName}.V.R1.NEXTCALL')).datetimepicker({});

The {grid.ComponentName} will give you the name of the grid. The V is always there. For my purposes, it is always R1, but there is a {grid.RowNumber} or a {grid.object}._selectedRow placeholder you can use. Then the final piece is, of course, the actual field name.

Announcement

The Alpha Software Forum Participation Guidelines

jQuery Datepicker

jQuery Datepicker

Comment

Comment

Comment

Comment

Comment

Comment

Comment