Dateplustime Picker Demos and Documentation

If you find this useful please consider buying me a coffee. Thanks.

/ /

Display in Dialog

A Date Plus Time picker inside a dialog. Click the open dialog button to open the modal dialog. Use the get buttons to retrieve what is selected in the picker.

Datetime:

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      // in dialog dateplustimepicker and its buttons
      $('#displayDialog-button').button();
      $('#displayDialog-button').click(function() {
        $('#dialog').dialog('open');
        // prevent datepicker appearing opened because it gains focus
        $('#datetime').blur();
        setTimeout(function() {
          $.datepicker._hideDatepicker();
        }, 300);
      });

      $('#getDatetime-button').button();
      $('#getDatetime-button').click(function() {
        var date = $('#indialog-dateplustimepicker').dateplustimepicker('getDateTime');
        if (date!==null) {
          $('#datetime-display').html('<strong>Datetime: </strong><i>' + date.toString() + '</i>');
        }
        else {
          $('#datetime-display').html('Nothing selected yet. Open modal dialog and choose a datetime.');
        }
      });

      $('#getTime-button').button();
      $('#getTime-button').click(function() {
        var time = $('#indialog-dateplustimepicker').dateplustimepicker('getTime');
        if (time!==null) {
          $('#datetime-display').html('<strong>Time: </strong><i>' + time.formatTime('hh:mmtt') + '</i>');
        }
        else {
          $('#datetime-display').html('Nothing selected yet. Open modal dialog and choose a datetime.');
        }
      });

      $('#getDate-button').button();
      $('#getDate-button').click(function() {
        var date = $('#indialog-dateplustimepicker').dateplustimepicker('getDate');
        if (date!==null) {
          $('#datetime-display').html('<strong>Datetime: </strong><i>' + date.toString() + '</i>');
        }
        else {
          $('#datetime-display').html('Nothing selected yet. Open modal dialog and choose a datetime.');
        }
      });

      $('#indialog-dateplustimepicker').dateplustimepicker({
        timeFormat: 'hh:mmtt',
        altField: '#testAlt',
        altTimeFormat: 'h:m',
        defaultTime: 0,
        minTime: 0,
        maxTime: { hours: 24 },
        step: {	minutes: 15 },
        show: 'fold',
        showButtonPanel: true
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>A Date Plus Time picker inside a dialog. Click the open dialog button to open the modal dialog. Use the get buttons to retrieve what is selected in the picker.</p>
  <button type="button" id="displayDialog-button">Open Dialog</button>
  <button type="button" id="getDate-button">Get Date</button>
  <button type="button" id="getTime-button">Get Time</button>
  <button type="button" id="getDatetime-button">Get Date and Time</button>
  <br /><br /><label id="datetime-display"></label>
  <div id="dialog">
    <label for="indialog-dateplustimepicker"><strong>Datetime:</strong></label><br /><input id="indialog-dateplustimepicker" name="indialog-dateplustimepicker" />
  </div>

</body>

</html>

Display inline

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#inline-dateplustimepicker').dateplustimepicker({
        timeFormat: 'hh:mm:ss'
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <div id="inline-dateplustimepicker"></div>

</body>

</html>

Time limits

A Date Plus Time picker can be configured with time limits. In this demo the min time is 8:30am and max time is 8:00pm so you can't select times outside that range.

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#limit-dateplustimepicker').dateplustimepicker({
        minTime: { hours: 8, minutes: 30 },
        maxTime: { hours: 20 }
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>A Date Plus Time picker can be configured with time limits. In this demo the min time is 8:30am and max time is 8:00pm so you can't select times outside that range.</p>
  <input type="text" id="limit-dateplustimepicker" name="limit-dateplustimepicker" />

</body>

</html>

A Date Plus Time picker can be configured with a step. When step is configured you can select times only in steps from min time to max time. In this demo the step is 1hour 5minutes and 30seconds, min time is 9:00:00 and max time is 15:00:00 so the allowed values are 9:00:00, 10:05:30, 11:11:00, 12:16:30, 13:22:00, 14:27:30.

I have chosen for the demo such a step so you can see how it works. Normally the step would be something more intuitive like 15min.

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#step-dateplustimepicker').dateplustimepicker({
        timeFormat: 'hh:mm:ss',
        minTime: { hours: 9 },
        maxTime: { hours: 15 },
        step: { hours: 1, minutes: 5, seconds: 30 }
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>A Date Plus Time picker can be configured with a step. When step is configured you can select times only in steps from min time to max time. In this demo the step is 1hour 5minutes and 30seconds, min time is 9:00:00 and max time is 15:00:00 so the allowed values are 9:00:00, 10:05:30, 11:11:00, 12:16:30, 13:22:00, 14:27:30.</p>
  <p>I have chosen for the demo such a step so you can see how it works. Normally the step would be something more intuitive like 15min.</p>
  <input type="text" id="step-dateplustimepicker" name="step-dateplustimepicker" />

</body>

</html>

Display in multiple months

When the picker show multiple months, the time is shown once behind all months.

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#multimonth-dateplustimepicker').dateplustimepicker({
        numberOfMonths: 2 
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>When the picker show multiple months, the time is shown once behind all months.</p>
  <input type="text" id="multimonth-dateplustimepicker" name="multimonth-dateplustimepicker" />

</body>

</html>

Show grids

Show a grid under the hours, minutes or seconds sliders.

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#grid-dateplustimepicker').dateplustimepicker({
        hourGrid: 4,
        minuteGrid: 10,
        secondGrid: 10 
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>Show a grid under the hours, minutes or seconds sliders.</p>
  <input type="text" id="grid-dateplustimepicker" name="grid-dateplustimepicker" />

</body>

</html>

Format Time

Configure the format in which you want to display the time.

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#format-dateplustimepicker').dateplustimepicker();
      $('#format-switcher').change(function(){
        var format = $('option:selected', this).val();
        $('#format-dateplustimepicker').dateplustimepicker('option', 'timeFormat', format);
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>Configure the format in which you want to display the time.</p>
  <input type="text" id="format-dateplustimepicker" name="format-dateplustimepicker" />
  <select id="format-switcher">
    <option value="hh:mm tt">Default format (12hours) - hh:mm tt</option>
    <option value="Thh:mm">Prev 12hours - Thh:mm</option>
    <option value="hh:mm:ss">24hours format - hh:mm:ss</option>
    <option value="h:m">No leading 0 - h:m</option>
    <option value="mm:ss">No hours - mm:ss</option>
  </select>

</body>

</html>

Only time

A picker with time selection only.

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#timeonly-dateplustimepicker').dateplustimepicker({
        timeOnly: true
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>A picker with time selection only.</p>
  <input type="text" id="timeonly-dateplustimepicker" name="timeonly-dateplustimepicker" />

</body>

</html>

Populate Alternative Field

As date picker you can use an alternative field to display the datetime in a different format. Use altTimeFormat to define the alternative time format.

Datetime: In alt format:

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#withalt-dateplustimepicker').dateplustimepicker({
        altField: '#withalt-dateplustimepicker-altField',
        altFormat: 'D, dd M yy',
        altTimeFormat: 'hh:mm TT'
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>As date picker you can use an alternative field to display the datetime in a different format. Use altTimeFormat to define the alternative time format.</p>
  <label for="withalt-dateplustimepicker">Datetime:</label>
  <input type="text" size="25" id="withalt-dateplustimepicker" name="withalt-dateplustimepicker" />
  <label for="withalt-dateplustimepicker-altField">In alt format:</label>
  <input type="text" size="25" id="withalt-dateplustimepicker-altField" name="withalt-dateplustimepicker-altField" />

</body>

</html>

Alternative Time Field

You can configure an alternative field to show the time with the altTimeField option.

Date: Time:

View Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#withAltTime-dateplustimepicker').dateplustimepicker({
        altTimeField: '#withAltTime-dateplustimepicker-alt',
        dateFormat: 'D, dd M yy',
        timeFormat: 'hh:mmTT'
      });
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <p>You can configure an alternative field to show the time with the altTimeField option.</p>
  <label for="withAltTime-dateplustimepicker">Date:</label>
  <input type="text" id="withAltTime-dateplustimepicker" name="withAltTime-dateplustimepicker" />
  <label for="withAltTime-dateplustimepicker-alt">Time:</label>
  <input type="text" id="withAltTime-dateplustimepicker-alt" name="withAltTime-dateplustimepicker-alt" />

</body>

</html>

Overview
Options
Events
Methods
Theming

The jQuery Dateplustimepicker is a highly configurable plugin that extends datepicker adding date and time picker functionality to your pages. You can customize the date/time format and language, restrict the selectable date/time ranges and add in buttons and other navigation options easily.

By default, the dateplustimepicker calendar opens in a small overlay onFocus and closes automatically onBlur. For an inline calendar, simply attach the dateplustimepicker to a div or span.

You can use keyboard shortcuts provided by datepicker to drive the date:

page up/down - previous/next month
ctrl+page up/down - previous/next year
ctrl+home - current month or open when closed
ctrl+left/right - previous/next day
ctrl+up/down - previous/next week
enter - accept the selected date
ctrl+end - close and erase the date
escape - close the datepicker without selection

Utility functions

$.dateplustimepicker.setDefaults( settings ) - Set settings for all dateplustimepicker instances.

If you need date functions you can use those ones provided by datepicker

$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.
$.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.
$.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.
$.datepicker.noWeekends - Set as beforeShowDay function to prevent selection of weekends.

Localization

Dateplustimepicker provides support for localizing its content to cater for different languages and time formats. Each localization is contained within its own file with the language code appended to the name, e.g. jquery.dateplustimepicker-es.js for Spanish. The desired localization file should be include after the main dateplustimepicker code. They add their settings to the set of available localizations and automatically apply them as defaults for all instances.

The $.dateplustimepicker.regional attribute holds an array of localizations, indexed by language code, with '' referring to the default (English). Each entry is an object with the following attributes: currentText, hourText, minuteText, secondText, timeFormat, timeOnlyTitle and timeText.

You can restore the default localizations with:

$.dateplustimepicker.setDefaults($.dateplustimepicker.regional['']);

And can then override an individual dateplustimepicker for a specific locale:

$(selector).dateplustimepicker($.dateplustimepicker.regional['es']);

To localize the date use datetimepicker localization files.

Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. jquery.ui.datepicker-fr.js for French. The desired localization file should be include after the main datepicker code. They add their settings to the set of available localizations and automatically apply them as defaults for all instances.

The $.datepicker.regional attribute holds an array of localizations, indexed by language code, with '' referring to the default (English). Each entry is an object with the following attributes: closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear and yearSuffix.

You can restore the default localizations with:

$.datepicker.setDefaults($.datepicker.regional['']);

And can then override an individual dateplustimepicker for a specific locale:

$(selector).datepicker($.datepicker.regional['fr']);

The localization files are also available in the UI svn: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

Dependencies

UI Core
UI Datepicker
UI Slider

A simple jQuery Date Plus Time picker.

$("#dateplustimepicker").dateplustimepicker();

<!DOCTYPE html>
<html>

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link href="jquery-dateplustimepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <script src="jquery-dateplustimepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      $("#dateplustimepicker").dateplustimepicker();
    });
  </script>
