### Usage

Initialize with `$.fn.runspa` method.

```html
<input data-toggle="runspa">
<textarea data-toggle="runspa"></textarea>
<div data-toggle="runspa"></div>
```

```js
$('[data-toggle="runspa"]').runspa();
```


[? back to top](#table-of-contents)



## Options

You may set runspa options with `$().runspa(options)`.
If you want to change the global default options, You may use `$.fn.runspa.setDefaults(options)`.


### autoShow

- Type: `Boolean`
- Default: `false`

Show the runspa automatically when initialized.


### autoHide

- Type: `Boolean`
- Default: `false`

Hide the runspa automatically when picked.


### autoPick

- Type: `Boolean`
- Default: `false`

Pick the initial date automatically when initialized.


### inline

- Type: `Boolean`
- Default: `false`

Enable inline mode.

If the element is not an input element, will append the runspa to the element.
If the `container` option is set, will append the runspa to the container.


### container

- Type: `Element` or `String`(selector)
- Default: `null`

A element for putting the runspa. If not set, the runspa will be appended to `document.body` by default.

> Only works when the `inline` option set to `true`.


### trigger

- Type: `Element` or `String`(selector)
- Default: `null`

A element for triggering the runspa.


### language

- Type: `String`
- Default: `''`

The ISO language code. If not set, will use the built-in language (en-US) by default.

```js
$().runspa({
  language: 'en-GB'
});
```


### format

- Type: `String`
- Default: `'mm/dd/yyyy'`
- Available date placeholders:
  - Year: `yyyy`, `yy`
  - Month: `mm`, `m`
  - Day: `dd`, `d`

The date string format.

```js
$().runspa({
  format: 'yyyy-mm-dd'
});
```


### date

- Type: `Date` or `String`
- Default: `null`

The initial date. If not set, will use the current date by default.

```js
$().runspa({
  date: new Date(2014, 1, 14) // Or '02/14/2014'
});
```


### startDate

- Type: `Date` or `String`
- Default: `null`

The start view date. All the dates before this date will be disabled.


### endDate

- Type: `Date` or `String`
- Default: `null`

The end view date. All the dates after this date will be disabled.


### startView

- Type: `Number`
- Default: `0`
- Options:
  - `0`: days
  - `1`: months
  - `2`: years

The start view when initialized.


### weekStart

- Type: `Number`
- Default: `0`
- Options:
  - `0`: Sunday
  - `1`: Monday
  - `2`: Tuesday
  - `3`: Wednesday
  - `4`: Thursday
  - `5`: Friday
  - `6`: Saturday

The start day of the week.


### yearFirst

- Type: `Boolean`
- Default: `false`

Show year before month on the runspa header


### yearSuffix

- Type: `String`
- Default: `''`

A string suffix to the year number.

```js
$().runspa({
  yearSuffix: '?'
});
```

### days

- Type: `Array`
- Default: `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`

Days' name of the week.


### daysShort

- Type: `Array`
- Default: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`

Shorter days' name.


### daysMin

- Type: `Array`
- Default: `['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']`

Shortest days' name.


### months

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

Months' name.


### monthsShort

- Type: `Array`
- Default: `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`

Shorter months' name.


### itemTag

- Type: `String`
- Default: `'li'`

A element tag for each item of years, months and days.


### mutedClass

- Type: `String`
- Default: `'muted'`

A class (CSS) for muted item.


### pickedClass

- Type: `String`
- Default: `'picked'`

A class (CSS) for picked item.


### disabledClass

- Type: `String`
- Default: `'disabled'`

A class (CSS) for disabled item.


### highlightedClass

- Type: `String`
- Default: `'highlighted'`

A class (CSS) for highlight date item.


### template

- Type: `String`
- Default:

```html
<div class="runspa-container">
  <div class="runspa-panel" data-view="years picker">
    <ul>
      <li data-view="years prev">&lsaquo;</li>
      <li data-view="years current"></li>
      <li data-view="years next">&rsaquo;</li>
    </ul>
    <ul data-view="years"></ul>
  </div>
  <div class="runspa-panel" data-view="months picker">
    <ul>
      <li data-view="year prev">&lsaquo;</li>
      <li data-view="year current"></li>
      <li data-view="year next">&rsaquo;</li>
    </ul>
    <ul data-view="months"></ul>
  </div>
  <div class="runspa-panel" data-view="days picker">
    <ul>
      <li data-view="month prev">&lsaquo;</li>
      <li data-view="month current"></li>
      <li data-view="month next">&rsaquo;</li>
    </ul>
    <ul data-view="week"></ul>
    <ul data-view="days"></ul>
  </div>
</div>
```

The template of the runspa.

**Note:** All the `data-view` attributes must be set when you customize it.


### offset

- Type: `Number`
- Default: `10`

The offset top or bottom of the runspa from the element.


### zIndex

- Type: `Number`
- Default: `1`

The CSS `z-index` style for the runspa.


### filter

- Type: `Function`
- Default: `null`

Filter each date item. If return a `false` value, the related date will be disabled.

```js
var now = Date.now();

$().runspa({
  filter: function(date) {
    if (date.getDay() === 0) {
      return false; // Disable all Sundays
    }
  }
});
```


### show

- Type: `Function`
- Default: `null`

A shortcut of the "show.runspa" event.


### hide

- Type: `Function`
- Default: `null`

A shortcut of the "hide.runspa" event.


### pick

- Type: `Function`
- Default: `null`

A shortcut of the "pick.runspa" event.


[? back to top](#table-of-contents)



## Methods

Common usage:

```js
$().runspa('method', argument1, , argument2, ..., argumentN);
```


### show()

Show the runspa.


### hide()

Hide the runspa.


### update()

Update the runspa with the value or text of the current element.


### pick()

Pick the current date to the element.


### reset()

Reset the runspa.


### getMonthName([month[, short]])

- **month** (optional):
  - Type: `Number`
  - Default: the month of the current date

- **short** (optional):
  - Type: `Boolean`
  - Default: `false`
  - Get the shorter month name

- (return value):
  - Type: `String`

Get the month name with given argument or the current date.

```js
$().runspa('getMonthName'); // 'January'
$().runspa('getMonthName', true); // 'Jan'
$().runspa('getMonthName', 11); // 'December'
$().runspa('getMonthName', 11, true); // 'Dec'
```


### getDayName([day[, short[, min]])

- **day** (optional):
  - Type: `Number`
  - Default: the day of the current date

- **short** (optional):
  - Type: `Boolean`
  - Default: `false`
  - Get the shorter day name

- **min** (optional):
  - Type: `Boolean`
  - Default: `false`
  - Get the shortest day name

- (return value):
  - Type: `String`

Get the day name with given argument or the current date.

```js
$().runspa('getDayName'); // 'Sunday'
$().runspa('getDayName', true); // 'Sun'
$().runspa('getDayName', true, true); // 'Su'
$().runspa('getDayName', 6); // 'Saturday'
$().runspa('getDayName', 6, true); // 'Sat'
$().runspa('getDayName', 6, true, true); // 'Sa'
```


### getDate([formatted])

- **formatted** (optional):
  - Type: `Boolean`
  - Default: `false`
  - Get a formatted date string

- (return value):
  - Type: `Date` or `String`

Get the current date.

```js
$().runspa('getDate'); // date object
$().runspa('getDate', true); // '02/14/2014'
```


### setDate(date)

- **date**:
  - Type: `Date` or `String`

Set the current date with a new date.

```js
$().runspa('setDate', new Date(2014, 1, 14));
$().runspa('setDate', '02/14/2014');
```


### setStartDate(date)

- **date**:
  - Type: `Date` or `String`

Set the start view date with a new date.


### setEndDate(date)

- **date**:
  - Type: `Date` or `String`

Set the end view date with a new date.


### parseDate(date)

- **date**:
  - Type: `String`

Parse a date string with the set date format.

```js
$().runspa('parseDate', '02/14/2014'); // date object
```


### formatDate(date)

- **date**:
  - Type: `Date`

Format a date object to a string with the set date format.

```js
$().runspa('formatDate', new Date(2014, 1, 14)); // '02/14/2014'
```


### destroy()

Destroy the runspa and remove the instance from the target element.


[? back to top](#table-of-contents)



## Events

### show.runspa

This event fires when starts to show the runspa.


### hide.runspa

This event fires when starts to hide the runspa.


### pick.runspa

- **event.date**:
  - Type: `Date`
  - The current date

- **event.view**:
  - Type: `String`
  - Default: `''`
  - Options: `'year'`, `'month'`, `'day'`
  - The current visible view

This event fires when start to pick a year, month or day.

```js
$().on('pick.runspa', function (e) {
  if (e.date < new Date()) {
    e.preventDefault(); // Prevent to pick the date
  }
});
```


[? back to top](#table-of-contents)



## I18n

### Config

```js
// runspa.zh-CN.js
$.fn.runspa.languages['zh-CN'] = {
  format: 'yyyy?mm?dd?',
  days: ['???', '???', '???', '???', '???', '???', '???'],
  daysShort: ['??', '??', '??', '??', '??', '??', '??'],
  daysMin: ['?', '?', '?', '?', '?', '?', '?'],
  months: ['??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '???', '???'],
  monthsShort: ['1?', '2?', '3?', '4?', '5?', '6?', '7?', '8?', '9?', '10?', '11?', '12?'],
  weekStart: 1,
  startView: 0,
  yearFirst: true,
  yearSuffix: '?'
};
```

### Usage

```html
<script src="/path/to/runspa.js"></script>
<script src="/path/to/runspa.zh-CN.js"></script>
<script>
  $().runspa({
    language: 'zh-CN'
  });
</script>
```


[? back to top](#table-of-contents)



## No conflict

If you have to use other plugin with the same namespace, just call the `$.fn.runspa.noConflict` method to revert to it.

```html
<script src="other-plugin.js"></script>
<script src="runspa.js"></script>
<script>
  $.fn.runspa.noConflict();
  // Code that uses other plugin's "$().runspa" can follow here.
</script>
```



## Browser support

- Chrome (latest 2)
- Firefox (latest 2)
- Internet Explorer 8+
- Edge (latest 2)
- Opera (latest 2)
- Safari (latest 2)

As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/).



## Versioning

Maintained under the [Semantic Versioning guidelines](http://semver.org/).