Form jQuery Datepicker

[williambmat]

Hi,

I'm trying to add jQuery Datepicker to a from to assist with functionality to help our users convert from local times to GMT.  I've added the input field inside an annotation on the form:

<p>Date:<input type="text" id="datePicker"></input></p>

Then I've put the following code in a client script:

function onLoad() {

    var $j = jQuery.noConflict(true);

    $j(document).ready(function() {

        $j(function() {

            $j('#datePicker').datepicker();

        });

    });

}

When I check the console in developer it tools, though, it states that datepicker is not a function.

What needs to be done to access the datepicker widget?

Thanks,

Bill

[SVimes]

This is just a simple example to demonstrate. All this does is set the second to whatever the first is. However, in the client script / script element, you can use GlideAjax to call a Script Include to convert the date/time to a more appropriate time zone as needed before setting the second. You could even create this in a way that allows users to select a time zone.

Here it is as a UI Page

HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:ui_date_time name="test1" readonly="false" onchange="test1Change(this)" />
<g:ui_date_time name="test2" readonly="true" onchange="" />

</j:jelly>

Client script

function test1Change(elem) {
	jQuery("#test2").val(jQuery(elem).val());
}

In a UI Macro, it looks like this and needs to be added to forms as a UI Formatter.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:ui_date_time name="test1" readonly="false" onchange="test1Change(this)" />
<g:ui_date_time name="test2" readonly="true" onchange="" />

<script>
function test1Change(elem) {
	jQuery("#test2").val(jQuery(elem).val());
}
</script>

</j:jelly>