</head>

<body style="font-size:62.5%;">

  <div type="text" id="dateplustimepicker"></div>

</body>

</html>

* Some options are inherited from datepicker.

altTimeField

Type:

Selector, jQuery, Element

Default:

''

The jQuery selector for another field that is to be updated with the selected time from the dateplustimepicker. Use the timeFormat setting to change the format of the time within this field. Leave as blank for no alternate time field.
Code examples
Initialize a dateplustimepicker with the altTimeField option specified.
```
$(".selector").dateplustimepicker({ altTimeField: '#actualTime' });
```
Get or set the altTimeField option, after init.
```
//getter
var altTimeField = $(".selector").dateplustimepicker( "option", "altTimeField" );
//setter
$(".selector").dateplustimepicker( "option", "altTimeField", "#actualTime" );
```
altTimeFormat

Type:

String

Default:

''

The timeFormat to be used for the altField option. This allows one time format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the timeFormat attribute.
Code examples
Initialize a dateplustimepicker with the altTimeFormat option specified.
```
$(".selector").dateplustimepicker({ altTimeFormat: 'hh:mm TT' });
```
Get or set the altTimeFormat option, after init.
```
//getter
var altTimeFormat = $(".selector").dateplustimepicker( "option", "altTimeFormat" );
//setter
$(".selector").dateplustimepicker( "option", "altTimeFormat", 'hh:mm TT' );
```
defaultTime

