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

Date & Time

Select date and time

Add a mobile friendly Time Module to datepicker

Download js zip file


<style type="text/css">

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }

.ui-timepicker-div dl { text-align: left; }

.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }

.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }

.ui-timepicker-div td { font-size: 90%; }

.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

</style>



<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>

<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>


<script>

$(function(){

$('#date').datetimepicker({

addSliderAccess: true,

sliderAccessArgs: { touchonly: false },

numberOfMonths: 1,

mindate: 0,

ampm: true,

separator: '--'

});

});

</script>

1. To function, the time module needs two js files  Download the js zip file and unzip.

2. Copy the code from Part 1. From  top menu bar Insert>HTML Fragment, click on page and Paste to Head.

3. Check Ignore page position box

4. Click Add, and browse for the two .js files. Click OK

5. Copy the code from Part 2 and use Alt-S or right click>Attach HTML and paste to <!--Page  Start-->.

6. Change date to the ID of your datepicker

For time module with time zones for USA use Part 1 and Part 3 only. Installation as for parts 1 and 2.

Part 1

Part 2

Date & Time

Select date and time

With time zones for USA



<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>

<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>


<script>

$(function(){

$('#zone').datetimepicker({

addSliderAccess: true,

sliderAccessArgs: { touchonly: false },

numberOfMonths: 1,

mindate: 0,

timeFormat: 'hh:mm z',

showTimezone: true,

timezone: 'MT',

timezoneList: [

   { value: 'ET', label: 'Eastern'},

   { value: 'CT', label: 'Central' },

   { value: 'MT', label: 'Mountain' },

   { value: 'PT', label: 'Pacific' }

  ]


});

});

</script>

Part 3