ankurk91 / Vue Bootstrap Datetimepicker
Licence: mit
Vue.js component for eonasdan bootstrap datetimepicker
Stars: ✭ 221
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Bootstrap Datetimepicker
Shards Ui
🎨Shards is a beautiful & modern Bootstrap 4 UI kit packed with extra templates and components.
Stars: ✭ 1,718 (+677.38%)
Mutual labels: datepicker, bootstrap
Ngx Bootstrap
Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
Stars: ✭ 5,343 (+2317.65%)
Mutual labels: datepicker, bootstrap
Jtsage Datebox
A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
Stars: ✭ 481 (+117.65%)
Mutual labels: datepicker, bootstrap
Vue Flatpickr Component
Vue.js component for Flatpickr datetime picker 📆
Stars: ✭ 773 (+249.77%)
Mutual labels: datepicker, vue-component
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-64.25%)
Mutual labels: datepicker, vue-component
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+3461.99%)
Mutual labels: datepicker, bootstrap
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+219.91%)
Mutual labels: datepicker, vue-component
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (-47.96%)
Mutual labels: datepicker, bootstrap
Ng2 Datetime
Datetime picker plugins wrapper for Angular2+
Stars: ✭ 165 (-25.34%)
Mutual labels: datepicker, bootstrap
Ssis Dashboard
HTML5 SQL Server Integration Services Dashboard
Stars: ✭ 206 (-6.79%)
Mutual labels: bootstrap
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+973.76%)
Mutual labels: datepicker
Datepicker
Get a date with JavaScript! A datepicker with no dependencies.
Stars: ✭ 212 (-4.07%)
Mutual labels: datepicker
Persian Date Picker Dialog
Persian Date Picker Dialog for Android
Stars: ✭ 205 (-7.24%)
Mutual labels: datepicker
Light Blue Vue Admin
🤘Vue admin dashboard template with stylish transparent design
Stars: ✭ 218 (-1.36%)
Mutual labels: bootstrap
Codetest
🐷个人代码库,日常JS代码都在这里,防止电脑数据丢失。。。0.0。更新内容请关注README.md
Stars: ✭ 204 (-7.69%)
Mutual labels: bootstrap
Jekyll Doc Theme
Jekyll theme for creating project documentation websites
Stars: ✭ 203 (-8.14%)
Mutual labels: bootstrap
Bootstrap Better Nav
Replaces the default Bootstrap navbar collapse with an elegant off-screen menu.
Stars: ✭ 219 (-0.9%)
Mutual labels: bootstrap
Vue Bootstrap 4 DatetimePicker
Vue.js component for eonasdan-bootstrap-datetimepicker
JSFiddle
Demo onVersions
👉 If you are looking for the documentation of an older version then switch to respective version branch.
Package Version | Bootstrap CSS version | Underlying Library | API Docs (same for both) |
---|---|---|---|
4.x | 3.x | eonasdan-bootstrap-datetimepicker (Official) | Docs |
5.x | 4.x | pc-bootstrap4-datetimepicker (Fork) | Docs |
Features
- Reactive
v-model
value- You can change datepicker value programmatically
- Reactive config options
- You can change config options dynamically
- Component will watch for changes and apply them
- You are suggested to modify config via Vue.set
- Emits all possible events
- Works with vee-validate and other validation library
Requirements
- Bootstrap ^4 (only css)
- jQuery >=1.8.3
- Moment.js ^2.22
Installation
# npm
npm install vue-bootstrap-datetimepicker --save
# Yarn
yarn add vue-bootstrap-datetimepicker
Using Webpack?
- Webpack users need to configure ProvidePlugin
// webpack.config.js
plugins: [
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.esm.js', 'default'],
jQuery: 'jquery',
'window.jQuery': 'jquery',
$: 'jquery',
moment: 'moment',
}),
]
Using Laravel Mix?
- Update your
webpack.mix.js
file, ref
// webpack.mix.js
mix.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery'],
'vue': ['Vue','window.Vue'],
'moment': ['moment','window.moment'],
})
Icon Fonts missing?
- Bootstrap v4 does not come with any icon fonts. You can import font-awesome v5 icons css.
// app.js
jQuery.extend(true, jQuery.fn.datetimepicker.defaults, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
}
});
Usage Example
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<date-picker v-model="date" :config="options"></date-picker>
</div>
</div>
</div>
</template>
<script>
// Import required dependencies
import 'bootstrap/dist/css/bootstrap.css';
// Import this component
import datePicker from 'vue-bootstrap-datetimepicker';
// Import date picker css
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
export default {
data () {
return {
date: new Date(),
options: {
format: 'DD/MM/YYYY',
useCurrent: false,
}
}
},
components: {
datePicker
}
}
</script>
As plugin
import Vue from 'vue';
import datePicker from 'vue-bootstrap-datetimepicker';
import 'bootstrap/dist/css/bootstrap.css';
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
Vue.use(datePicker);
This will register a global component <date-picker>
Events
- The component emits all available events
- You can listen to them in your component like -
<date-picker v-model="date" @dp-hide="doSomethingOnHide" @dp-change="doSomethingOnChange"></date-picker>
Available props
The component accepts these props:
Attribute | Type | Default | Description |
---|---|---|---|
v-model / value | String / Date Object / moment / null | null |
Set or Get date-picker value |
config | Object | {} |
Datetime picker configuration options |
wrap | Boolean | false |
Set this to true when wrapped in 'input-group' |
Install in non-module environments (without webpack)
<!-- Date-picker dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Date-picker itself -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
// Initialize as global component
Vue.component('date-picker', VueBootstrapDatetimePicker);
</script>
Run examples on your localhost
- Clone this repo
- You should have node-js
>=6.10
and yarn>=1.x
pre-installed - Install dependencies -
yarn install
- Run webpack dev server -
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Testing
- This package is using Jest and vue-test-utils for testing.
- Tests can be found in
__test__
folder. - Execute tests with this command -
yarn test
Changelog
Please see CHANGELOG for more information what has changed recently.
Caveats
- ⚠️ Don't pass config option as inline literal object to
:config
prop.
<!-- This will cause date picker to freeze -->
<date-picker v-model="card" :config="{format: 'DD/MM/YYYY'}"></date-picker>
- Vue.js can not detect changes when literal object/arrays passed within template, see
License
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].