Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Haixing-Hu/vue-datetime-picker
A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin.
https://github.com/Haixing-Hu/vue-datetime-picker
Last synced: 3 months ago
JSON representation
A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin.
- Host: GitHub
- URL: https://github.com/Haixing-Hu/vue-datetime-picker
- Owner: Haixing-Hu
- License: mit
- Created: 2015-10-04T10:06:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-05T14:01:15.000Z (over 5 years ago)
- Last Synced: 2024-01-08T01:45:12.205Z (6 months ago)
- Language: JavaScript
- Homepage: http://haixing-hu.github.io/vue-datetime-picker/
- Size: 522 KB
- Stars: 343
- Watchers: 15
- Forks: 77
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-github-vue - vue-datetime-picker - 日期时间选择控件 (UI组件)
- awesome-vue - vue-datetime-picker - Hu/vue-datetime-picker?style=social) - 日期时间选择控件 (UI组件)
- awesome-github-vue - vue-datetime-picker - 日期时间选择控件 (UI组件)
- awesome-github-vue - vue-datetime-picker - 日期时间选择控件 (UI组件)
- awesome - vue-datetime-picker - 日期时间选择控件 (UI组件)
- awesome-vuejs - vue-datetime-picker ★92 - datetimepicker). By @Haixing-Hu (Awesome Vue.js / Libraries & Plugins)
- awesome-vue-refactor - vue-datetime-picker ★92
- repo-560-awesome-vue-cn - vue-datetime-picker ★54 - datetimepicker). By @Haixing-Hu (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
- awesome-vue-cn - vue-datetime-picker ★54 - datetimepicker). By @Haixing-Hu (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
README
# vue-datetime-picker
[](https://circleci.com/gh/Haixing-Hu/vue-datetime-picker/tree/master)
[](https://coveralls.io/github/Haixing-Hu/vue-datetime-picker?branch=master)
[](https://www.bithound.io/github/Haixing-Hu/vue-datetime-picker)
[](https://david-dm.org/Haixing-Hu/vue-datetime-picker)
[](https://david-dm.org/Haixing-Hu/vue-datetime-picker#info=devDependencies)
A Vue.js component implementing the datetime picker control using the [Eonasdan's bootstrap datetime picker plugin](https://github.com/Eonasdan/bootstrap-datetimepicker).
# Demo
The demo page is [HERE](http://haixing-hu.github.io/vue-datetime-picker/demo.html).
# Requirements
- [Vue.js](https://github.com/yyx990803/vue) `^1.0.24`
- [bootstrap](https://github.com/twbs/bootstrap) `^3.3.6`
- [font-awesome](https://github.com/FortAwesome/Font-Awesome) `^4.2.0`
- [moment](https://github.com/moment/moment/) `^2.9.0`
- [moment-timezone](https://github.com/moment/moment-timezone/) `^0.4.0`
- [Eonasdan's bootstrap datetime picker](https://github.com/Eonasdan/bootstrap-datetimepicker) `^4.17.37`
- [vue-i18n-plugin](https://github.com/Haixing-Hu/vue-i18n) `^0.2.2` This is optional.
# Installation
## npm
```shell
$ npm install --save vue-datetime-picker
```
## bower
```shell
$ bower install vue-datetime-picker
```
# Usage
The HTML snippets are as follows:
```html
A default datetime picker:
Selected Datetime: {{formatDatetime(result1)}}
A datetime picker with customized datetime format:
Selected Datetime: {{formatDatetime(result2)}}
A date picker with customized date format:
Selected Date: {{formatDate(result3)}}
A time picker with customized time format:
Selected Time: {{formatTime(result4)}}
Demonstration of the range of datetime. Note how the minimum/maximum
selectable datetime of the start/end datetime picker was changed
according to the selection of another picker.
Start Datetime:
End Datetime:
```
The Javascript snippets are as follows:
```javascript
var Vue = require("vue");
var vm = new Vue({
el: "#app",
components: {
"vue-datetime-picker": require("vue-datetime-picker")
},
data: {
result1: null,
result2: null,
result3: null,
startDatetime: moment(),
endDatetime: null
},
methods: {
formatDatetime: function(datetime) {
if (datetime === null) {
return "[null]";
} else {
return datetime.format("YYYY-MM-DD HH:mm:ss");
}
},
formatDate: function(date) {
if (date === null) {
return "[null]";
} else {
return date.format("YYYY-MM-DD");
}
},
formatTime: function(time) {
if (time === null) {
return "[null]";
} else {
return time.format("HH:mm:ss");
}
},
onStartDatetimeChanged: function(newStart) {
var endPicker = this.$.endPicker.control;
endPicker.minDate(newStart);
},
onEndDatetimeChanged: function(newEnd) {
var startPicker = this.$.startPicker.control;
startPicker.maxDate(newEnd);
}
}
});
```
# Component Properties
## `model`
The model bind to the control, which must be a two way binding variable.
Note that the value of the model must be either a `null` value, or a
[moment](https://github.com/moment/moment/) object. If the model is set to
`null`, the input box of the datetime picker control will set to empty,
indicating no datetime was selected; also, if the input box of the datetime
picker control is set to empty (that is, the user delete the text in the input
box of the datetime picker control), the value of the model will be set to
`null` instead of an empty string; if the user does select a datetime, the
value of the model will be set to the [moment](https://github.com/moment/moment/)
object representing the date, without any timezone information.
## `type`
The optional type of the datetime picker control. Available values are
- `"datetime"`: Indicating that the control is a datetime picker,
- `"date"`: Indicating that the control is a date picker (without time picker),
- `"time"`: Indicating that the control is a time picker (without date picker).
The default value of this property is `"datetime"`.
## `language`
The optional code of language used by the [moment](https://github.com/moment/moment/)
library.
If it is not set, and the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)
plugin is used, the component will use the language code `$language` provided
by the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin; otherwise, the
component will use the default value `"en-US"`.
The supported languages are exactly the same as the supported languages of the
[moment](https://github.com/moment/moment/) library. In order to use the
supported language, you must also include the corresponding i18n js file of
the [moment](https://github.com/moment/moment/) library in your HTML file.
A convenient way is to include the `moment-with-locales.min.js`.
Note that the language code passed to this property could be a locale code
consists of a language code and a country code, e.g., `"en-US"`. The component
will automatically convert the locale code to the language code supported by
the [moment](https://github.com/moment/moment/) library. Since some languages
have different variants in different country or region, e.g., `"zh-CN"` for the
simplified Chinese and `"zh-TW"` for the traditional Chinese, it's recommended
to use the locale code in the form of `"[language]-[country]"`.
## `datetimeFormat`
The optional format of the datetime this component should display, which
must be a valid datetime format of the [moment](https://github.com/moment/moment/)
library.
This property only works when the `type` property is set to `"datetime"`. Default
value of this property is `"YYYY-MM-DD HH:mm:ss"`.
## `dateFormat`
The optional format of the date this component should display, which
must be a valid date format of the [moment](https://github.com/moment/moment/)
library.
This property only works when the `type` property is set to `"date"`. Default
value of this property is `"YYYY-MM-DD"`.
## `timeFormat`
The optional format of the time this component should display, which
must be a valid time format of the [moment](https://github.com/moment/moment/)
library.
This property only works when the `type` property is set to `"time"`. Default
value of this property is `"HH:mm:ss"`.
## `name`
The optional name of the selection control.
## `onChange`
The optional event handler triggered when the value of the datetime picker
was changed. If this parameter is presented and is not `null`, it must be a
function which accept one argument: the new date time selected by the picker,
which is a [moment](https://github.com/moment/moment/) object.
# API
## `control`
This property is a reference to the JQuery selection of datetime control. It
could be used to call the APIs of the
[Eonasdan's bootstrap datetime picker](https://github.com/Eonasdan/bootstrap-datetimepicker).
For example, `picker.control.minDate(val)` will set the minimum allowed datetime
of the picker to the specified value, where `picker` is the reference to the
`vue-datetime-picker` component.
# Localization
This component could use the [vue-i18n](https://github.com/Haixing-Hu/vue-i18n)
plugin to localize the tooltips of the datetime picker control.
In order to localize this component, the localization files provided to the
[vue-i18n](https://github.com/Haixing-Hu/vue-i18n) plugin must provide the
following localization messages:
```json
{
"datetime_picker": {
"today": "Go to today",
"clear": "Clear selection",
"close": "Close the picker",
"selectMonth": "Select Month",
"prevMonth": "Previous Month",
"nextMonth": "Next Month",
"selectYear": "Select Year",
"prevYear": "Previous Year",
"nextYear": "Next Year",
"selectDecade": "Select Decade",
"prevDecade": "Previous Decade",
"nextDecade": "Next Decade",
"prevCentury": "Previous Century",
"nextCentury": "Next Century",
"pickHour": "Pick Hour",
"incrementHour": "Increment Hour",
"decrementHour": "Decrement Hour",
"pickMinute": "Pick Minute",
"incrementMinute": "Increment Minute",
"decrementMinute": "Decrement Minute",
"pickSecond": "Pick Second",
"incrementSecond": "Increment Second",
"decrementSecond": "Decrement Second",
"togglePeriod": "Toggle Period",
"selectTime": "Select Time"
}
}
```
If no [vue-i18n](https://github.com/Haixing-Hu/vue-i18n) is used, or the
localization file of the plugin does not provide the above localization messages,
the default English messages will be used.
Some localization files could be found in the `src/i18n` directory.
# Contributing
- Fork it !
- Create your top branch from `dev`: `git branch my-new-topic origin/dev`
- Commit your changes: `git commit -am 'Add some topic'`
- Push to the branch: `git push origin my-new-topic`
- Submit a pull request to `dev` branch of `Haixing-Hu/vue-datetime-picker` repository !
# Building and Testing
First you should install all depended NPM packages. The NPM packages are used
for building and testing this package.
```shell
$ npm install
```
Then install all depended bower packages. The bower packages are depended by
this packages.
```shell
$ bower install
```
Now you can build the project.
```shell
$ gulp build
```
The following command will test the project.
```shell
$ gulp test
```
The following command will perform the test and generate a coverage report.
```shell
$ gulp test:coverage
```
The following command will perform the test, generate a coverage report, and
upload the coverage report to [coveralls.io](https://coveralls.io/).
```shell
$ gulp test:coveralls
```
You can also run `bower install` and `gulp build` together with the following
command:
```shell
npm run build
```
Or run `bower install` and `gulp test:coveralls` together with the following
command:
```shell
npm run test
```
# License
[The MIT License](http://opensource.org/licenses/MIT)