New features Apply a Theme In Line Events From To Button Panel Week Numbers Date and Time Misc

Open datepicker using an image      

Right click image>actions>add>custom>click (Mouse clicks an object) and paste this into custom script.


Change name to the id of your datepicker .

Select Date

Copy and paste the script  to add the listed features to your datepicker.  To open datepicker using an image, see the bottom of this page.

Change features to your datepicker ID


1. Set calendar size by  top menu bar  Edit > Site Properties > Datepicker > Font Size. The smaller the font, the smaller the calendar. If you want to use external styles see Apply a Theme page

2.  Each of the option lines has a comma at the end EXCEPT the last item. If you delete any  lines make sure that you follow this pattern.

3. Do not use Insert>HTML.

The script opposite and all other scripts in this tutorial, unless otherwise stated , must be pasted into <!--Page  Start-->.

Use Alt-S or right click>Attach HTML

Add up to nine new features including an opening button to X6 Datepicker




Number of months

numberOfMonths: 4

Change the number to between 2 and 4

Animate calendar


duration: 'slow'

slideDown, fadeIn, blind, bounce, Clip, drop,  fold, slide

slow, normal, fast

Show week numbers

showWeek: true

true, false

Change first day of week

firstDay: 0

0 = Sunday  1 = Monday

Date highlighted when opened

defaultDate: '+3D'

D = days, w = weeks m = months y = years

 Using + or - will mean from today

Examples: -2d  +18m  +1w  +2y

Minimum date that can be chosen

minDate: '+2D'

Maximum date that can be chosen

maxDate: '+1M'

Show button panel

showButtonPanel: true

true, false


$(function() {


numberOfMonths: 4,


duration: 'slow',

showWeek: true,

minDate: '0',

firstDay: 0,

defaultDate: '+3D',

maxDate: '+6M',

showButtonPanel: true