Type:

Time, Number

Default:

{ hours: 0, minutes: 0, seconds: 0 }

Set the time to set on first opening if the field is blank. Specify either an actual time via a Time object or as a number of seconds.
Code examples
Initialize a dateplustimepicker with the defaultTime option specified.
```
$(".selector").dateplustimepicker({ defaultTime: { hours: 15 }  });
```
Get or set the defaultTime option, after init.
```
//getter
var defaultTime = $(".selector").dateplustimepicker( "option", "defaultTime" );
//setter
$(".selector").dateplustimepicker( "option", "defaultTime", {
	hours: 10,
	minutes: 15,
	seconds: 30 } );
```
hourGrid

Type:

Number

Default:

0

You can enable a grid behind the hours slider. This value sets the step for the grid. If its value is 0, no grid would be displayed.
Code examples
Initialize a dateplustimepicker with the hourGrid option specified.
```
$(".selector").dateplustimepicker({ hourGrid: 4 });
```
Get or set the hourGrid option, after init.
```
//getter
var hourGrid = $(".selector").dateplustimepicker( "option", "hourGrid" );
//setter
$(".selector").dateplustimepicker( "option", "hourGrid", 4 );
```
hourText

Type:

String

Default:

'Hours'

The text to display as label for the hours slider. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the hourText option specified.
```
$(".selector").dateplustimepicker({ hourText: 'horas' });
```
Get or set the hourText option, after init.
```
//getter
var hourText = $(".selector").dateplustimepicker( "option", "hourText" );
//setter
$(".selector").dateplustimepicker( "option", "hourText", 'horas' );
```
maxTime

Type:

Time, Number

Default:

{ hours: 23, minutes: 59, seconds: 59 }

Set a maximum selectable time via a Time object or as a number of seconds. The Time object can be specified with hours and/or minutes and/seconds.
Code examples
Initialize a dateplustimepicker with the maxTime option specified.
```
$(".selector").dateplustimepicker({ maxTime: { hours: 18, minutes: 30 }  });
```
Get or set the maxTime option, after init.
```
//getter
var maxTime = $(".selector").dateplustimepicker( "option", "maxTime" );
//setter
$(".selector").dateplustimepicker( "option", "maxTime", { hours: 20 } );
```
minTime

Type:

Time, Number

Default:

{ hours: 0, minutes: 0, seconds: 0 }

Set a minimum selectable time via a Time object or as a number of seconds. The Time object can be specified with hours and/or minutes and/seconds.
Code examples
Initialize a dateplustimepicker with the minTime option specified.
```
$(".selector").dateplustimepicker({ minTime: { hours: 9 } });
```
Get or set the minTime option, after init.
```
//getter
var minTime = $(".selector").dateplustimepicker( "option", "minTime" );
//setter
$(".selector").dateplustimepicker( "option", "minTime", 0 );
```
minuteGrid

Type:

Number

Default:

0

You can enable a grid behind the minutes slider. This value sets the step for the grid. If its value is 0, no grid would be displayed.
Code examples
Initialize a dateplustimepicker with the minuteGrid option specified.
```
$(".selector").dateplustimepicker({ minuteGrid: 10 });
```
Get or set the minuteGrid option, after init.
```
//getter
var minuteGrid = $(".selector").dateplustimepicker( "option", "minuteGrid" );
//setter
$(".selector").dateplustimepicker( "option", "minuteGrid", 10 );
```
minuteText

Type:

String

Default:

'Minutes'

The text to display as label for the minutes slider. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the minuteText option specified.
```
$(".selector").dateplustimepicker({ minuteText: 'minutos' });
```
Get or set the minuteText option, after init.
```
//getter
var minuteText = $(".selector").dateplustimepicker( "option", "minuteText" );
//setter
$(".selector").dateplustimepicker( "option", "minuteText", 'minutos' );
```
secondGrid

Type:

Number

Default:

0

You can enable a grid behind the seconds slider. This value sets the step for the grid. If its value is 0, no grid would be displayed.
Code examples
Initialize a dateplustimepicker with the secondGrid option specified.
```
$(".selector").dateplustimepicker({ secondGrid: 15 });
```
Get or set the secondGrid option, after init.
```
//getter
var secondGrid = $(".selector").dateplustimepicker( "option", "secondGrid" );
//setter
$(".selector").dateplustimepicker( "option", "secondGrid", 15 );
```
secondText

Type:

String

Default:

'Seconds'

The text to display as label for the seconds slider. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the secondText option specified.
```
$(".selector").dateplustimepicker({ secondText: 'segundos' });
```
Get or set the secondText option, after init.
```
//getter
var secondText = $(".selector").dateplustimepicker( "option", "secondText" );
//setter
$(".selector").dateplustimepicker( "option", "secondText", 'segundos' );
```
showTime

Type:

Boolean

Default:

false

Enables (true) or disables (false) the time display above the sliders.
Code examples
Initialize a dateplustimepicker with the showTime option specified.
```
$(".selector").dateplustimepicker({ showTime: true });
```
Get or set the showTime option, after init.
```
//getter
var showTime = $(".selector").dateplustimepicker( "option", "showTime" );
//setter
$(".selector").dateplustimepicker( "option", "showTime", true );
```
step

Type:

Time, Number

Default:

{ hours: 0, minutes: 0, seconds: 1 }

Set a step to configure the allowed selectable time via a Time object or as a number of seconds. The Time object can be specified with hours and/or minutes and/seconds. When step is configured you can select times only in steps from min time to max time.
Code examples
Initialize a dateplustimepicker with the step option specified.
```
$(".selector").dateplustimepicker({ step: { minutes: 30 }  });
```
Get or set the step option, after init.
```
//getter
var step = $(".selector").dateplustimepicker( "option", "step" );
//setter
$(".selector").dateplustimepicker( "option", "step", { hours: 2 } );
```
timeFormat

Type:

String

Default:

