Author Topic: Datepicker  (Read 4949 times)

Offline ddombadoh

  • Posts: 24
Datepicker
« on: August 09, 2010, 07:37:13 PM »
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.

Offline BlackBird

  • Posts: 2573
Re: Datepicker
« Reply #1 on: August 09, 2010, 07:52:01 PM »
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>
« Last Edit: August 09, 2010, 08:04:04 PM by BlackBird »

Offline ddombadoh

  • Posts: 24
Re: Datepicker
« Reply #2 on: August 09, 2010, 08:27:57 PM »
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.

Offline ddombadoh

  • Posts: 24
Re: Datepicker
« Reply #3 on: August 09, 2010, 08:58:12 PM »
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.

Offline BlackBird

  • Posts: 2573
Re: Datepicker
« Reply #4 on: August 10, 2010, 10:30:01 AM »
Can I take a look? (URL?)

Offline ddombadoh

  • Posts: 24
Re: Datepicker
« Reply #5 on: August 10, 2010, 02:40:31 PM »

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

Offline BlackBird

  • Posts: 2573
Re: Datepicker
« Reply #6 on: August 10, 2010, 05:17:47 PM »
Try playing with zindex-settings (CSS). Try Google for help. :wink: