jQuery datetextentry Examples

The following examples illustrate the use of various options

Description Example

Default behaviour.

$('#date1').datetextentry();

Change field order and separator.

$('#date2').datetextentry({
    field_order : 'YMD',
    separator   : '-'
});

Disable tooltips - leaving only field hints.

$('#date3').datetextentry({
    show_tooltips : false,
    show_hints    : true
});

Disable field hints - leaving only tooltips.

$('#date4').datetextentry({
    show_tooltips : true,
    show_hints    : false
});

Disable tooltips and re-position error box for messages below the widget rather than to the right.

$('#date5').datetextentry({
    show_tooltips : false,
    errorbox_x    : -135,
    errorbox_y    : 28
});

Specify allowable date range using maximum and minimum dates.

$('#date6').datetextentry({
    min_date         : '1970-01-01',
    min_date_message : 'Please select a date in the 1970s',
    max_date         : '1979-31-12',
    max_date_message : 'Please select a date in the 1970s',
});

Specify allowable date range using a minimum year - with the default message; and using a function to calculate the maximum date.

$('#date7').datetextentry({
    min_year         : '2000',
    max_date         : function() { return this.get_today(); },
    max_date_message : 'Date must not be in the future'
});

Note: Your function should return an object like:
{ day: '02', month: '06', year: '2012' }
When the function is called, this will point to the datetextwidget object, which provides a get_today() method returning the current date in the required format.

Use a custom validation function to apply arbitrary rules.

$('#date8').datetextentry({
    custom_validation : function(valid) {
        if(valid.year === '1983'  &&  valid.date.getDay() === 2) {
            return;
        }
        throw "Please select a Tuesday in 1983";
    }
});

Your code can interact with the datetextentry widget after it has been initialised. You can set and clear the date value as well as moving focus to the widget's first field:

$('#date9').datetextentry();

$('#launch-dates li').click(function() {
    $('#date9').datetextentry('set_date', $(this).data('date'));
});

$('#btn-clear').click(function() {
    $('#date9').datetextentry('clear');
});

$('#btn-focus').click(function() {
    $('#date9').datetextentry('focus');
});

Select a launch date:

  • Apollo 1
  • Apollo 7
  • Apollo 8
  • Apollo 9
  • Apollo 10
  • Apollo 11
  • Apollo 12
  • Apollo 13
  • Apollo 14
  • Apollo 15
  • Apollo 16
  • Apollo 17

Supply a callback function to be run when a valid date is entered.

$('#date10').datetextentry({
    on_change : function(date_str) {
        $('#valid-date10').text(date_str);
    }
});
Validated date:

Supply a callback function to be run when the error status changes - in this case used to put the field label in 'error' mode.

$('#date11').datetextentry({
    on_error : function(msg) {
        $('label[for=date11]').toggleClass('error', msg !== '');
    }
});