vue-bootstrap-datetimepicker
Advanced tools
Comparing version 5.0.0-beta.1 to 5.0.0-beta.2
| # Changelog | ||
| ## 5.0.0-beta.2 | ||
| * Change export names | ||
| ## 5.0.0-beta.1 | ||
| * Upgrade to [bootstrap-4](https://github.com/pingcheng/bootstrap4-datetimepicker) | ||
| * Switch underlying library to [pc-bootstrap4-datetimepicker](https://github.com/pingcheng/bootstrap4-datetimepicker) | ||
| ## 4.1.3 | ||
| * Updated dependencies | ||
| ## [4.1.4](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/4.1.3...4.1.4) | ||
| * Update dependencies | ||
| ## [4.1.3](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/4.1.2...4.1.3) | ||
| * Update dependencies | ||
| ## [4.1.2](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/4.1.1...4.1.2) | ||
@@ -10,0 +17,0 @@ * Internal: no longer require to use `Object.assign` |
@@ -49,7 +49,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| /******/ if(!__webpack_require__.o(exports, name)) { | ||
| /******/ Object.defineProperty(exports, name, { | ||
| /******/ configurable: false, | ||
| /******/ enumerable: true, | ||
| /******/ get: getter | ||
| /******/ }); | ||
| /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); | ||
| /******/ } | ||
@@ -60,5 +56,24 @@ /******/ }; | ||
| /******/ __webpack_require__.r = function(exports) { | ||
| /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { | ||
| /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); | ||
| /******/ } | ||
| /******/ Object.defineProperty(exports, '__esModule', { value: true }); | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // create a fake namespace object | ||
| /******/ // mode & 1: value is a module id, require it | ||
| /******/ // mode & 2: merge all properties of value into the ns | ||
| /******/ // mode & 4: return value when already ns object | ||
| /******/ // mode & 8|1: behave like require | ||
| /******/ __webpack_require__.t = function(value, mode) { | ||
| /******/ if(mode & 1) value = __webpack_require__(value); | ||
| /******/ if(mode & 8) return value; | ||
| /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; | ||
| /******/ var ns = Object.create(null); | ||
| /******/ __webpack_require__.r(ns); | ||
| /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); | ||
| /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); | ||
| /******/ return ns; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // getDefaultExport function for compatibility with non-harmony modules | ||
@@ -373,7 +388,7 @@ /******/ __webpack_require__.n = function(module) { | ||
| // CONCATENATED MODULE: ./src/index.js | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DatetimePickerPlugin", function() { return src_DatetimePickerPlugin; }); | ||
| /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "component", function() { return src_component; }); | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Plugin", function() { return src_Plugin; }); | ||
| /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "Component", function() { return src_component; }); | ||
| var src_DatetimePickerPlugin = function DatetimePickerPlugin(Vue, params) { | ||
| var src_Plugin = function Plugin(Vue, params) { | ||
| var name = 'date-picker'; | ||
@@ -386,3 +401,3 @@ /* istanbul ignore else */ | ||
| src_component.install = src_DatetimePickerPlugin; | ||
| src_component.install = src_Plugin; | ||
@@ -399,3 +414,3 @@ /* harmony default export */ var src = __webpack_exports__["default"] = (src_component); | ||
| /***/ }) | ||
| /******/ ]); | ||
| /******/ ])["default"]; | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("moment"),require("jquery"),require("pc-bootstrap4-datetimepicker")):"function"==typeof define&&define.amd?define("VueBootstrapDatetimePicker",["moment","jquery","pc-bootstrap4-datetimepicker"],t):"object"==typeof exports?exports.VueBootstrapDatetimePicker=t(require("moment"),require("jquery"),require("pc-bootstrap4-datetimepicker")):e.VueBootstrapDatetimePicker=t(e.moment,e.jQuery,e["pc-bootstrap4-datetimepicker"])}(window,function(e,t,n){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.r(t);var r=n(1),i=n.n(r),o=n(0),a=n.n(o),u=(n(3),["hide","show","change","error","update"]),c=function(e,t,n,r,i,o,a,u){var c,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),c)if(s.functional){s._injectStyles=c;var p=s.render;s.render=function(e,t){return c.call(t),p(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,c):[c]}return{exports:e,options:s}}({name:"date-picker",props:{value:{default:null,required:!0,validator:function(e){return null===e||e instanceof Date||"string"==typeof e||e instanceof String||e instanceof a.a}},config:{type:Object,default:function(){return{}}},wrap:{type:Boolean,default:!1}},data:function(){return{dp:null,elem:null}},mounted:function(){this.dp||(this.elem=i()(this.wrap?this.$el.parentNode:this.$el),this.elem.datetimepicker(this.config),this.dp=this.elem.data("DateTimePicker"),this.dp.date(this.value),this.elem.on("dp.change",this.onChange),this.registerEvents())},watch:{value:function(e){this.dp&&this.dp.date(e||null)},config:{deep:!0,handler:function(e){this.dp&&this.dp.options(e)}}},methods:{onChange:function(e){var t=e.date?e.date.format(this.dp.format()):null;this.$emit("input",t)},registerEvents:function(){var e=this;u.forEach(function(t){e.elem.on("dp."+t,function(){for(var n=arguments.length,r=Array(n),i=0;i<n;i++)r[i]=arguments[i];e.$emit.apply(e,["dp-"+t].concat(r))})})}},beforeDestroy:function(){this.dp&&(this.dp.destroy(),this.dp=null,this.elem=null)}},function(){var e=this.$createElement,t=this._self._c||e;return this.config.inline?t("div",{staticClass:"datetimepicker-inline"}):t("input",{staticClass:"form-control",attrs:{type:"text"}})}).exports;n.d(t,"DatetimePickerPlugin",function(){return s}),n.d(t,"component",function(){return c});var s=function(e,t){var n="date-picker";"string"==typeof t&&(n=t),e.component(n,c)};c.install=s,t.default=c},function(e,t){e.exports=n}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("moment"),require("jquery"),require("pc-bootstrap4-datetimepicker")):"function"==typeof define&&define.amd?define("VueBootstrapDatetimePicker",["moment","jquery","pc-bootstrap4-datetimepicker"],t):"object"==typeof exports?exports.VueBootstrapDatetimePicker=t(require("moment"),require("jquery"),require("pc-bootstrap4-datetimepicker")):e.VueBootstrapDatetimePicker=t(e.moment,e.jQuery,e["pc-bootstrap4-datetimepicker"])}(window,function(e,t,n){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),i=n(0),u=n.n(i),a=(n(3),["hide","show","change","error","update"]),c=function(e,t,n,r,o,i,u,a){var c,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),c)if(s.functional){s._injectStyles=c;var p=s.render;s.render=function(e,t){return c.call(t),p(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,c):[c]}return{exports:e,options:s}}({name:"date-picker",props:{value:{default:null,required:!0,validator:function(e){return null===e||e instanceof Date||"string"==typeof e||e instanceof String||e instanceof u.a}},config:{type:Object,default:function(){return{}}},wrap:{type:Boolean,default:!1}},data:function(){return{dp:null,elem:null}},mounted:function(){this.dp||(this.elem=o()(this.wrap?this.$el.parentNode:this.$el),this.elem.datetimepicker(this.config),this.dp=this.elem.data("DateTimePicker"),this.dp.date(this.value),this.elem.on("dp.change",this.onChange),this.registerEvents())},watch:{value:function(e){this.dp&&this.dp.date(e||null)},config:{deep:!0,handler:function(e){this.dp&&this.dp.options(e)}}},methods:{onChange:function(e){var t=e.date?e.date.format(this.dp.format()):null;this.$emit("input",t)},registerEvents:function(){var e=this;a.forEach(function(t){e.elem.on("dp."+t,function(){for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];e.$emit.apply(e,["dp-"+t].concat(r))})})}},beforeDestroy:function(){this.dp&&(this.dp.destroy(),this.dp=null,this.elem=null)}},function(){var e=this.$createElement,t=this._self._c||e;return this.config.inline?t("div",{staticClass:"datetimepicker-inline"}):t("input",{staticClass:"form-control",attrs:{type:"text"}})}).exports;n.d(t,"Plugin",function(){return s}),n.d(t,"Component",function(){return c});var s=function(e,t){var n="date-picker";"string"==typeof t&&(n=t),e.component(n,c)};c.install=s,t.default=c},function(e,t){e.exports=n}]).default}); |
| { | ||
| "name": "vue-bootstrap-datetimepicker", | ||
| "version": "5.0.0-beta.1", | ||
| "description": "Vue.js component for bootstrap-datetimepicker", | ||
| "version": "5.0.0-beta.2", | ||
| "description": "Vue.js component for bootstrap date time picker", | ||
| "main": "dist/vue-bootstrap-datetimepicker.js", | ||
@@ -30,7 +30,7 @@ "unpkg": "dist/vue-bootstrap-datetimepicker.min.js", | ||
| "scripts": { | ||
| "test": "node ./node_modules/jest/bin/jest.js", | ||
| "test": "jest", | ||
| "test:watch": "npm run test -- --watch --onlyChanged --notify", | ||
| "start": "npm run dev", | ||
| "dev": "cross-env NODE_ENV=development node ./node_modules/webpack-serve/cli.js --config=webpack.config.dev.js", | ||
| "build": "cross-env NODE_ENV=production node ./node_modules/webpack-command/lib/cli.js --mode production", | ||
| "dev": "cross-env NODE_ENV=development webpack-serve --config=webpack.config.dev.js", | ||
| "build": "cross-env NODE_ENV=production webpack --mode production", | ||
| "prepublishOnly": "npm run test && npm run build" | ||
@@ -49,7 +49,7 @@ }, | ||
| "clean-webpack-plugin": "^0.1.18", | ||
| "cross-env": "^5.1.5", | ||
| "cross-env": "^5.1.6", | ||
| "css-loader": "^0.28.10", | ||
| "file-loader": "^1.1.9", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "jest": "^22.4.4", | ||
| "jest": "^23.1.0", | ||
| "jquery": "^3.3.1", | ||
@@ -62,5 +62,5 @@ "popper.js": "^1.14.3", | ||
| "vue-jest": "^2.6.0", | ||
| "vue-loader": "^15.1.0", | ||
| "vue-loader": "^15.2.2", | ||
| "vue-template-compiler": "^2.5.13", | ||
| "webpack": "^4.8.3", | ||
| "webpack": "^4.10.2", | ||
| "webpack-command": "^0.2.0", | ||
@@ -67,0 +67,0 @@ "webpack-serve": "^1.0.2" |
@@ -13,4 +13,12 @@ # Vue-Bootstrap-4-DatetimePicker | ||
| ## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/zupazg2u/) | ||
| ## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/01407frf/) | ||
| ## Versions | ||
| :point_right: If you are looking for the documentation of older version then switch to respective version branch. | ||
| | Version | Underlying Library | Bootstrap CSS version | API Docs (same for both) | | ||
| | :--- | :---: | :---: | :--- | | ||
| | 4.x | [eonasdan-bootstrap-datetimepicker](https://github.com/Eonasdan/bootstrap-datetimepicker) (Official) | 3.x | [Docs](http://eonasdan.github.io/bootstrap-datetimepicker) | | ||
| | 5.x | [pc-bootstrap4-datetimepicker](https://github.com/pingcheng/bootstrap4-datetimepicker) (Fork) | 4.x | [Docs](http://eonasdan.github.io/bootstrap-datetimepicker) | | ||
| ## Features | ||
@@ -24,3 +32,3 @@ * Reactive ``v-model`` value | ||
| * Emits all possible events | ||
| * Play nice with [vee-validate](https://github.com/logaretm/vee-validate) validation library | ||
| * Works with [vee-validate](https://github.com/logaretm/vee-validate) validation library | ||
@@ -35,6 +43,6 @@ ## Requirements | ||
| # npm | ||
| npm install vue-bootstrap-datetimepicker --save | ||
| npm install vue-bootstrap-datetimepicker@beta --save | ||
| # Yarn | ||
| yarn add vue-bootstrap-datetimepicker | ||
| yarn add vue-bootstrap-datetimepicker@beta | ||
| ``` | ||
@@ -57,3 +65,3 @@ | ||
| #### Using Laravel Mix ? | ||
| #### Using Laravel Mix? | ||
| * Update your `webpack.mix.js` file, [ref](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md) | ||
@@ -69,2 +77,21 @@ ```js | ||
| #### Icon Fonts missing? | ||
| * Bootstrap v4 does not come with any icon fonts. You can import [font-awesome](https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts) v5 icons. | ||
| ```js | ||
| // 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 | ||
@@ -76,3 +103,3 @@ ```html | ||
| <div class="col-md-12"> | ||
| <date-picker v-model="date" :config="config"></date-picker> | ||
| <date-picker v-model="date" :config="options"></date-picker> | ||
| </div> | ||
@@ -97,3 +124,3 @@ </div> | ||
| date: new Date(), | ||
| config: { | ||
| options: { | ||
| format: 'DD/MM/YYYY', | ||
@@ -116,3 +143,3 @@ useCurrent: false, | ||
| import 'bootstrap/dist/css/bootstrap.css'; | ||
| import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'; | ||
| import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'; | ||
| Vue.use(datePicker); | ||
@@ -152,6 +179,6 @@ ``` | ||
| <!-- Lastly add this package --> | ||
| <script src="https://unpkg.com/vue-bootstrap-datetimepicker"></script> | ||
| <script src="https://unpkg.com/vue-bootstrap-datetimepicker@beta"></script> | ||
| <script> | ||
| // Initialize as global component | ||
| Vue.component('date-picker', VueBootstrapDatetimePicker.default); | ||
| Vue.component('date-picker', VueBootstrapDatetimePicker); | ||
| </script> | ||
@@ -162,6 +189,6 @@ ``` | ||
| * Clone this repo | ||
| * You should have node-js >=6.10 and yarn >=1.x pre-installed | ||
| * 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:8000`` in your default web browser | ||
| * This should open the demo page at ``http://localhost:9000`` in your default web browser | ||
@@ -168,0 +195,0 @@ ## Testing |
@@ -1,4 +0,4 @@ | ||
| import component from './component.vue'; | ||
| import Component from './component.vue'; | ||
| const DatetimePickerPlugin = (Vue, params) => { | ||
| const Plugin = (Vue, params) => { | ||
| let name = 'date-picker'; | ||
@@ -8,8 +8,8 @@ /* istanbul ignore else */ | ||
| Vue.component(name, component); | ||
| Vue.component(name, Component); | ||
| }; | ||
| component.install = DatetimePickerPlugin; | ||
| Component.install = Plugin; | ||
| export default component; | ||
| export {component, DatetimePickerPlugin}; | ||
| export default Component; | ||
| export {Component, Plugin}; |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by9.12%
35707
- Lines of code
- increased by4.25%
368
- Number of lines in readme file
- increased by16.07%
195
No dependency changes