Skip to content
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'
};