WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: ddombadoh on August 09, 2010, 07:37:13 PM

Title: Datepicker
Post by: ddombadoh 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.

Title: Re: Datepicker
Post by: BlackBird 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 (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:

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>


Title: Re: Datepicker
Post by: ddombadoh 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.

Title: Re: Datepicker
Post by: ddombadoh 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.

Title: Re: Datepicker
Post by: BlackBird on August 10, 2010, 10:30:01 AM

Can I take a look? (URL?)

Title: Re: Datepicker
Post by: ddombadoh 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

Title: Re: Datepicker
Post by: BlackBird on August 10, 2010, 05:17:47 PM

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