'hh:mm tt'
The timeFormat to be used for the dateplustimepicker. This attribute is one of the regionalisation attributes. The format can be combinations of the following:
- h - hour (no leading zero)
- hh - hour (two digit)
- m - minutes (no leading zero)
- mm - minutes (two digit)
- s - seconds (no leading zero)
- ss - seconds (two digit)
- t - a for AM, p for PM
- tt - am for AM, pm for PM
- T - A for AM, P for PM
- TT - AM for AM, PM for PM
Allowed separator characters ':' or '.' Optional t|tt|T|TT separator ' '
Code examples
Initialize a dateplustimepicker with the timeFormat option specified.
```
$(".selector").dateplustimepicker({ timeFormat: 'hh:mm tt' });
```
Get or set the timeFormat option, after init.
```
//getter
var timeFormat = $(".selector").dateplustimepicker( "option", "timeFormat" );
//setter
$(".selector").dateplustimepicker( "option", "timeFormat", 'hh:mm:ss' );
```
timeOnly

Type:

Boolean

Default:

false

Configure an only time picker (true) or a date and time picker (false).
Code examples
Initialize a dateplustimepicker with the timeOnly option specified.
```
$(".selector").dateplustimepicker({ timeOnly: true  });
```
Get or set the timeOnly option, after init.
```
//getter
var timeOnly = $(".selector").dateplustimepicker( "option", "timeOnly" );
//setter
$(".selector").dateplustimepicker( "option", "timeOnly", true );
```
timeOnlyTitle

Type:

String

Default:

'Choose Time'

Text to display as the title for an only time picker. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the timeOnlyTitle option specified.
```
$(".selector").dateplustimepicker({ timeOnlyTitle: 'Selecciona la Hora'  });
```
Get or set the timeOnlyTitle option, after init.
```
//getter
var timeOnlyTitle = $(".selector").dateplustimepicker( "option", "timeOnlyTitle" );
//setter
$(".selector").dateplustimepicker( "option", "timeOnlyTitle", 'Selecciona la Hora' );
```
timeText

Type:

String

Default:

'Time'

The text to display as label for the time display. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the timeText option specified.
```
$(".selector").dateplustimepicker({ timeText: 'Hora' });
```
Get or set the timeText option, after init.
```
//getter
var timeText = $(".selector").dateplustimepicker( "option", "timeText" );
//setter
$(".selector").dateplustimepicker( "option", "timeText", 'Hora' );
```

Inherited from datepicker

disabled

Type:

Boolean

Default:

false

Disables (true) or enables (false) the dateplustimepicker. Can be set when initialising (first creating) the dateplustimepicker.
Code examples
Initialize a dateplustimepicker with the disabled option specified.
```
$(".selector").dateplustimepicker({ disabled: true });
```
Get or set the disabled option, after init.
```
//getter
var disabled = $(".selector").dateplustimepicker( "option", "disabled" );
//setter
$(".selector").dateplustimepicker( "option", "disabled", true );
```
altField

Type:

Selector, jQuery, Element

Default:

''

The jQuery selector for another field that is to be updated with the selected date from the dateplustimepicker. Use the altFormat setting to change the format of the date within this field. Leave as blank for no alternate field.
Code examples
Initialize a dateplustimepicker with the altField option specified.
```
$(".selector").dateplustimepicker({ altField: '#actualDate' });
```
Get or set the altField option, after init.
```
//getter
var altField = $(".selector").dateplustimepicker( "option", "altField" );
//setter
$(".selector").dateplustimepicker( "option", "altField", '#actualDate' );
```
altFormat

Type:

String

Default:

''

The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
Code examples
Initialize a dateplustimepicker with the altFormat option specified.
```
$(".selector").dateplustimepicker({ altFormat: 'yy-mm-dd' });
```
Get or set the altFormat option, after init.
```
//getter
var altFormat = $(".selector").dateplustimepicker( "option", "altFormat" );
//setter
$(".selector").dateplustimepicker( "option", "altFormat", 'yy-mm-dd' );
```

appendText

Type:: String
Default:: ''

The text to display after each date field, e.g. to show the required format.

Code examples

Initialize a dateplustimepicker with the appendText option specified.

$(".selector").dateplustimepicker({ appendText: '(yyyy-mm-dd)' });

Get or set the appendText option, after init.

//getter
var appendText = $(".selector").dateplustimepicker( "option", "appendText" );
//setter
$(".selector").dateplustimepicker( "option", "appendText", '(yyyy-mm-dd)' );

autoSize

Type:

Boolean

Default:

false

Set to true to automatically resize the input field to accomodate dates in the current dateFormat.
Code examples
Initialize a dateplustimepicker with the autoSize option specified.
```
$(".selector").dateplustimepicker({ autoSize: true });
```
Get or set the autoSize option, after init.
```
//getter
var autoSize = $(".selector").dateplustimepicker( "option", "autoSize" );
//setter
$(".selector").dateplustimepicker( "option", "autoSize", true );
```

buttonImage

Type:: String
Default:: ''

The URL for the popup button image. If set, buttonText becomes the alt value and is not directly displayed.

Code examples

Initialize a dateplustimepicker with the buttonImage option specified.

$(".selector").dateplustimepicker({ buttonImage: '/images/dateplustimepicker.gif' });

Get or set the buttonImage option, after init.

//getter
var buttonImage = $(".selector").dateplustimepicker( "option", "buttonImage" );
//setter
$(".selector").dateplustimepicker( "option", "buttonImage", '/images/dateplustimepicker.gif' );

buttonImageOnly

Type:

Boolean

Default:

false

Set to true to place an image after the field to use as the trigger without it appearing on a button.
Code examples
Initialize a dateplustimepicker with the buttonImageOnly option specified.
```
$(".selector").dateplustimepicker({ buttonImageOnly: true });
```
Get or set the buttonImageOnly option, after init.
```
//getter
var buttonImageOnly = $(".selector").dateplustimepicker( "option", "buttonImageOnly" );
//setter
$(".selector").dateplustimepicker( "option", "buttonImageOnly", true );
```
buttonText

Type:

String

Default:

'...'

The text to display on the trigger button. Use in conjunction with showOn equal to 'button' or 'both'.
Code examples
Initialize a dateplustimepicker with the buttonText option specified.
```
$(".selector").dateplustimepicker({ buttonText: 'Choose' });
```
Get or set the buttonText option, after init.
```
//getter
var buttonText = $(".selector").dateplustimepicker( "option", "buttonText" );
//setter
$(".selector").dateplustimepicker( "option", "buttonText", 'Choose' );
```
calculateWeek

