vuedatetimepicker一个Vuejs的日期选择器组件

# 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 <div class="form-horizontal"> <div class="form-group"> <label for="picker1" class="col-sm-3 control-label"> A default datetime picker: </label> <div class="col-sm-5"> <vue-datetime-picker class="vue-picker1" name="picker1" :model.sync="result1"> </vue-datetime-picker> </div> <div class="col-sm-4"> <p class="form-control-static"> Selected Datetime: <span class="vue-result1">{{formatDatetime(result1)}}</span> </p> </div> </div> <div class="form-group"> <label for="picker2" class="col-sm-3 control-label"> A datetime picker with customized datetime format: </label> <div class="col-sm-5"> <vue-datetime-picker class="vue-picker2" name="picker2" :model.sync="result2" type="datetime" language="en" datetime-format="LLL"> </vue-datetime-picker> </div> <div class="col-sm-4"> <p class="form-control-static"> Selected Datetime: <span class="vue-result2">{{formatDatetime(result2)}}</span> </p> </div> </div> <div class="form-group"> <label for="picker3" class="col-sm-3 control-label"> A date picker with customized date format: </label> <div class="col-sm-5"> <vue-datetime-picker class="vue-picker3" name="picker3" :model.sync="result3" type="date" language="en-US" date-format="L"> </vue-datetime-picker> </div> <div class="col-sm-4"> <p class="form-control-static"> Selected Date: <span class="vue-result3">{{formatDate(result3)}}</span> </p> </div> </div> <div class="form-group"> <label for="picker4" class="col-sm-3 control-label"> A time picker with customized time format: </label> <div class="col-sm-5"> <vue-datetime-picker class="vue-picker4" name="picker4" :model.sync="result4" type="time" language="zh-CN" time-format="LT"> </vue-datetime-picker> </div> <div class="col-sm-4"> <p class="form-control-static"> Selected Time: <span class="vue-result4">{{formatTime(result4)}}</span> </p> </div> </div> <div class="form-group"> <p class="form-control-static col-sm-12"> 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. </p> </div> <div class="form-group"> <label for="start-picker" class="col-sm-3 control-label"> Start Datetime: </label> <div class="col-sm-3"> <vue-datetime-picker class="vue-start-picker" name="start-picker" v-ref:start-picker :model.sync="startDatetime" :on-change="onStartDatetimeChanged"> </vue-datetime-picker> </div> <label for="end-picker" class="col-sm-3 control-label"> End Datetime: </label> <div class="col-sm-3"> <vue-datetime-picker class="vue-end-picker" name="end-picker" v-ref:end-picker :model.sync="endDatetime" :on-change="onEndDatetimeChanged"> </vue-datetime-picker> </div> </div> </div> ``` 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;