{"id":24492883,"url":"https://github.com/talkhabi/vue-persian-datetime-picker","last_synced_at":"2025-05-16T07:04:45.089Z","repository":{"id":44382169,"uuid":"112924728","full_name":"talkhabi/vue-persian-datetime-picker","owner":"talkhabi","description":"A vue plugin to select jalali date and time","archived":false,"fork":false,"pushed_at":"2022-03-04T09:46:47.000Z","size":8275,"stargazers_count":592,"open_issues_count":33,"forks_count":80,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-06T09:09:01.403Z","etag":null,"topics":["datepicker","jalali","persian","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://talkhabi.github.io/vue-persian-datetime-picker/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/talkhabi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-03T12:08:46.000Z","updated_at":"2025-04-23T17:59:31.000Z","dependencies_parsed_at":"2022-07-14T12:50:00.704Z","dependency_job_id":null,"html_url":"https://github.com/talkhabi/vue-persian-datetime-picker","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talkhabi%2Fvue-persian-datetime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talkhabi%2Fvue-persian-datetime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talkhabi%2Fvue-persian-datetime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talkhabi%2Fvue-persian-datetime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/talkhabi","download_url":"https://codeload.github.com/talkhabi/vue-persian-datetime-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485055,"owners_count":22078767,"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","jalali","persian","vue-components","vuejs"],"created_at":"2025-01-21T19:17:43.368Z","updated_at":"2025-05-16T07:04:40.079Z","avatar_url":"https://github.com/talkhabi.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# vue-persian-datetime-picker\n\n[![npm version](https://badge.fury.io/js/vue-persian-datetime-picker.svg)](https://www.npmjs.com/package/vue-persian-datetime-picker)\n\n\u003e A vue plugin to select jalali date and time\n\nSee documentation and demo at [vue-persian-datetime-picker](https://talkhabi.github.io/vue-persian-datetime-picker)\n\nIf you are using vuejs 3, please refer to [this repository](https://github.com/talkhabi/vue3-persian-datetime-picker).\n\n\n## Installation\n### browser\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/moment\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/moment-jalaali@0.9.2/build/moment-jalaali.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/dist/vue-persian-datetime-picker.umd.min.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cdate-picker v-model=\"date\"\u003e\u003c/date-picker\u003e\n\u003c/div\u003e\n\u003cscript\u003e\nvar app = new Vue({\n  el: '#app',\n  data: {\n    date: '1397/02/02'\n  },\n  components: {\n    DatePicker: VuePersianDatetimePicker\n  }\n});\n\u003c/script\u003e\n```\n\n### npm\n```bash\nnpm install vue-persian-datetime-picker --save\n```\n\nConfiguration for moment to ignore loading locales\n```javascript\n// webpack.config.js:\nmodule.exports.plugins = [\n  //...\n  new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)\n  //...\n]\n\n// vue.config.js:\nmodule.exports = {\n  //..\n  configureWebpack: {\n    plugins: [new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)]\n  },\n  //...\n}\n```\n\n### Usage\n```javascript\n// main.js\n//...\nimport VuePersianDatetimePicker from 'vue-persian-datetime-picker';\nVue.component('date-picker', VuePersianDatetimePicker);\n//...\n```\nOr in component\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdate-picker v-model=\"date\"\u003e\u003c/date-picker\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n \n\u003cscript\u003e\nimport VuePersianDatetimePicker from 'vue-persian-datetime-picker'\nexport default {\n  data(){\n    return {\n      date: ''\n    }\n  },\n  components: {\n    datePicker: VuePersianDatetimePicker\n  }\n}\n\u003c/script\u003e\n```\n\n\n## You can also set default values: \n```javascript\n// main.js\nimport VuePersianDatetimePicker from 'vue-persian-datetime-picker';\nVue.use(VuePersianDatetimePicker, {\n  name: 'custom-date-picker',\n  props: {\n    inputFormat: 'YYYY-MM-DD HH:mm',\n    format: 'jYYYY-jMM-jDD HH:mm',\n    editable: false,\n    inputClass: 'form-control my-custom-class-name',\n    placeholder: 'Please select a date',\n    altFormat: 'YYYY-MM-DD HH:mm',\n    color: '#00acc1',\n    autoSubmit: false,\n    //...  \n    //... And whatever you want to set as default \n    //... \n  }\n});\n```\nThen use in component\n```html\n\u003ccustom-date-picker v-model=\"date\" /\u003e\n```\n\n### [Click to see full documentation and demo](https://talkhabi.github.io/vue-persian-datetime-picker)\n\n## Built With\n* [Vue.js](https://vuejs.org/) - The Progressive JavaScript Framework.\n* [Moment.js](https://momentjs.com/) - Parse, validate, manipulate, and display dates and times in JavaScript.\n* [moment-jalaali](https://github.com/jalaali/moment-jalaali) - A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.\n\n\n## License\n\nThis project is licensed under the MIT License\n\n\n## Change log\n\n### 2.10.4 (2022-03-04)\n * Fixed [change the time with keyboard in popover mode](https://github.com/talkhabi/vue-persian-datetime-picker/issues/214)\n * Fixed popover configuration\n\n### 2.10.3 (2022-01-06)\n * Fixed [popover position in rtl pages](https://github.com/talkhabi/vue-persian-datetime-picker/issues/204)\n * Fixed [keep the selected day in simple mode](https://github.com/talkhabi/vue-persian-datetime-picker/issues/207)\n\n### 2.10.2 (2021-12-24)\n * Fixed [popover mode when using custom input](https://github.com/talkhabi/vue-persian-datetime-picker/issues/200)\n * Fixed [change jump-minute by muse wheel](https://github.com/talkhabi/vue-persian-datetime-picker/issues/198)\n\n### 2.10.1 (2021-11-12)\n * Fixed build problem #191 #190 #188\n\n### 2.10.0 (2021-11-03)\n * Feat: Added support for display format when using [`custom-input`](https://talkhabi.github.io/vue-persian-datetime-picker/guide/custom-input.html)\n\n### 2.9.1 (2021-10-31)\n * Fixed: [Using jumpMinute and roundMinute together](https://github.com/talkhabi/vue-persian-datetime-picker/issues/182)\n\n### 2.9.0 (2021-09-27)\n * Feat: [Added simple-mode](https://talkhabi.github.io/vue-persian-datetime-picker/guide/simple-mode.html)\n * Feat: [Added `input-attrs`](https://github.com/talkhabi/vue-persian-datetime-picker/issues/170)\n * Feat: [Added `@next-month` and `@prev-month` events](https://github.com/talkhabi/vue-persian-datetime-picker/issues/176)\n * Feat: Added `@year-change` and `@month-change` events\n * Fixed: [Mouse wheel in Firefox](https://github.com/talkhabi/vue-persian-datetime-picker/issues/174)\n * Fixed: Prevent selected dates from being reset\n\n### 2.8.0 (2021-08-01)\n * Feat: [Added ability to control route in show/close action](https://talkhabi.github.io/vue-persian-datetime-picker/guide/use-router.html)\n * Fixed Date change animation and transition\n\n### 2.7.0 (2021-07-23)\n * Fixed [moment.parseZone](https://github.com/talkhabi/vue-persian-datetime-picker/issues/156)\n * Fixed Unwanted change of date when using `auto-submit` and `multiple` together\n * Feat: [Added slots for next-month and prev-month button](https://github.com/talkhabi/vue-persian-datetime-picker/issues/147)\n * Feat: [Ability to change the time using the keyboard](https://github.com/talkhabi/vue-persian-datetime-picker/issues/159)\n\n### 2.6.1 (2021-05-17)\n * Fixed [year-month](https://github.com/talkhabi/vue-persian-datetime-picker/issues/150)\n\n### 2.6.0 (2021-02-05)\n * Added [multiple selection](https://talkhabi.github.io/vue-persian-datetime-picker/guide/multiple.html) (for type `date` only)\n * Added [popover mode](https://talkhabi.github.io/vue-persian-datetime-picker/guide/popover.html)\n * Close picker with `escape` key, fixes [#141](https://github.com/talkhabi/vue-persian-datetime-picker/issues/141)\n \n### 2.5.0 (2021-01-30)\n * Added [range option](https://talkhabi.github.io/vue-persian-datetime-picker/guide/range.html) (for type `date` only)\n * Fixed [#136](https://github.com/talkhabi/vue-persian-datetime-picker/issues/136)\n\n### 2.4.1 (2020-11-13)\n * Fixed [#131](https://github.com/talkhabi/vue-persian-datetime-picker/issues/131)\n * Fixed [#128](https://github.com/talkhabi/vue-persian-datetime-picker/issues/128)\n\n### 2.4.0 (2020-10-17)\n * Added `compat-time` to display time on the front page (in datetime mode)\n * Fixed clear value [#125](https://github.com/talkhabi/vue-persian-datetime-picker/issues/125)\n * Fixed disabling in datetime mode [#123](https://github.com/talkhabi/vue-persian-datetime-picker/issues/123)\n * Fixed timezone in the first and second half of the year [#108](https://github.com/talkhabi/vue-persian-datetime-picker/issues/108)\n\n### 2.3.0 (2020-08-30)\n * Added [`convert-numbers`](https://github.com/talkhabi/vue-persian-datetime-picker/pull/117) prop that converts numbers to persian in fa locale: `\u003cdate-picker convert-numbers /\u003e`\n\n### 2.2.0 (2020-08-02)\n * [Custom localization](https://talkhabi.github.io/vue-persian-datetime-picker/guide/localization.html) is now supported\n * Added some [slots](https://talkhabi.github.io/vue-persian-datetime-picker/guide/slots.html)\n\n### 2.1.6 (2020-07-13)\n * Fixed `locale-config` prop [#116](https://github.com/talkhabi/vue-persian-datetime-picker/issues/116)\n * Added `show-now-btn` prop [#109](https://github.com/talkhabi/vue-persian-datetime-picker/issues/109)\n\n### 2.1.5 (2020-04-19)\n * Fixed wrong date in Safari browsers\n * Fixed scroll to element (year section)\n\n### 2.1.4 (2020-01-30)\n * Fixed initial locale value\n\n### 2.1.2 (2019-09-08)\n * Fixed jumpMinute and roundMinute in datetime mode\n * Fixed time animation effect\n\n### 2.1.1 (2019-09-07)\n * Fixed JumpMinute and hour change\n\n### 2.1.0 (2019-08-19)\n * Added \"year-month\" type `\u003cdate-picker type=\"year-month\" /\u003e`. fixed [#70](https://github.com/talkhabi/vue-persian-datetime-picker/issues/70)\n * Timezone support `\u003cdate-picker type=\"datetime\" :timezone=\"true\" /\u003e`. fixed [#33](https://github.com/talkhabi/vue-persian-datetime-picker/issues/33)\n\n### 2.0.2 (2019-07-17)\n * Flipped month change buttons in rtl direction\n * Added label to locales. fixed [#67](https://github.com/talkhabi/vue-persian-datetime-picker/issues/67)\n * Added display format to each locale. fixed [#68](https://github.com/talkhabi/vue-persian-datetime-picker/issues/68)\n * Fixed wrong date on date-time picker mode \n \n### 2.0.1 (2019-05-11)\n\n * Fixed [#53](https://github.com/talkhabi/vue-persian-datetime-picker/issues/53)\n * Show the next step on submit button click, instead of submitting immediately [#41](https://github.com/talkhabi/vue-persian-datetime-picker/issues/41)\n\n### 2.0.0 (2019-01-16)\n\n * Added gregorian support `\u003cdate-picker locale=\"en\" /\u003e`\n * Added locale configuration support \n * Improved css transitions\n * Fixed min-max in time picker\n\n### 1.1.7 (2018-12-31)\n\n * Fixed [critical error](https://github.com/talkhabi/vue-persian-datetime-picker/issues/39)\n\n### 1.1.6 (2018-12-29)\n\n * Added jumpMinute and roundMinute to time-picker `\u003cdate-picker type=\"time\" :jumpMinute=\"5\" :roundMinute=\"true\" /\u003e`\n * Added clear button `\u003cdate-picker :clearable=\"true\" /\u003e`\n * Added inline mode `\u003cdate-picker :inline=\"true\" /\u003e`\n * Fixed `tab` key press problem\n * Fixed responsive mode\n * Fixed watching to `min-max` changes\n \n### 1.1.5 (2018-09-01)\n\n * Added emit on open \n * Added feature to highlight items and dates\n\n### 1.1.4 (2018-08-12)\n\n * Added label for display\n * Added feature to disable some dates\n * Added feature to disable or enable the datepicker\n * Icons and css styles optimization\n * Load component via script tag\n\n\n### 1.1.3 (2018-05-22)\n\n * Fixed \"min-date\" bug\n\n### 1.1.2 (2018-05-12)\n\n * Updated \"moment-jalaali\" version to 0.7.3\n * Fixed \"display-format\" when is editable\n * Reset \"view\" value\n\n### 1.1.1 (2018-05-03)\n\n  * Added \"append-to\"\n  * Added \"display format\"\n\n### 1.1.0 (2018-05-01)\n\n  * Added default settings feature\n  \n\n### 1.0.9 (2017-12-25)\n\n  * Clear input value\n  * Fixed editable input bug\n  * Added \"Initial value\"\n  * Package keywords\n  * Fixed css class name\n  * Fixed some other bugs\n\n### 1.0.7 (2017-12-14)\n\n  * Avoid submitting form\n  * Auto submit on wrapper click\n\n### 1.0.5 (2017-12-04)\n\n  * Fixed default value for \"value\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalkhabi%2Fvue-persian-datetime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalkhabi%2Fvue-persian-datetime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalkhabi%2Fvue-persian-datetime-picker/lists"}