Type:

Function

Default:

$.datepicker.iso8601Week

A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.
Code examples
Initialize a dateplustimepicker with the calculateWeek option specified.
```
$(".selector").dateplustimepicker({ calculateWeek: myWeekCalc });
```
Get or set the calculateWeek option, after init.
```
//getter
var calculateWeek = $(".selector").dateplustimepicker( "option", "calculateWeek" );
//setter
$(".selector").dateplustimepicker( "option", "calculateWeek", myWeekCalc );
```
changeMonth

Type:

Boolean

Default:

false

Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.
Code examples
Initialize a dateplustimepicker with the changeMonth option specified.
```
$(".selector").dateplustimepicker({ changeMonth: true });
```
Get or set the changeMonth option, after init.
```
//getter
var changeMonth = $(".selector").dateplustimepicker( "option", "changeMonth" );
//setter
$(".selector").dateplustimepicker( "option", "changeMonth", true );
```
changeYear

Type:

Boolean

Default:

false

Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the yearRange option to control which years are made available for selection.
Code examples
Initialize a dateplustimepicker with the changeYear option specified.
```
$(".selector").dateplustimepicker({ changeYear: true });
```
Get or set the changeYear option, after init.
```
//getter
var changeYear = $(".selector").dateplustimepicker( "option", "changeYear" );
//setter
$(".selector").dateplustimepicker( "option", "changeYear", true );
```
closeText

Type:

String

Default:

'Done'

The text to display for the close link. This attribute is one of the regionalisation attributes. Use the showButtonPanel to display this button.
Code examples
Initialize a dateplustimepicker with the closeText option specified.
```
$(".selector").dateplustimepicker({ closeText: 'X' });
```
Get or set the closeText option, after init.
```
//getter
var closeText = $(".selector").dateplustimepicker( "option", "closeText" );
//setter
$(".selector").dateplustimepicker( "option", "closeText", 'X' );
```
constrainInput

Type:

Boolean

Default:

true

When true entry in the input field is constrained to those characters allowed by the current dateFormat.
Code examples
Initialize a dateplustimepicker with the constrainInput option specified.
```
$(".selector").dateplustimepicker({ constrainInput: false });
```
Get or set the constrainInput option, after init.
```
//getter
var constrainInput = $(".selector").dateplustimepicker( "option", "constrainInput" );
//setter
$(".selector").dateplustimepicker( "option", "constrainInput", false );
```
currentText

Type:

String

Default:

'Today'

The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the showButtonPanel to display this button.
Code examples
Initialize a dateplustimepicker with the currentText option specified.
```
$(".selector").dateplustimepicker({ currentText: 'Now' });
```
Get or set the currentText option, after init.
```
//getter
var currentText = $(".selector").dateplustimepicker( "option", "currentText" );
//setter
$(".selector").dateplustimepicker( "option", "currentText", 'Now' );
```
dateFormat

Type:

String

Default:

'mm/dd/yy'

The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.
Code examples
Initialize a dateplustimepicker with the dateFormat option specified.
```
$(".selector").dateplustimepicker({ dateFormat: 'yy-mm-dd' });
```
Get or set the dateFormat option, after init.
```
//getter
var dateFormat = $(".selector").dateplustimepicker( "option", "dateFormat" );
//setter
$(".selector").dateplustimepicker( "option", "dateFormat", 'yy-mm-dd' );
```
dayNames

Type:

Array

Default:

['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

The list of long day names, starting from Sunday, for use as requested via the dateFormat setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the dayNames option specified.
```
$(".selector").dateplustimepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
```
Get or set the dayNames option, after init.
```
//getter
var dayNames = $(".selector").dateplustimepicker( "option", "dayNames" );
//setter
$(".selector").dateplustimepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );
```
dayNamesMin

Type:

Array

Default:

['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

The list of minimised day names, starting from Sunday, for use as column headers within the dateplustimepicker. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the dayNamesMin option specified.
```
$(".selector").dateplustimepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
```
Get or set the dayNamesMin option, after init.
```
//getter
var dayNamesMin = $(".selector").dateplustimepicker( "option", "dayNamesMin" );
//setter
$(".selector").dateplustimepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );
```
dayNamesShort

Type:

Array

Default:

['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the dayNamesShort option specified.
```
$(".selector").dateplustimepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
```
Get or set the dayNamesShort option, after init.
```
//getter
var dayNamesShort = $(".selector").dateplustimepicker( "option", "dayNamesShort" );
//setter
$(".selector").dateplustimepicker( "option", "dayNamesShort", ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] );
```
defaultDate

Type:

Date, Number, String

Default:

null

Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
Code examples
Initialize a dateplustimepicker with the defaultDate option specified.
```
$(".selector").dateplustimepicker({ defaultDate: +7 });
```
Get or set the defaultDate option, after init.
```
//getter
var defaultDate = $(".selector").dateplustimepicker( "option", "defaultDate" );
//setter
$(".selector").dateplustimepicker( "option", "defaultDate", +7 );
```
duration

Type:

String, Number

Default:

'normal'

Control the speed at which the dateplustimepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").
Code examples
Initialize a dateplustimepicker with the duration option specified.
```
$(".selector").dateplustimepicker({ duration: 'slow' });
```
Get or set the duration option, after init.
```
//getter
var duration = $(".selector").dateplustimepicker( "option", "duration" );
//setter
$(".selector").dateplustimepicker( "option", "duration", 'slow' );
```
firstDay

Type:

Number

Default:

0

Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the firstDay option specified.
```
$(".selector").dateplustimepicker({ firstDay: 1 });
```
Get or set the firstDay option, after init.
```
//getter
var firstDay = $(".selector").dateplustimepicker( "option", "firstDay" );
//setter
$(".selector").dateplustimepicker( "option", "firstDay", 1 );
```
gotoCurrent

Type:

Boolean

Default:

false

When true the current day link moves to the currently selected date instead of today.
Code examples
Initialize a dateplustimepicker with the gotoCurrent option specified.
```
$(".selector").dateplustimepicker({ gotoCurrent: true });
```
Get or set the gotoCurrent option, after init.
```
//getter
var gotoCurrent = $(".selector").dateplustimepicker( "option", "gotoCurrent" );
//setter
$(".selector").dateplustimepicker( "option", "gotoCurrent", true );
```
hideIfNoPrevNext

Type:

Boolean

Default:

false

Normally the previous and next links are disabled when not applicable (see minDate/maxDate). You can hide them altogether by setting this attribute to true.
Code examples
Initialize a dateplustimepicker with the hideIfNoPrevNext option specified.
```
$(".selector").dateplustimepicker({ hideIfNoPrevNext: true });
```
Get or set the hideIfNoPrevNext option, after init.
```
//getter
var hideIfNoPrevNext = $(".selector").dateplustimepicker( "option", "hideIfNoPrevNext" );
//setter
$(".selector").dateplustimepicker( "option", "hideIfNoPrevNext", true );
```
isRTL

Type:

Boolean

Default:

false

True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the isRTL option specified.
```
$(".selector").dateplustimepicker({ isRTL: true });
```
Get or set the isRTL option, after init.
```
//getter
var isRTL = $(".selector").dateplustimepicker( "option", "isRTL" );
//setter
$(".selector").dateplustimepicker( "option", "isRTL", true );
```
maxDate

Type:

Date, Number, String

Default:

null

Set a maximum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.
Code examples
Initialize a dateplustimepicker with the maxDate option specified.
```
$(".selector").dateplustimepicker({ maxDate: '+1m +1w' });
```
Get or set the maxDate option, after init.
```
//getter
var maxDate = $(".selector").dateplustimepicker( "option", "maxDate" );
//setter
$(".selector").dateplustimepicker( "option", "maxDate", '+1m +1w' );
```
minDate

Type:

Date, Number, String

Default:

null

Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
Code examples
Initialize a dateplustimepicker with the minDate option specified.
```
$(".selector").dateplustimepicker({ minDate: new Date(2007, 1 - 1, 1) });
```
Get or set the minDate option, after init.
```
//getter
var minDate = $(".selector").dateplustimepicker( "option", "minDate" );
//setter
$(".selector").dateplustimepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
```

monthNames

Type:: Array
Default:: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

The list of full month names, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

Code examples

Initialize a dateplustimepicker with the monthNames option specified.

$(".selector").dateplustimepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] });

