Datepicker

[ddombadoh]

Hello,

I would like to use the datepicker under UI Components for jQueryAdmin on my form. I have installed jQueryAdmin but don't know how to use the datepicker on my form.

Any help will be appreciated.

Thank you.

[BlackBird]

First, you will have to create a preset.

* In the jQueryAdmin Backend (Admin-Tools -> jQueryAdmin v2.x), insert a name of your choice into the "New Preset" input field
* In the "UI Components" list, mark "Datepicker"
* Save the preset

Now as you have a preset, you will have to include it into your page. This can be done using the [[jQueryInclude]] Droplet. So, on your page, insert into a WYSIWYG-Section:

[[jQueryInclude?preset=<your preset>]]

Replace <your preset> with the preset name you chose above.

Now you have created a preset and included it into your page, it's time to make use of it. Simply add the id="datepicker" attribute to the form field you wish to use with the Datepicker component.

For more options, see the Datepicker page: http://jqueryui.com/demos/datepicker/

For custom options, you'll need jQueryAdmin v2.1 (Beta available here) to insert custom code into your preset. For older versions, use the Addon File Editor to customize your preset.

Example: To tie the Datepicker to all form elements with class "date", add the following code to your preset:

Code: [Select]

<!-- custom -->
$('.date').datepicker();
<!-- end custom -->

The complete preset contents after this change may look like this (of course, there may be more code if you added more components/plugins):

Code: [Select]

<!-- position: body -->
<script type="text/javascript">
  $(document).ready( function () {
    $("#datepicker").datepicker();
    <!-- custom -->
    $('.date').datepicker();
    <!-- end custom -->
  });
</script>


[ddombadoh]

Thank you BlackBird for your reply.

I have created the preset, but I am comfused as to where to put [[jQueryInclude?preset=<your preset>]].
Should I create a WYSIWYG section on my page, inside Administrator page, and then put [[jQueryInclude?preset=<your preset>]] there? or I should put it in the template for that page?

Thank you.

[ddombadoh]

I have included [[jQueryInclude?preset=dpick]] as a droplet in my page, but the page fails to load. It stays blank.
dpick is the name of the preset I created.

Any help is appreciated.
Thank you.

[BlackBird]

Can I take a look? (URL?)

[ddombadoh]

Thanks BlackBird. I reinstalled my jQueryAdmin and the page is now loading with the datepicker.
The other problem I have realised is the datepicker loads but fades behind other form fields on the page.
Any help please.

Thanks

[BlackBird]

Try playing with zindex-settings (CSS). Try Google for help.