WebsiteBaker Community Forum (upd)

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.

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 (https://forum.websitebaker.org/index.php/topic,18173.msg126720.html#msg126720)) 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:


<!-- 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):


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


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.

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.

Can I take a look? (URL?)

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

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