Get or set the monthNames option, after init.

//getter
var monthNames = $(".selector").dateplustimepicker( "option", "monthNames" );
//setter
$(".selector").dateplustimepicker( "option", "monthNames", ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] );

monthNamesShort

Type:

Array

Default:

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

The list of abbreviated month names, as used in the month header on each dateplustimepicker and as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the monthNamesShort option specified.
```
$(".selector").dateplustimepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] });
```
Get or set the monthNamesShort option, after init.
```
//getter
var monthNamesShort = $(".selector").dateplustimepicker( "option", "monthNamesShort" );
//setter
$(".selector").dateplustimepicker( "option", "monthNamesShort", ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] );
```
navigationAsDateFormat

Type:

Boolean

Default:

false

When true the formatDate function is applied to the prevText, nextText, and currentText values before display, allowing them to display the target month names for example.
Code examples
Initialize a dateplustimepicker with the navigationAsDateFormat option specified.
```
$(".selector").dateplustimepicker({ navigationAsDateFormat: true });
```
Get or set the navigationAsDateFormat option, after init.
```
//getter
var navigationAsDateFormat = $(".selector").dateplustimepicker( "option", "navigationAsDateFormat" );
//setter
$(".selector").dateplustimepicker( "option", "navigationAsDateFormat", true );
```
nextText

Type:

String

Default:

'Next'

The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.
Code examples
Initialize a dateplustimepicker with the nextText option specified.
```
$(".selector").dateplustimepicker({ nextText: 'Later' });
```
Get or set the nextText option, after init.
```
//getter
var nextText = $(".selector").dateplustimepicker( "option", "nextText" );
//setter
$(".selector").dateplustimepicker( "option", "nextText", 'Later' );
```
numberOfMonths

Type:

Number, Array

Default:

1

Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.
Code examples
Initialize a dateplustimepicker with the numberOfMonths option specified.
```
$(".selector").dateplustimepicker({ numberOfMonths: [2, 3] });
```
Get or set the numberOfMonths option, after init.
```
//getter
var numberOfMonths = $(".selector").dateplustimepicker( "option", "numberOfMonths" );
//setter
$(".selector").dateplustimepicker( "option", "numberOfMonths", [2, 3] );
```
prevText

Type:

String

Default:

'Prev'

The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.
Code examples
Initialize a dateplustimepicker with the prevText option specified.
```
$(".selector").dateplustimepicker({ prevText: 'Earlier' });
```
Get or set the prevText option, after init.
```
//getter
var prevText = $(".selector").dateplustimepicker( "option", "prevText" );
//setter
$(".selector").dateplustimepicker( "option", "prevText", 'Earlier' );
```
selectOtherMonths

Type:

Boolean

Default:

false

When true days in other months shown before or after the current month are selectable. This only applies if showOtherMonths is also true.
Code examples
Initialize a dateplustimepicker with the selectOtherMonths option specified.
```
$(".selector").dateplustimepicker({ selectOtherMonths: true });
```
Get or set the selectOtherMonths option, after init.
```
//getter
var selectOtherMonths = $(".selector").dateplustimepicker( "option", "selectOtherMonths" );
//setter
$(".selector").dateplustimepicker( "option", "selectOtherMonths", true );
```
shortYearCutoff

Type:

String, Number

Default:

'+10'

