API Reference

Oğuzhan Eroğlu edited this page Oct 15, 2017 · 6 revisions

Initializing Widget

You should initialize widget and get controller object.

var $datepicker = $('.someDatepicker');
$datepicker.datepicker();

// Controller object
var datepicker = jQueryDatepicker.data($datepicker);

You can use methods like:

console.log(datepicker.getDate())

jQueryDatepicker Object

Methods

Method: event(str)
$datepicker.on(jQueryDatepicker.event('date_selected'), function (event, date) {
    if (date.mode == 'date') {
        console.log('date selected:', date);
    } else if (date.mode == 'start_date') {
        console.log('start date selected:', date);
    }
});

Statics

  • jQueryDatepicker.day_names_short - (obj) (Should be three characters.)
  • jQueryDatepicker.day_names - (obj)
  • jQueryDatepicker.month_names - (obj)

Note: Indexes of these objects begin from 1.

Events

Event: date_selected

This event pass an date_object to callback. Usage is like to:

$datepicker.on(jQueryDatepicker.event('date_selected'), function (event, date) {
    if (date.mode == 'date') {
        console.log('date selected:', date);
    } else if (date.mode == 'start_date') {
        console.log('start date selected:', date);
    }

    if (datepicker.isStartDateSelected()) {
        $start.show().html('<b>start date:</b> '+date.start_date.date.toString());
    }

    $selected.show().html('<b>date:</b> '+date.date.toString());
});

Param date_object is like to:

{
  "mode": "date",
  "details": {
    "year": 2017,
    "month": 1,
    "day": 21,
    "dayofweek": 6
  },
  "date": "2017-01-20T21:00:00.000Z", /* Date() Object */
  "start_date": {
    "details": {
      "year": 2017,
      "month": 1,
      "day": 4
    },
    "date": "2017-01-03T21:00:00.000Z" /* Date() Object */
  },
  "from_user": false
}

Methods

Method: setMode(str)

Switching mode such as selecting date or start_date.

datepicker.setMode('date');
datepicker.setMode('start_date');

Method: toggleMode()

datepicker.toggleMode();

Method: getMode()

console.log(datepicker.getMode());

Method: setDisabled(bool)

datepicker.setDisabled(true);

Method: setDate(obj)

datepicker.setDate({
    year: 2017,
    // jquery.datepicker accepts first month as 1
    // (built-in Date() class accepts first month as 0)
    month: date.getMonth()+1,
    day: 21
});

Method: setStartDate(obj)

Same of setDate().

Method: getDate()

console.log(datepicker.getDate());

Output is like to:

{
  "details": {
    "year": 2017,
    "month": 1,
    "day": 21,
    "dayofweek": 6
  },
  "date": "2017-01-20T21:00:00.000Z", /* Date() Object */
  "start_date": {
    "details": {
      "year": 2017,
      "month": 1,
      "day": 4
    },
    "date": "2017-01-03T21:00:00.000Z" /* Date() Object */
  }
}

If there is no start_date it comes as start_date: false or this method returns false if date is not selected.

Method: getStartDate()

console.log(datepicker.getStartDate());

Output is like to:

{
  "details": {
    "year": 2017,
    "month": 1,
    "day": 4
  },
  "date": "2017-01-03T21:00:00.000Z" /* Date() Object */
}

You can use this when start_date is selected but date is not selected. It returns false if start_date is not selected.

Method: isDateSelected()

console.log(datepicker.isDateSelected());

Method: isStartDateSelected()

Same of isDateSelected().

Method: clearDate()

datepicker.clearDate()

Method: clearStartDate()

Same of clearDate()

Attributes

Attribute: is_disabled

console.log(datepicker.is_disabled);

I18N

jQueryDatepicker.day_names_short = {
    1: 'Mon',
    2: 'Tue',
    3: 'Wed',
    4: 'Thu',
    5: 'Fri',
    6: 'Sat',
    7: 'Sun'
};

jQueryDatepicker.day_names = {
    1: 'Monday',
    2: 'Tuesday',
    3: 'Wednesday',
    4: 'Thursday',
    5: 'Friday',
    6: 'Saturday',
    7: 'Sunday'
};

jQueryDatepicker.month_names = {
    1: 'January',
    2: 'February',
    3: 'March',
    4: 'April',
    5: 'May',
    6: 'June',
    7: 'July',
    8: 'Agust',
    9: 'September',
    10: 'October',
    11: 'November',
    12: 'December'
};
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.