{"id":13424013,"url":"https://github.com/Haixing-Hu/vue-datetime-picker","last_synced_at":"2025-03-15T17:32:42.921Z","repository":{"id":57395551,"uuid":"43632175","full_name":"Haixing-Hu/vue-datetime-picker","owner":"Haixing-Hu","description":"A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin.","archived":false,"fork":false,"pushed_at":"2018-12-05T14:01:15.000Z","size":535,"stargazers_count":338,"open_issues_count":14,"forks_count":77,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-05T15:06:45.832Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://haixing-hu.github.io/vue-datetime-picker/","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/Haixing-Hu.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2015-10-04T10:06:31.000Z","updated_at":"2025-01-18T12:27:00.000Z","dependencies_parsed_at":"2022-08-30T20:01:26.253Z","dependency_job_id":null,"html_url":"https://github.com/Haixing-Hu/vue-datetime-picker","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haixing-Hu%2Fvue-datetime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haixing-Hu%2Fvue-datetime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haixing-Hu%2Fvue-datetime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haixing-Hu%2Fvue-datetime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Haixing-Hu","download_url":"https://codeload.github.com/Haixing-Hu/vue-datetime-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243248964,"owners_count":20260765,"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":[],"created_at":"2024-07-31T00:00:46.732Z","updated_at":"2025-03-15T17:32:42.886Z","avatar_url":"https://github.com/Haixing-Hu.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# vue-datetime-picker\n\n[![Build Status](https://circleci.com/gh/Haixing-Hu/vue-datetime-picker/tree/master.svg?style=shield)](https://circleci.com/gh/Haixing-Hu/vue-datetime-picker/tree/master)\n[![Coverage Status](https://coveralls.io/repos/Haixing-Hu/vue-datetime-picker/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/Haixing-Hu/vue-datetime-picker?branch=master)\n[![bitHound Score](https://www.bithound.io/github/Haixing-Hu/vue-datetime-picker/badges/score.svg)](https://www.bithound.io/github/Haixing-Hu/vue-datetime-picker)\n[![Dependency Status](https://david-dm.org/Haixing-Hu/vue-datetime-picker.svg)](https://david-dm.org/Haixing-Hu/vue-datetime-picker)\n[![devDependency Status](https://david-dm.org/Haixing-Hu/vue-datetime-picker/dev-status.svg)](https://david-dm.org/Haixing-Hu/vue-datetime-picker#info=devDependencies)\n\nA Vue.js component implementing the datetime picker control using the [Eonasdan's bootstrap datetime picker plugin](https://github.com/Eonasdan/bootstrap-datetimepicker).\n\n# Demo\n\nThe demo page is [HERE](http://haixing-hu.github.io/vue-datetime-picker/demo.html).\n\n![Screenshot](screenshot.png)\n\n# Requirements\n\n- [Vue.js](https://github.com/yyx990803/vue) `^1.0.24`\n- [bootstrap](https://github.com/twbs/bootstrap) `^3.3.6`\n- [font-awesome](https://github.com/FortAwesome/Font-Awesome) `^4.2.0`\n- [moment](https://github.com/moment/moment/) `^2.9.0`\n- [moment-timezone](https://github.com/moment/moment-timezone/) `^0.4.0`\n- [Eonasdan's bootstrap datetime picker](https://github.com/Eonasdan/bootstrap-datetimepicker) `^4.17.37`\n- [vue-i18n-plugin](https://github.com/Haixing-Hu/vue-i18n) `^0.2.2` This is optional.\n\n# Installation\n\n## npm\n\n```shell\n$ npm install --save vue-datetime-picker\n```\n\n## bower\n\n```shell\n$ bower install vue-datetime-picker\n```\n\n# Usage\n\nThe HTML snippets are as follows:\n\n```html\n\u003cdiv class=\"form-horizontal\"\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"picker1\" class=\"col-sm-3 control-label\"\u003e\n      A default datetime picker:\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-5\"\u003e\n      \u003cvue-datetime-picker class=\"vue-picker1\" name=\"picker1\"\n                           :model.sync=\"result1\"\u003e\n      \u003c/vue-datetime-picker\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-sm-4\"\u003e\n      \u003cp class=\"form-control-static\"\u003e\n        Selected Datetime: \u003cspan class=\"vue-result1\"\u003e{{formatDatetime(result1)}}\u003c/span\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"picker2\" class=\"col-sm-3 control-label\"\u003e\n      A datetime picker with customized datetime format:\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-5\"\u003e\n      \u003cvue-datetime-picker class=\"vue-picker2\" name=\"picker2\"\n                           :model.sync=\"result2\"\n                           type=\"datetime\"\n                           language=\"en\"\n                           datetime-format=\"LLL\"\u003e\n      \u003c/vue-datetime-picker\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-sm-4\"\u003e\n      \u003cp class=\"form-control-static\"\u003e\n        Selected Datetime: \u003cspan class=\"vue-result2\"\u003e{{formatDatetime(result2)}}\u003c/span\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"picker3\" class=\"col-sm-3 control-label\"\u003e\n      A date picker with customized date format:\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-5\"\u003e\n      \u003cvue-datetime-picker class=\"vue-picker3\" name=\"picker3\"\n                           :model.sync=\"result3\"\n                           type=\"date\"\n                           language=\"en-US\"\n                           date-format=\"L\"\u003e\n      \u003c/vue-datetime-picker\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-sm-4\"\u003e\n      \u003cp class=\"form-control-static\"\u003e\n        Selected Date: \u003cspan class=\"vue-result3\"\u003e{{formatDate(result3)}}\u003c/span\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"picker4\" class=\"col-sm-3 control-label\"\u003e\n      A time picker with customized time format:\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-5\"\u003e\n      \u003cvue-datetime-picker class=\"vue-picker4\" name=\"picker4\"\n                           :model.sync=\"result4\"\n                           type=\"time\"\n                           language=\"zh-CN\"\n                           time-format=\"LT\"\u003e\n      \u003c/vue-datetime-picker\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-sm-4\"\u003e\n      \u003cp class=\"form-control-static\"\u003e\n        Selected Time: \u003cspan class=\"vue-result4\"\u003e{{formatTime(result4)}}\u003c/span\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003cp class=\"form-control-static col-sm-12\"\u003e\n      Demonstration of the range of datetime. Note how the minimum/maximum\n      selectable datetime of the start/end datetime picker was changed\n      according to the selection of another picker.\n    \u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"start-picker\" class=\"col-sm-3 control-label\"\u003e\n      Start Datetime:\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-3\"\u003e\n      \u003cvue-datetime-picker class=\"vue-start-picker\" name=\"start-picker\"\n                           v-ref:start-picker\n                           :model.sync=\"startDatetime\"\n                           :on-change=\"onStartDatetimeChanged\"\u003e\n      \u003c/vue-datetime-picker\u003e\n    \u003c/div\u003e\n    \u003clabel for=\"end-picker\" class=\"col-sm-3 control-label\"\u003e\n      End Datetime:\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-3\"\u003e\n      \u003cvue-datetime-picker class=\"vue-end-picker\" name=\"end-picker\"\n                           v-ref:end-picker\n                           :model.sync=\"endDatetime\"\n                           :on-change=\"onEndDatetimeChanged\"\u003e\n      \u003c/vue-datetime-picker\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe Javascript snippets are as follows:\n\n```javascript\nvar Vue = require(\"vue\");\n\nvar vm = new Vue({\n  el: \"#app\",\n  components: {\n    \"vue-datetime-picker\": require(\"vue-datetime-picker\")\n  },\n  data: {\n    result1: null,\n    result2: null,\n    result3: null,\n    startDatetime: moment(),\n    endDatetime: null\n  },\n  methods: {\n    formatDatetime: function(datetime) {\n      if (datetime === null) {\n        return \"[null]\";\n      } else {\n        return datetime.format(\"YYYY-MM-DD HH:mm:ss\");\n      }\n    },\n    formatDate: function(date) {\n      if (date === null) {\n        return \"[null]\";\n      } else {\n        return date.format(\"YYYY-MM-DD\");\n      }\n    },\n    formatTime: function(time) {\n      if (time === null) {\n        return \"[null]\";\n      } else {\n        return time.format(\"HH:mm:ss\");\n      }\n    },\n    onStartDatetimeChanged: function(newStart) {\n      var endPicker = this.$.endPicker.control;\n      endPicker.minDate(newStart);\n    },\n    onEndDatetimeChanged: function(newEnd) {\n      var startPicker = this.$.startPicker.control;\n      startPicker.maxDate(newEnd);\n    }\n  }\n});\n```\n\n# Component Properties\n\n## `model`\n\nThe model bind to the control, which must be a two way binding variable.\n\nNote that the value of the model must be either a `null` value, or a\n[moment](https://github.com/moment/moment/) object. If the model is set to\n`null`, the input box of the datetime picker control will set to empty,\nindicating no datetime was selected; also, if the input box of the datetime\npicker control is set to empty (that is, the user delete the text in the input\nbox of the datetime picker control), the value of the model will be set to\n`null` instead of an empty string; if the user does select a datetime, the\nvalue of the model will be set to the [moment](https://github.com/moment/moment/)\nobject representing the date, without any timezone information.\n\n## `type`\n\nThe optional type of the datetime picker control. Available values are\n\n- `\"datetime\"`: Indicating that the control is a datetime picker,\n- `\"date\"`: Indicating that the control is a date picker (without time picker),\n- `\"time\"`: Indicating that the control is a time picker (without date picker).\n\nThe default value of this property is `\"datetime\"`.\n\n## `language`\n\nThe optional code of language used by the [moment](https://github.com/moment/moment/)\nlibrary.\n\nIf it is not set, and the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)\nplugin is used, the component will use the language code `$language` provided\nby the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin; otherwise, the\ncomponent will use the default value `\"en-US\"`.\n\nThe supported languages are exactly the same as the supported languages of the\n[moment](https://github.com/moment/moment/) library. In order to use the\nsupported language, you must also include the corresponding i18n js file of\nthe [moment](https://github.com/moment/moment/) library in your HTML file.\nA convenient way is to include the `moment-with-locales.min.js`.\n\nNote that the language code passed to this property could be a locale code\nconsists of a language code and a country code, e.g., `\"en-US\"`. The component\nwill automatically convert the locale code to the language code supported by\nthe [moment](https://github.com/moment/moment/) library. Since some languages\nhave different variants in different country or region, e.g., `\"zh-CN\"` for the\nsimplified Chinese and `\"zh-TW\"` for the traditional Chinese, it's recommended\nto use the locale code in the form of `\"[language]-[country]\"`.\n\n## `datetimeFormat`\n\nThe optional format of the datetime this component should display, which\nmust be a valid datetime format of the [moment](https://github.com/moment/moment/)\nlibrary.\n\nThis property only works when the `type` property is set to `\"datetime\"`. Default\nvalue of this property is `\"YYYY-MM-DD HH:mm:ss\"`.\n\n## `dateFormat`\n\nThe optional format of the date this component should display, which\nmust be a valid date format of the [moment](https://github.com/moment/moment/)\nlibrary.\n\nThis property only works when the `type` property is set to `\"date\"`. Default\nvalue of this property is `\"YYYY-MM-DD\"`.\n\n## `timeFormat`\n\nThe optional format of the time this component should display, which\nmust be a valid time format of the [moment](https://github.com/moment/moment/)\nlibrary.\n\nThis property only works when the `type` property is set to `\"time\"`. Default\nvalue of this property is `\"HH:mm:ss\"`.\n\n## `name`\n\nThe optional name of the selection control.\n\n## `onChange`\n\nThe optional event handler triggered when the value of the datetime picker\nwas changed. If this parameter is presented and is not `null`, it must be a\nfunction which accept one argument: the new date time selected by the picker,\nwhich is a [moment](https://github.com/moment/moment/) object.\n\n# API\n\n## `control`\n\nThis property is a reference to the JQuery selection of datetime control. It\ncould be used to call the APIs of the\n[Eonasdan's bootstrap datetime picker](https://github.com/Eonasdan/bootstrap-datetimepicker).\nFor example, `picker.control.minDate(val)` will set the minimum allowed datetime\nof the picker to the specified value, where `picker` is the reference to the\n`vue-datetime-picker` component.\n\n# Localization\n\nThis component could use the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)\nplugin to localize the tooltips of the datetime picker control.\n\nIn order to localize this component, the localization files provided to the\n[vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin must provide the\nfollowing localization messages:\n\n```json\n{\n  \"datetime_picker\": {\n    \"today\": \"Go to today\",\n    \"clear\": \"Clear selection\",\n    \"close\": \"Close the picker\",\n    \"selectMonth\": \"Select Month\",\n    \"prevMonth\": \"Previous Month\",\n    \"nextMonth\": \"Next Month\",\n    \"selectYear\": \"Select Year\",\n    \"prevYear\": \"Previous Year\",\n    \"nextYear\": \"Next Year\",\n    \"selectDecade\": \"Select Decade\",\n    \"prevDecade\": \"Previous Decade\",\n    \"nextDecade\": \"Next Decade\",\n    \"prevCentury\": \"Previous Century\",\n    \"nextCentury\": \"Next Century\",\n    \"pickHour\": \"Pick Hour\",\n    \"incrementHour\": \"Increment Hour\",\n    \"decrementHour\": \"Decrement Hour\",\n    \"pickMinute\": \"Pick Minute\",\n    \"incrementMinute\": \"Increment Minute\",\n    \"decrementMinute\": \"Decrement Minute\",\n    \"pickSecond\": \"Pick Second\",\n    \"incrementSecond\": \"Increment Second\",\n    \"decrementSecond\": \"Decrement Second\",\n    \"togglePeriod\": \"Toggle Period\",\n    \"selectTime\": \"Select Time\"\n  }\n}\n```\n\nIf no [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) is used, or the\nlocalization file of the plugin does not provide the above localization messages,\nthe default English messages will be used.\n\nSome localization files could be found in the `src/i18n` directory.\n\n# Contributing\n\n- Fork it !\n- Create your top branch from `dev`: `git branch my-new-topic origin/dev`\n- Commit your changes: `git commit -am 'Add some topic'`\n- Push to the branch: `git push origin my-new-topic`\n- Submit a pull request to `dev` branch of `Haixing-Hu/vue-datetime-picker` repository !\n\n# Building and Testing\n\nFirst you should install all depended NPM packages. The NPM packages are used\nfor building and testing this package.\n\n```shell\n$ npm install\n```\n\nThen install all depended bower packages. The bower packages are depended by\nthis packages.\n\n```shell\n$ bower install\n```\n\nNow you can build the project.\n```shell\n$ gulp build\n```\n\nThe following command will test the project.\n```shell\n$ gulp test\n```\n\nThe following command will perform the test and generate a coverage report.\n```shell\n$ gulp test:coverage\n```\n\nThe following command will perform the test, generate a coverage report, and\nupload the coverage report to [coveralls.io](https://coveralls.io/).\n```shell\n$ gulp test:coveralls\n```\n\nYou can also run `bower install` and `gulp build` together with the following\ncommand:\n```shell\nnpm run build\n```\n\nOr run `bower install` and `gulp test:coveralls` together with the following\ncommand:\n```shell\nnpm run test\n```\n\n# License\n\n[The MIT License](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHaixing-Hu%2Fvue-datetime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHaixing-Hu%2Fvue-datetime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHaixing-Hu%2Fvue-datetime-picker/lists"}