{"id":15108916,"url":"https://github.com/fengyuanchen/datepicker","last_synced_at":"2025-09-27T10:30:46.236Z","repository":{"id":14018919,"uuid":"16720728","full_name":"fengyuanchen/datepicker","owner":"fengyuanchen","description":"⚠️ [Deprecated] No longer maintained. A simple jQuery datepicker plugin.","archived":true,"fork":false,"pushed_at":"2022-03-20T19:23:49.000Z","size":1495,"stargazers_count":1166,"open_issues_count":32,"forks_count":538,"subscribers_count":44,"default_branch":"master","last_synced_at":"2024-10-29T20:58:13.403Z","etag":null,"topics":["datepicker","javascript","jquery-datepicker-plugin","jquery-plugin"],"latest_commit_sha":null,"homepage":"https://fengyuanchen.github.io/datepicker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fengyuanchen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-11T05:37:29.000Z","updated_at":"2024-10-27T21:24:22.000Z","dependencies_parsed_at":"2022-08-07T07:16:09.398Z","dependency_job_id":null,"html_url":"https://github.com/fengyuanchen/datepicker","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fdatepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fdatepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fdatepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fdatepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fengyuanchen","download_url":"https://codeload.github.com/fengyuanchen/datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234426081,"owners_count":18830840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datepicker","javascript","jquery-datepicker-plugin","jquery-plugin"],"created_at":"2024-09-25T22:42:33.111Z","updated_at":"2025-09-27T10:30:40.667Z","avatar_url":"https://github.com/fengyuanchen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Datepicker\n\n[![Build Status](https://img.shields.io/travis/fengyuanchen/datepicker.svg)](https://travis-ci.org/fengyuanchen/datepicker) [![Downloads](https://img.shields.io/npm/dm/@chenfengyuan/datepicker.svg)](https://www.npmjs.com/package/@chenfengyuan/datepicker) [![Version](https://img.shields.io/npm/v/@chenfengyuan/datepicker.svg)](https://www.npmjs.com/package/@chenfengyuan/datepicker)\n\n\u003e A simple jQuery datepicker plugin.\n\n- [Website](https://fengyuanchen.github.io/datepicker)\n\n## Table of contents\n\n- [Features](#features)\n- [Main](#main)\n- [Getting started](#getting-started)\n- [Options](#options)\n- [Methods](#methods)\n- [Events](#events)\n- [I18n](#i18n)\n- [No conflict](#no-conflict)\n- [Browser support](#browser-support)\n- [Versioning](#versioning)\n- [License](#license)\n\n## Features\n\n- Supports [options](#options)\n- Supports [methods](#methods)\n- Supports [events](#events)\n- Supports inline mode\n- Supports touch (mobile)\n- Supports internationalization\n- Cross-browser support\n\n## Main\n\n```text\ndist/\n├── datepicker.css\n├── datepicker.min.css   (compressed)\n├── datepicker.js        (UMD)\n├── datepicker.min.js    (UMD, compressed)\n├── datepicker.common.js (CommonJS, default)\n└── datepicker.esm.js    (ES Module)\n```\n\n## Getting started\n\n### Install\n\n```shell\nnpm install @chenfengyuan/datepicker\n```\n\nInclude files:\n\n```html\n\u003cscript src=\"/path/to/jquery.js\"\u003e\u003c/script\u003e\u003c!-- jQuery is required --\u003e\n\u003clink  href=\"/path/to/datepicker.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"/path/to/datepicker.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\nInitialize with `$.fn.datepicker` method.\n\n```html\n\u003cinput data-toggle=\"datepicker\"\u003e\n\u003ctextarea data-toggle=\"datepicker\"\u003e\u003c/textarea\u003e\n\u003cdiv data-toggle=\"datepicker\"\u003e\u003c/div\u003e\n```\n\n```js\n$('[data-toggle=\"datepicker\"]').datepicker();\n```\n\n[⬆ back to top](#table-of-contents)\n\n## Options\n\nYou may set datepicker options with `$().datepicker(options)`.\nIf you want to change the global default options, You may use `$.fn.datepicker.setDefaults(options)`.\n\n### autoShow\n\n- Type: `Boolean`\n- Default: `false`\n\nShow the datepicker automatically when initialized.\n\n### autoHide\n\n- Type: `Boolean`\n- Default: `false`\n\nHide the datepicker automatically when picked.\n\n### autoPick\n\n- Type: `Boolean`\n- Default: `false`\n\nPick the initial date automatically when initialized.\n\n### inline\n\n- Type: `Boolean`\n- Default: `false`\n\nEnable inline mode.\n\nIf the element is not an input element, will append the datepicker to the element.\nIf the `container` option is set, will append the datepicker to the container.\n\n### container\n\n- Type: `Element` or `String`(selector)\n- Default: `null`\n\nA element for putting the datepicker. If not set, the datepicker will be appended to `document.body` by default.\n\n\u003e Only works when the `inline` option set to `true`.\n\n### trigger\n\n- Type: `Element` or `String`(selector)\n- Default: `null`\n\nA element for triggering the datepicker.\n\n### language\n\n- Type: `String`\n- Default: `''`\n\nThe ISO language code. If not set, will use the built-in language (`en-US`) by default.\n\n\u003e You should define the language first. View the [I18n](#i18n) section for more information or check out the [`i18n`](i18n) folder for available languages.\n\n```js\n$().datepicker({\n  language: 'en-GB'\n});\n```\n\n### format\n\n- Type: `String`\n- Default: `'mm/dd/yyyy'`\n- Available date placeholders:\n  - Year: `yyyy`, `yy`\n  - Month: `mm`, `m`\n  - Day: `dd`, `d`\n\nThe date string format.\n\n```js\n$().datepicker({\n  format: 'yyyy-mm-dd'\n});\n```\n\n### date\n\n- Type: `Date` or `String`\n- Default: `null`\n\nThe initial date. If not set, will use the current date by default.\n\n```js\n$().datepicker({\n  date: new Date(2014, 1, 14) // Or '02/14/2014'\n});\n```\n\n### startDate\n\n- Type: `Date` or `String`\n- Default: `null`\n\nThe start view date. All the dates before this date will be disabled.\n\n### endDate\n\n- Type: `Date` or `String`\n- Default: `null`\n\nThe end view date. All the dates after this date will be disabled.\n\n### startView\n\n- Type: `Number`\n- Default: `0`\n- Options:\n  - `0`: days\n  - `1`: months\n  - `2`: years\n\nThe start view when initialized.\n\n### weekStart\n\n- Type: `Number`\n- Default: `0`\n- Options:\n  - `0`: Sunday\n  - `1`: Monday\n  - `2`: Tuesday\n  - `3`: Wednesday\n  - `4`: Thursday\n  - `5`: Friday\n  - `6`: Saturday\n\nThe start day of the week.\n\n### yearFirst\n\n- Type: `Boolean`\n- Default: `false`\n\nShow year before month on the datepicker header\n\n### yearSuffix\n\n- Type: `String`\n- Default: `''`\n\nA string suffix to the year number.\n\n```js\n$().datepicker({\n  yearSuffix: '年'\n});\n```\n\n### days\n\n- Type: `Array`\n- Default: `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`\n\nDays' name of the week.\n\n### daysShort\n\n- Type: `Array`\n- Default: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`\n\nShorter days' name.\n\n### daysMin\n\n- Type: `Array`\n- Default: `['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']`\n\nShortest days' name.\n\n### months\n\n- Type: `Array`\n- Default: `['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`\n\nMonths' name.\n\n### monthsShort\n\n- Type: `Array`\n- Default: `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`\n\nShorter months' name.\n\n### itemTag\n\n- Type: `String`\n- Default: `'li'`\n\nA element tag for each item of years, months and days.\n\n### mutedClass\n\n- Type: `String`\n- Default: `'muted'`\n\nA class (CSS) for muted item.\n\n### pickedClass\n\n- Type: `String`\n- Default: `'picked'`\n\nA class (CSS) for picked item.\n\n### disabledClass\n\n- Type: `String`\n- Default: `'disabled'`\n\nA class (CSS) for disabled item.\n\n### highlightedClass\n\n- Type: `String`\n- Default: `'highlighted'`\n\nA class (CSS) for highlight date item.\n\n### template\n\n- Type: `String`\n- Default:\n\n```html\n\u003cdiv class=\"datepicker-container\"\u003e\n  \u003cdiv class=\"datepicker-panel\" data-view=\"years picker\"\u003e\n    \u003cul\u003e\n      \u003cli data-view=\"years prev\"\u003e\u0026lsaquo;\u003c/li\u003e\n      \u003cli data-view=\"years current\"\u003e\u003c/li\u003e\n      \u003cli data-view=\"years next\"\u003e\u0026rsaquo;\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cul data-view=\"years\"\u003e\u003c/ul\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"datepicker-panel\" data-view=\"months picker\"\u003e\n    \u003cul\u003e\n      \u003cli data-view=\"year prev\"\u003e\u0026lsaquo;\u003c/li\u003e\n      \u003cli data-view=\"year current\"\u003e\u003c/li\u003e\n      \u003cli data-view=\"year next\"\u003e\u0026rsaquo;\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cul data-view=\"months\"\u003e\u003c/ul\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"datepicker-panel\" data-view=\"days picker\"\u003e\n    \u003cul\u003e\n      \u003cli data-view=\"month prev\"\u003e\u0026lsaquo;\u003c/li\u003e\n      \u003cli data-view=\"month current\"\u003e\u003c/li\u003e\n      \u003cli data-view=\"month next\"\u003e\u0026rsaquo;\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cul data-view=\"week\"\u003e\u003c/ul\u003e\n    \u003cul data-view=\"days\"\u003e\u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe template of the datepicker.\n\n**Note:** All the `data-view` attributes must be set when you customize it.\n\n### offset\n\n- Type: `Number`\n- Default: `10`\n\nThe offset top or bottom of the datepicker from the element.\n\n### zIndex\n\n- Type: `Number`\n- Default: `1`\n\nThe CSS `z-index` style for the datepicker.\n\n### filter\n\n- Type: `Function`\n- Default: `null`\n- Syntax: `filter(date, view)`\n  - `date`: the date for checking.\n  - `view`: the the current view, one of `day`, `month` or `year`.\n\nFilter each date item. If return a `false` value, the related date will be disabled.\n\n```js\nvar now = Date.now();\n\n$().datepicker({\n  filter: function(date, view) {\n    if (date.getDay() === 0 \u0026\u0026 view === 'day') {\n      return false; // Disable all Sundays, but still leave months/years, whose first day is a Sunday, enabled.\n    }\n  }\n});\n```\n\n### show\n\n- Type: `Function`\n- Default: `null`\n\nA shortcut of the \"show.datepicker\" event.\n\n### hide\n\n- Type: `Function`\n- Default: `null`\n\nA shortcut of the \"hide.datepicker\" event.\n\n### pick\n\n- Type: `Function`\n- Default: `null`\n\nA shortcut of the \"pick.datepicker\" event.\n\n[⬆ back to top](#table-of-contents)\n\n## Methods\n\nCommon usage:\n\n```js\n$().datepicker('method', argument1, , argument2, ..., argumentN);\n```\n\n### show()\n\nShow the datepicker.\n\n### hide()\n\nHide the datepicker.\n\n### update()\n\nUpdate the datepicker with the value or text of the current element.\n\n### pick()\n\nPick the current date to the element.\n\n### reset()\n\nReset the datepicker.\n\n### getMonthName([month[, short]])\n\n- **month** (optional):\n  - Type: `Number`\n  - Default: the month of the current date\n\n- **short** (optional):\n  - Type: `Boolean`\n  - Default: `false`\n  - Get the shorter month name\n\n- (return value):\n  - Type: `String`\n\nGet the month name with given argument or the current date.\n\n```js\n$().datepicker('getMonthName'); // 'January'\n$().datepicker('getMonthName', true); // 'Jan'\n$().datepicker('getMonthName', 11); // 'December'\n$().datepicker('getMonthName', 11, true); // 'Dec'\n```\n\n### getDayName([day[, short[, min]])\n\n- **day** (optional):\n  - Type: `Number`\n  - Default: the day of the current date\n\n- **short** (optional):\n  - Type: `Boolean`\n  - Default: `false`\n  - Get the shorter day name\n\n- **min** (optional):\n  - Type: `Boolean`\n  - Default: `false`\n  - Get the shortest day name\n\n- (return value):\n  - Type: `String`\n\nGet the day name with given argument or the current date.\n\n```js\n$().datepicker('getDayName'); // 'Sunday'\n$().datepicker('getDayName', true); // 'Sun'\n$().datepicker('getDayName', true, true); // 'Su'\n$().datepicker('getDayName', 6); // 'Saturday'\n$().datepicker('getDayName', 6, true); // 'Sat'\n$().datepicker('getDayName', 6, true, true); // 'Sa'\n```\n\n### getDate([formatted])\n\n- **formatted** (optional):\n  - Type: `Boolean`\n  - Default: `false`\n  - Get a formatted date string\n\n- (return value):\n  - Type: `Date` or `String`\n\nGet the current date.\n\n```js\n$().datepicker('getDate'); // date object\n$().datepicker('getDate', true); // '02/14/2014'\n```\n\n### setDate(date)\n\n- **date**:\n  - Type: `Date` or `String`\n\nSet the current date with a new date.\n\n```js\n$().datepicker('setDate', new Date(2014, 1, 14));\n$().datepicker('setDate', '02/14/2014');\n```\n\n### setStartDate(date)\n\n- **date**:\n  - Type: `Date` or `String` or `null`\n\nSet the start view date with a new date.\n\n### setEndDate(date)\n\n- **date**:\n  - Type: `Date` or `String` or `null`\n\nSet the end view date with a new date.\n\n### parseDate(date)\n\n- **date**:\n  - Type: `String`\n\nParse a date string with the set date format.\n\n```js\n$().datepicker('parseDate', '02/14/2014'); // date object\n```\n\n### formatDate(date)\n\n- **date**:\n  - Type: `Date`\n\nFormat a date object to a string with the set date format.\n\n```js\n$().datepicker('formatDate', new Date(2014, 1, 14)); // '02/14/2014'\n```\n\n### destroy()\n\nDestroy the datepicker and remove the instance from the target element.\n\n[⬆ back to top](#table-of-contents)\n\n## Events\n\n### show.datepicker\n\nThis event fires when starts to show the datepicker.\n\n### hide.datepicker\n\nThis event fires when starts to hide the datepicker.\n\n### pick.datepicker\n\n- **event.date**:\n  - Type: `Date`\n  - The current date\n\n- **event.view**:\n  - Type: `String`\n  - Default: `''`\n  - Options: `'year'`, `'month'`, `'day'`\n  - The current visible view\n\nThis event fires when start to pick a year, month or day.\n\n```js\n$().on('pick.datepicker', function (e) {\n  if (e.date \u003c new Date()) {\n    e.preventDefault(); // Prevent to pick the date\n  }\n});\n```\n\n[⬆ back to top](#table-of-contents)\n\n## I18n\n\n```js\n// datepicker.zh-CN.js\n$.fn.datepicker.languages['zh-CN'] = {\n  format: 'yyyy年mm月dd日',\n  days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],\n  daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],\n  daysMin: ['日', '一', '二', '三', '四', '五', '六'],\n  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],\n  monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],\n  weekStart: 1,\n  startView: 0,\n  yearFirst: true,\n  yearSuffix: '年'\n};\n```\n\n```html\n\u003cscript src=\"/path/to/datepicker.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/datepicker.zh-CN.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  $().datepicker({\n    language: 'zh-CN'\n  });\n\u003c/script\u003e\n```\n\n[⬆ back to top](#table-of-contents)\n\n## No conflict\n\nIf you have to use other plugin with the same namespace, just call the `$.fn.datepicker.noConflict` method to revert to it.\n\n```html\n\u003cscript src=\"other-plugin.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"datepicker.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  $.fn.datepicker.noConflict();\n  // Code that uses other plugin's \"$().datepicker\" can follow here.\n\u003c/script\u003e\n```\n\n## Browser support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Opera (latest)\n- Edge (latest)\n- Internet Explorer 9+\n\n## Versioning\n\nMaintained under the [Semantic Versioning guidelines](https://semver.org/).\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)\n\n[⬆ back to top](#table-of-contents)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffengyuanchen%2Fdatepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffengyuanchen%2Fdatepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffengyuanchen%2Fdatepicker/lists"}