Set the cutoff year for determining the century for a date (used in conjunction with dateFormat 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.
Code examples
Initialize a dateplustimepicker with the shortYearCutoff option specified.
```
$(".selector").dateplustimepicker({ shortYearCutoff: 50 });
```
Get or set the shortYearCutoff option, after init.
```
//getter
var shortYearCutoff = $(".selector").dateplustimepicker( "option", "shortYearCutoff" );
//setter
$(".selector").dateplustimepicker( "option", "shortYearCutoff", 50 );
```
showAnim

Type:

String

Default:

'show'

Set the name of the animation used to show/hide the dateplustimepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide jQuery UI effects, or '' for no animation.
Code examples
Initialize a dateplustimepicker with the showAnim option specified.
```
$(".selector").dateplustimepicker({ showAnim: 'fold' });
```
Get or set the showAnim option, after init.
```
//getter
var showAnim = $(".selector").dateplustimepicker( "option", "showAnim" );
//setter
$(".selector").dateplustimepicker( "option", "showAnim", 'fold' );
```

showButtonPanel

Type:: Boolean
Default:: false

Whether to show the button panel.

Code examples

Initialize a dateplustimepicker with the showButtonPanel option specified.

$(".selector").dateplustimepicker({ showButtonPanel: true });

Get or set the showButtonPanel option, after init.

//getter
var showButtonPanel = $(".selector").dateplustimepicker( "option", "showButtonPanel" );
//setter
$(".selector").dateplustimepicker( "option", "showButtonPanel", true );

showCurrentAtPos

Type:

Number

Default:

0

Specify where in a multi-month display the current month shows, starting from 0 at the top/left.
Code examples
Initialize a dateplustimepicker with the showCurrentAtPos option specified.
```
$(".selector").dateplustimepicker({ showCurrentAtPos: 3 });
```
Get or set the showCurrentAtPos option, after init.
```
//getter
var showCurrentAtPos = $(".selector").dateplustimepicker( "option", "showCurrentAtPos" );
//setter
$(".selector").dateplustimepicker( "option", "showCurrentAtPos", 3 );
```
showMonthAfterYear

Type:

Boolean

Default:

false

Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the showMonthAfterYear option specified.
```
$(".selector").dateplustimepicker({ showMonthAfterYear: true });
```
Get or set the showMonthAfterYear option, after init.
```
//getter
var showMonthAfterYear = $(".selector").dateplustimepicker( "option", "showMonthAfterYear" );
//setter
$(".selector").dateplustimepicker( "option", "showMonthAfterYear", true );
```
showOn

Type:

String

Default:

'focus'

Have the dateplustimepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').
Code examples
Initialize a dateplustimepicker with the showOn option specified.
```
$(".selector").dateplustimepicker({ showOn: 'both' });
```
Get or set the showOn option, after init.
```
//getter
var showOn = $(".selector").dateplustimepicker( "option", "showOn" );
//setter
$(".selector").dateplustimepicker( "option", "showOn", 'both' );
```
showOptions

Type:

Options

Default:

{}

If using one of the jQuery UI effects for showAnim, you can provide additional settings for that animation via this option.
Code examples
Initialize a dateplustimepicker with the showOptions option specified.
```
$(".selector").dateplustimepicker({ showOptions: {direction: 'up' });
```
Get or set the showOptions option, after init.
```
//getter
var showOptions = $(".selector").dateplustimepicker( "option", "showOptions" );
//setter
$(".selector").dateplustimepicker( "option", "showOptions", {direction: 'up' );
```
showOtherMonths

Type:

Boolean

Default:

false

Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use selectOtherMonths.
Code examples
Initialize a dateplustimepicker with the showOtherMonths option specified.
```
$(".selector").dateplustimepicker({ showOtherMonths: true });
```
Get or set the showOtherMonths option, after init.
```
//getter
var showOtherMonths = $(".selector").dateplustimepicker( "option", "showOtherMonths" );
//setter
$(".selector").dateplustimepicker( "option", "showOtherMonths", true );
```
showWeek

Type:

Boolean

Default:

false

When true a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.
Code examples
Initialize a dateplustimepicker with the showWeek option specified.
```
$(".selector").dateplustimepicker({ showWeek: true });
```
Get or set the showWeek option, after init.
```
//getter
var showWeek = $(".selector").dateplustimepicker( "option", "showWeek" );
//setter
$(".selector").dateplustimepicker( "option", "showWeek", true );
```
stepMonths

Type:

Number

Default:

1

Set how many months to move when clicking the Previous/Next links.
Code examples
Initialize a dateplustimepicker with the stepMonths option specified.
```
$(".selector").dateplustimepicker({ stepMonths: 3 });
```
Get or set the stepMonths option, after init.
```
//getter
var stepMonths = $(".selector").dateplustimepicker( "option", "stepMonths" );
//setter
$(".selector").dateplustimepicker( "option", "stepMonths", 3 );
```
weekHeader

Type:

String

Default:

'Wk'

The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use showWeek to display this column.
Code examples
Initialize a dateplustimepicker with the weekHeader option specified.
```
$(".selector").dateplustimepicker({ weekHeader: 'W' });
```
Get or set the weekHeader option, after init.
```
//getter
var weekHeader = $(".selector").dateplustimepicker( "option", "weekHeader" );
//setter
$(".selector").dateplustimepicker( "option", "weekHeader", 'W' );
```
yearRange

Type:

String

Default:

'c-10:c+10'

Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.
Code examples
Initialize a dateplustimepicker with the yearRange option specified.
```
$(".selector").dateplustimepicker({ yearRange: '2000:2010' });
```
Get or set the yearRange option, after init.
```
//getter
var yearRange = $(".selector").dateplustimepicker( "option", "yearRange" );
//setter
$(".selector").dateplustimepicker( "option", "yearRange", '2000:2010' );
```
yearSuffix

Type:

String

Default:

''

Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.
Code examples
Initialize a dateplustimepicker with the yearSuffix option specified.
```
$(".selector").dateplustimepicker({ yearSuffix: 'CE' });
```
Get or set the yearSuffix option, after init.
```
//getter
var yearSuffix = $(".selector").dateplustimepicker( "option", "yearSuffix" );
//setter
$(".selector").dateplustimepicker( "option", "yearSuffix", 'CE' );
```

* Some events are inherited from datepicker.

onDateTimeChange

function(date, inst, from_picker)

Allows you to define your own event when the date or time are changed. The function receives the current date as a date object, the dateplustimepicker instance and a boolean as parameters. The last parameter will be true when the change comes from the picker and false when the change is made programmatically.
Code examples
Supply a callback function to handle the onDateTimeChange event as an init option.
```
$('.selector').dateplustimepicker({
  onDateTimeChange: function(date, inst, from_picker) { ... }
});
```
onDateTimeChangeStop

function(date, inst, from_picker)

Allows you to define your own event when the date or time are changed, after sliding has finished. The function receives the current date as a date object, the dateplustimepicker instance and a boolean as parameters. The last parameter will be true when the change comes from the picker and false when the change is made programmatically.
Code examples
Supply a callback function to handle the onDateTimeChangeStop event as an init option.
```
$('.selector').dateplustimepicker({
  onDateTimeChangeStop: function(date, inst, from_picker) { ... }
});
```
onTimeChange

function(time, inst, from_picker)

Allows you to define your own event when the time is changed. The function receives the current time as a time object, the dateplustimepicker instance and a boolean as parameters. The last parameter will be true when the change comes from the picker and false when the change is made programmatically.
Code examples
Supply a callback function to handle the onTimeChange event as an init option.
```
$('.selector').dateplustimepicker({
  onTimeChange: function(time, inst, from_picker) { ... }
});
```
onTimeChangeStop

function(time, inst, from_picker)

Allows you to define your own event when the sliding stops and time is changed. The function receives the current time as a time object, the dateplustimepicker instance and a boolean as parameters. The last parameter will be true when the change comes from the picker and false when the change is made programmatically.
Code examples
Supply a callback function to handle the onTimeChangeStop event as an init option.
```
$('.selector').dateplustimepicker({
  onTimeChangeStop: function(time, inst, from_picker) { ... }
});
```

Inherited from datepicker

beforeShow

function(input, inst)

Can be a function that takes an input field and current dateplustimepicker instance and returns an options object to update the dateplustimepicker with. It is called just before the dateplustimepicker is displayed.
Code examples
Supply a callback function to handle the beforeShow event as an init option.
```
$('.selector').dateplustimepicker({
  beforeShow: function(input, inst) { ... }
});
```
beforeShowDay

function(date)

The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the dateplustimepicker before it is displayed.
Code examples
Supply a callback function to handle the beforeShowDay event as an init option.
```
$('.selector').dateplustimepicker({
  beforeShowDay: function(date) { ... }
});
```
onChangeMonthYear

function(year, month, inst)

Allows you to define your own event when the dateplustimepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the dateplustimepicker instance as parameters. this refers to the associated input field.
Code examples
Supply a callback function to handle the onChangeMonthYear event as an init option.
```
$('.selector').dateplustimepicker({
  onChangeMonthYear: function(year, month, inst) { ... }
});
```
onClose

function(dateText, inst)

Allows you to define your own event when the dateplustimepicker is closed, whether or not a date is selected. The function receives the selected date as text ('' if none) and the dateplustimepicker instance as parameters. this refers to the associated input field.
Code examples
Supply a callback function to handle the onClose event as an init option.
```
$('.selector').dateplustimepicker({
  onClose: function(dateText, inst) { ... }
});
```
onSelect

function(dateText, inst)

Allows you to define your own event when the dateplustimepicker is selected. The function receives the selected date as text and the dateplustimepicker instance as parameters. this refers to the associated input field.
Code examples
Supply a callback function to handle the onSelect event as an init option.
```
$('.selector').dateplustimepicker({
  onSelect: function(dateText, inst) { ... }
});
```

* Some methods are inherited from datepicker.

getTime

Signature:

.dateplustimepicker( "getTime" )

Returns the current time for the dateplustimepicker or null if no time has been selected.
setTime

Signature:

.dateplustimepicker( "setTime" , time )

Sets the current time for the dateplustimepicker. The new time may be a Time object or a string in the current time format (e.g. '05:30 pm').
getDateTime

Signature:

.dateplustimepicker( "getDateTime" )

Returns the current date and time for the dateplustimepicker or null if no date and time has been selected.
setDateTime

Signature:

.dateplustimepicker( "setDateTime" , datetime )

Sets the current date and time for the dateplustimepicker. The new date and time may be a string in the current date and time formats (e.g. '12/25/2010 05:30 pm').

Inherited from datepicker

destroy

Signature:

.dateplustimepicker( "destroy" )

Remove the dateplustimepicker functionality completely. This will return the element back to its pre-init state.
disable

Signature:

.dateplustimepicker( "disable" )

Disable the dateplustimepicker.
enable

Signature:

.dateplustimepicker( "enable" )

Enable the dateplustimepicker.
option

Signature:

.dateplustimepicker( "option" , optionName , [value] )

Get or set any dateplustimepicker option. If no value is specified, will act as a getter.
option

Signature:

.dateplustimepicker( "option" , options )

Set multiple dateplustimepicker options at once by providing an options object.
widget

Signature:

.dateplustimepicker( "widget" )

Returns the .ui-datepicker element.
dialog

Signature:

.dateplustimepicker( "dialog" , date , [onSelect] , [settings] , [pos] )

Open a dateplustimepicker in a "dialog" box.

dateText: the initial date for the date picker as either a Date or a string in the current date format.

onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters.

settings: The new settings for the date picker.

pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.
isDisabled

Signature:

.dateplustimepicker( "isDisabled" )

Determine whether a date picker has been disabled.
hide

Signature:

.dateplustimepicker( "hide" )

Close a previously opened date picker.
show

Signature:

.dateplustimepicker( "show" )

Call up a previously attached date picker.
refresh

Signature:

.dateplustimepicker( "refresh" )

Redraw a date picker, after having made some external modifications.
getDate

Signature:

.dateplustimepicker( "getDate" )

Returns the current date for the dateplustimepicker or null if no date has been selected.
setDate

Signature:

.dateplustimepicker( "setDate" , date )

Sets the current date for the dateplustimepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.

jQuery DateplusTimePicker time selection has only some sliders and some labels. The sliders will be themed with the jquery ui theme you use. To theme the labels you can tweak the jquery-dateplustimepicker.css file to get the look and feel that fits your proyect.

To theme the calendar follow the instructions for datepicker.

The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
   <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
      <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
      <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
      <div class="ui-datepicker-title">
         <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
      </div>
   </div>
   <table class="ui-datepicker-calendar">
      <thead>
      <tr>
         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
         ...
      </tr>
      </thead>
      <tbody><tr>
         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
         ...
      </tr>
      </tbody>
   </table>
   <div class="ui-datepicker-buttonpane ui-widget-content">
      <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
      <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
   </div>
</div>

Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is <input type="text" /> or <div></div>.

Utility functions

Localization

Dependencies

Example

Options

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Inherited from datepicker

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples