A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin.
The demo page is HERE.
- Vue.js
^0.12.0 - Eonasdan's bootstrap datetime picker plugin
^4.17.37
$ npm install vue-datetime-picker$ bower install vue-datetime-pickerThe HTML snippets are as follows:
<div class="container" id="app">
<vue-datetime-picker model="{{@ text}}"></vue-datetime-picker>
<div style="margin-top:40px">
<div> The HTML contents are as follows:</div>
<hr>
<div >{{{text}}}</div>
</div>
</div>The Javascript snippets are as follows:
var Vue = require("vue");
var vm = new Vue({
el: "#app",
components: {
"vue-datetime-picker": require("vue-datetime-picker")
},
data: {
text: "Hello World!"
}
});The model bind to the control, which must be a two way binding variable.
The optional code of language used by the summernote plugin. Default value is 'en-US'.
Note that the language code passed to this property must be a language code together
with a country code. This limitation is due to names of the i18n localizaiton files
of the summernote plugin.
This property is a reference to the JQuery selection of the base texearea
control. It could be used to call the APIs of summernote. For example,
editor.control.code(val) will set the HTML content of the editor to the
specified value, where editor is the reference to the vue-datetime-picker
component.
- 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
devbranch ofHaixing-Hu/vue-datetime-pickerrepository !
First you should install all depended NPM packages. The NPM packages are used for building and testing this package.
$ npm installThen install all depended bower packages. The bower packages are depended by this packages.
$ bower installNow you can build the project.
$ gulp buildThe following command will test the project.
$ gulp testThe following command will perform the test and generate a coverage report.
$ gulp test:coverageThe following command will perform the test, generate a coverage report, and upload the coverage report to coveralls.io.
$ gulp test:coverallsYou can also run bower install and gulp build together with the following
command:
npm buildOr run bower install and gulp test:coveralls together with the following
command:
npm test