vue-bootstrap-datetimepicker
Advanced tools
Comparing version 4.1.2 to 4.1.3
| # Changelog | ||
| ## 4.1.3 | ||
| * Updated dependencies | ||
| ## [4.1.2](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/4.1.1...4.1.2) | ||
@@ -4,0 +7,0 @@ * Internal: no longer require to use `Object.assign` |
@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| root["VueBootstrapDatetimePicker"] = factory(root["jquery"], root["moment"], root["eonasdan-bootstrap-datetimepicker"]); | ||
| })(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__) { | ||
| })(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
@@ -85,3 +85,3 @@ /******/ // The module cache | ||
| // EXTERNAL MODULE: external "eonasdan-bootstrap-datetimepicker" | ||
| var external__eonasdan_bootstrap_datetimepicker_ = __webpack_require__(4); | ||
| var external__eonasdan_bootstrap_datetimepicker_ = __webpack_require__(3); | ||
| var external__eonasdan_bootstrap_datetimepicker__default = /*#__PURE__*/__webpack_require__.n(external__eonasdan_bootstrap_datetimepicker_); | ||
@@ -98,4 +98,4 @@ | ||
| var jQuery = window.jQuery || __webpack_require__(2); | ||
| var moment = window.moment || __webpack_require__(3); | ||
| var jQuery = window.jQuery || __webpack_require__(1); | ||
| var moment = window.moment || __webpack_require__(2); | ||
@@ -147,5 +147,3 @@ | ||
| // Handle wrapped input | ||
| var node = this.wrap ? this.$el.parentNode : this.$el; | ||
| // Cache DOM | ||
| this.elem = jQuery(node); | ||
| this.elem = jQuery(this.wrap ? this.$el.parentNode : this.$el); | ||
| // Init date-picker | ||
@@ -215,4 +213,6 @@ this.elem.datetimepicker(this.config); | ||
| }, | ||
| /** | ||
| * Free up memory | ||
| */ | ||
| beforeDestroy: function beforeDestroy() { | ||
| // Free up memory | ||
| /* istanbul ignore else */ | ||
@@ -226,77 +226,29 @@ if (this.dp) { | ||
| }); | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-343a0230","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/component.vue | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-4757e7c2","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/component.vue | ||
| var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.config.inline)?_c('div',{staticClass:"datetimepicker-inline"}):_c('input',{staticClass:"form-control",attrs:{"type":"text"}})} | ||
| var staticRenderFns = [] | ||
| var esExports = { render: render, staticRenderFns: staticRenderFns } | ||
| /* harmony default export */ var selectortype_template_index_0_src_component = (esExports); | ||
| // CONCATENATED MODULE: ./src/component.vue | ||
| var normalizeComponent = __webpack_require__(1) | ||
| /* script */ | ||
| /* template */ | ||
| /* template functional */ | ||
| var __vue_template_functional__ = false | ||
| /* styles */ | ||
| var __vue_styles__ = null | ||
| /* scopeId */ | ||
| var __vue_scopeId__ = null | ||
| /* moduleIdentifier (server only) */ | ||
| var __vue_module_identifier__ = null | ||
| var Component = normalizeComponent( | ||
| component, | ||
| selectortype_template_index_0_src_component, | ||
| __vue_template_functional__, | ||
| __vue_styles__, | ||
| __vue_scopeId__, | ||
| __vue_module_identifier__ | ||
| ) | ||
| /* harmony default export */ var src_component = (Component.exports); | ||
| // 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; }); | ||
| var src_DatetimePickerPlugin = function DatetimePickerPlugin(Vue, params) { | ||
| var name = 'date-picker'; | ||
| /* istanbul ignore else */ | ||
| if (typeof params === 'string') name = params; | ||
| Vue.component(name, src_component); | ||
| }; | ||
| src_component.install = src_DatetimePickerPlugin; | ||
| /* harmony default export */ var src = __webpack_exports__["default"] = (src_component); | ||
| /***/ }), | ||
| /* 1 */ | ||
| /***/ (function(module, exports) { | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/component-normalizer.js | ||
| /* globals __VUE_SSR_CONTEXT__ */ | ||
| // IMPORTANT: Do NOT use ES2015 features in this file. | ||
| // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). | ||
| // This module is a runtime utility for cleaner component module output and will | ||
| // be included in the final webpack user bundle. | ||
| module.exports = function normalizeComponent ( | ||
| rawScriptExports, | ||
| compiledTemplate, | ||
| function normalizeComponent ( | ||
| scriptExports, | ||
| render, | ||
| staticRenderFns, | ||
| functionalTemplate, | ||
| injectStyles, | ||
| scopeId, | ||
| moduleIdentifier /* server only */ | ||
| moduleIdentifier, /* server only */ | ||
| shadowMode /* vue-cli only */ | ||
| ) { | ||
| var esModule | ||
| var scriptExports = rawScriptExports = rawScriptExports || {} | ||
| scriptExports = scriptExports || {} | ||
| // ES6 modules interop | ||
| var type = typeof rawScriptExports.default | ||
| var type = typeof scriptExports.default | ||
| if (type === 'object' || type === 'function') { | ||
| esModule = rawScriptExports | ||
| scriptExports = rawScriptExports.default | ||
| scriptExports = scriptExports.default | ||
| } | ||
@@ -310,5 +262,5 @@ | ||
| // render functions | ||
| if (compiledTemplate) { | ||
| options.render = compiledTemplate.render | ||
| options.staticRenderFns = compiledTemplate.staticRenderFns | ||
| if (render) { | ||
| options.render = render | ||
| options.staticRenderFns = staticRenderFns | ||
| options._compiled = true | ||
@@ -352,17 +304,9 @@ } | ||
| } else if (injectStyles) { | ||
| hook = injectStyles | ||
| hook = shadowMode | ||
| ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) } | ||
| : injectStyles | ||
| } | ||
| if (hook) { | ||
| var functional = options.functional | ||
| var existing = functional | ||
| ? options.render | ||
| : options.beforeCreate | ||
| if (!functional) { | ||
| // inject component registration as beforeCreate hook | ||
| options.beforeCreate = existing | ||
| ? [].concat(existing, hook) | ||
| : [hook] | ||
| } else { | ||
| if (options.functional) { | ||
| // for template-only hot-reload because in that case the render fn doesn't | ||
@@ -372,6 +316,13 @@ // go through the normalizer | ||
| // register for functioal component in vue file | ||
| var originalRender = options.render | ||
| options.render = function renderWithStyleInjection (h, context) { | ||
| hook.call(context) | ||
| return existing(h, context) | ||
| return originalRender(h, context) | ||
| } | ||
| } else { | ||
| // inject component registration as beforeCreate hook | ||
| var existing = options.beforeCreate | ||
| options.beforeCreate = existing | ||
| ? [].concat(existing, hook) | ||
| : [hook] | ||
| } | ||
@@ -381,3 +332,2 @@ } | ||
| return { | ||
| esModule: esModule, | ||
| exports: scriptExports, | ||
@@ -388,4 +338,54 @@ options: options | ||
| // CONCATENATED MODULE: ./src/component.vue | ||
| /* script */ | ||
| /* template */ | ||
| /* template functional */ | ||
| var __vue_template_functional__ = false | ||
| /* styles */ | ||
| var __vue_styles__ = null | ||
| /* scopeId */ | ||
| var __vue_scopeId__ = null | ||
| /* moduleIdentifier (server only) */ | ||
| var __vue_module_identifier__ = null | ||
| var Component = normalizeComponent( | ||
| component, | ||
| render, | ||
| staticRenderFns, | ||
| __vue_template_functional__, | ||
| __vue_styles__, | ||
| __vue_scopeId__, | ||
| __vue_module_identifier__ | ||
| ) | ||
| /* harmony default export */ var src_component = (Component.exports); | ||
| // 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; }); | ||
| var src_DatetimePickerPlugin = function DatetimePickerPlugin(Vue, params) { | ||
| var name = 'date-picker'; | ||
| /* istanbul ignore else */ | ||
| if (typeof params === 'string') name = params; | ||
| Vue.component(name, src_component); | ||
| }; | ||
| src_component.install = src_DatetimePickerPlugin; | ||
| /* harmony default export */ var src = __webpack_exports__["default"] = (src_component); | ||
| /***/ }), | ||
| /* 1 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_1__; | ||
| /***/ }), | ||
| /* 2 */ | ||
@@ -402,10 +402,4 @@ /***/ (function(module, exports) { | ||
| /***/ }), | ||
| /* 4 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_4__; | ||
| /***/ }) | ||
| /******/ ]); | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jquery"),require("moment"),require("eonasdan-bootstrap-datetimepicker")):"function"==typeof define&&define.amd?define("VueBootstrapDatetimePicker",["jquery","moment","eonasdan-bootstrap-datetimepicker"],t):"object"==typeof exports?exports.VueBootstrapDatetimePicker=t(require("jquery"),require("moment"),require("eonasdan-bootstrap-datetimepicker")):e.VueBootstrapDatetimePicker=t(e.jquery,e.moment,e["eonasdan-bootstrap-datetimepicker"])}("undefined"!=typeof self?self:this,function(e,t,n){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=(n(4),window.jQuery||n(2)),o=window.moment||n(3),i=["hide","show","change","error","update"],a={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 o}},config:{type:Object,default:function(){return{}}},wrap:{type:Boolean,default:!1}},data:function(){return{dp:null,elem:null}},mounted:function(){if(!this.dp){var e=this.wrap?this.$el.parentNode:this.$el;this.elem=r(e),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;i.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)}},s=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.config.inline?n("div",{staticClass:"datetimepicker-inline"}):n("input",{staticClass:"form-control",attrs:{type:"text"}})},u=[],c={render:s,staticRenderFns:u},d=c,p=n(1),f=p(a,d,!1,null,null,null),l=f.exports;n.d(t,"DatetimePickerPlugin",function(){return m}),n.d(t,"component",function(){return l});var m=function(e,t){var n="date-picker";"string"==typeof t&&(n=t),e.component(n,l)};l.install=m;t.default=l},function(e,t){e.exports=function(e,t,n,r,o,i){var a,s=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(a=e,s=e.default);var c="function"==typeof s?s.options:s;t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId=o);var d;if(i?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=d):r&&(d=r),d){var p=c.functional,f=p?c.render:c.beforeCreate;p?(c._injectStyles=d,c.render=function(e,t){return d.call(t),f(e,t)}):c.beforeCreate=f?[].concat(f,d):[d]}return{esModule:a,exports:s,options:c}}},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jquery"),require("moment"),require("eonasdan-bootstrap-datetimepicker")):"function"==typeof define&&define.amd?define("VueBootstrapDatetimePicker",["jquery","moment","eonasdan-bootstrap-datetimepicker"],t):"object"==typeof exports?exports.VueBootstrapDatetimePicker=t(require("jquery"),require("moment"),require("eonasdan-bootstrap-datetimepicker")):e.VueBootstrapDatetimePicker=t(e.jquery,e.moment,e["eonasdan-bootstrap-datetimepicker"])}("undefined"!=typeof self?self:this,function(e,t,n){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=(n(3),window.jQuery||n(1)),r=window.moment||n(2),i=["hide","show","change","error","update"],a={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 r}},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;i.forEach(function(t){e.elem.on("dp."+t,function(){for(var n=arguments.length,o=Array(n),r=0;r<n;r++)o[r]=arguments[r];e.$emit.apply(e,["dp-"+t].concat(o))})})}},beforeDestroy:function(){this.dp&&(this.dp.destroy(),this.dp=null,this.elem=null)}},s=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.config.inline?n("div",{staticClass:"datetimepicker-inline"}):n("input",{staticClass:"form-control",attrs:{type:"text"}})},u=[],c=function(e,t,n,o,r,i,a,s){e=e||{};var u=typeof e.default;"object"!==u&&"function"!==u||(e=e.default);var c="function"==typeof e?e.options:e;t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),i&&(c._scopeId=i);var p;if(a?(p=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=p):r&&(p=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),p)if(c.functional){c._injectStyles=p;var d=c.render;c.render=function(e,t){return p.call(t),d(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,p):[p]}return{exports:e,options:c}}(a,s,u,!1,null,null,null),p=c.exports;n.d(t,"DatetimePickerPlugin",function(){return d}),n.d(t,"component",function(){return p});var d=function(e,t){var n="date-picker";"string"==typeof t&&(n=t),e.component(n,p)};p.install=d;t.default=p},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n}])}); |
| MIT License | ||
| Copyright (c) 2017 Ankur Kumar | ||
| Copyright (c) Ankur Kumar | ||
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy |
| { | ||
| "name": "vue-bootstrap-datetimepicker", | ||
| "version": "4.1.2", | ||
| "version": "4.1.3", | ||
| "description": "Vue.js component for bootstrap-datetimepicker", | ||
| "main": "dist/vue-bootstrap-datetimepicker.js", | ||
| "unpkg": "dist/vue-bootstrap-datetimepicker.min.js", | ||
| "files": [ | ||
| "src", | ||
| "dist" | ||
| ], | ||
| "repository": { | ||
@@ -37,22 +41,22 @@ "type": "git", | ||
| "devDependencies": { | ||
| "@vue/test-utils": "^1.0.0-beta.12", | ||
| "babel-core": "^6.25.0", | ||
| "babel-loader": "^7.1.1", | ||
| "babel-preset-env": "^1.6.1", | ||
| "bootstrap": "^3.3.7", | ||
| "clean-webpack-plugin": "^0.1.16", | ||
| "css-loader": "^0.28.4", | ||
| "file-loader": "^1.1.6", | ||
| "bootstrap": "~3.3.7", | ||
| "clean-webpack-plugin": "^0.1.18", | ||
| "css-loader": "^0.28.10", | ||
| "file-loader": "^1.1.9", | ||
| "html-webpack-plugin": "^2.30.1", | ||
| "jest": "^22.0.3", | ||
| "jquery": "^3.2.1", | ||
| "style-loader": "^0.19.1", | ||
| "jest": "^22.4.2", | ||
| "jquery": "^3.3.1", | ||
| "style-loader": "^0.20.2", | ||
| "unminified-webpack-plugin": "^1.4.2", | ||
| "vee-validate": "^2.0.0-rc.27", | ||
| "vee-validate": "^2.0.4", | ||
| "vue": "^2.5.13", | ||
| "vue-jest": "^1.4.0", | ||
| "vue-loader": "^13.6.0", | ||
| "vue-jest": "^2.1.0", | ||
| "vue-loader": "^14.1.1", | ||
| "vue-template-compiler": "^2.5.13", | ||
| "vue-test-utils": "^1.0.0-beta.8", | ||
| "webpack": "^3.10.0", | ||
| "webpack-dev-server": "^2.9.7" | ||
| "webpack": "^3.11.0", | ||
| "webpack-dev-server": "^2.11.1" | ||
| }, | ||
@@ -78,5 +82,4 @@ "peerDependencies": { | ||
| }, | ||
| "mapCoverage": true, | ||
| "collectCoverage": true | ||
| } | ||
| } |
110
README.md
@@ -21,6 +21,11 @@ # Vue-Bootstrap-DatetimePicker | ||
| - Component will watch for changes and apply them | ||
| - You are suggested to modify config via [Vue.set](https://vuejs.org/v2/api/#Vue-set) | ||
| - You are suggested to modify config via [Vue.set](https://vuejs.org/v2/api/#Vue-set) | ||
| * Emits all possible events | ||
| * Play nice with [vee-validate](https://github.com/logaretm/vee-validate) validation library | ||
| ## Requirements | ||
| * Bootstrap ^3.3.7 (only css) | ||
| * jQuery >=1.8.3 || ^3.2.1 | ||
| * [Moment.js](https://momentjs.com/) ^2.18 | ||
| ## Installation | ||
@@ -34,9 +39,30 @@ ```bash | ||
| ``` | ||
| #### Using Webpack? | ||
| * Webpack users need to configure [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/) | ||
| ```js | ||
| // webpack.config.js | ||
| plugins: [ | ||
| new webpack.ProvidePlugin({ | ||
| Vue: ['vue/dist/vue.esm.js', 'default'], | ||
| jQuery: 'jquery', | ||
| 'window.jQuery': 'jquery', | ||
| $: 'jquery', | ||
| moment: 'moment', | ||
| }), | ||
| ] | ||
| ``` | ||
| ## Requirements | ||
| * Bootstrap ^3.3.7 (only css) | ||
| * jQuery >=1.8.3 || ^3.2.1 | ||
| * [Moment.js](https://momentjs.com/) ^2.18 | ||
| ## Usage | ||
| #### Using Laravel Mix ? | ||
| * Update your `webpack.mix.js` file, [ref](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md) | ||
| ```js | ||
| // webpack.mix.js | ||
| mix.autoload({ | ||
| 'jquery': ['$', 'window.jQuery', 'jQuery'], | ||
| 'vue': ['Vue','window.Vue'], | ||
| 'moment': ['moment','window.moment'], | ||
| }) | ||
| ``` | ||
| ## Usage Example | ||
| ```html | ||
@@ -90,2 +116,9 @@ <template> | ||
| ## Events | ||
| * The component emits all available [events](http://eonasdan.github.io/bootstrap-datetimepicker/Events) | ||
| * You can listen to them in your component like - | ||
| ```html | ||
| <date-picker v-model="date" @dp-hide="doSomethingOnHide" @dp-change="doSomethingOnChange"></date-picker> | ||
| ``` | ||
| ## Available props | ||
@@ -100,13 +133,5 @@ The component accepts these props: | ||
| ## Events | ||
| * The component will emit all available [events](http://eonasdan.github.io/bootstrap-datetimepicker/Events) | ||
| * You can listen to them in your component like - | ||
| ### Install in non-module environments (without webpack) | ||
| ```html | ||
| <date-picker v-model="date" @dp-hide="doSomethingOnHide"></date-picker> | ||
| ``` | ||
| ## Install in non-module environments (without webpack) | ||
| * Acquire required files | ||
| ```html | ||
| <!-- Date-picker dependency--> | ||
| <!-- Date-picker dependencies --> | ||
| <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> | ||
@@ -124,52 +149,8 @@ <script src="https://unpkg.com/moment@2.18.1/min/moment.min.js"></script> | ||
| <script src="https://unpkg.com/vue-bootstrap-datetimepicker"></script> | ||
| ``` | ||
| * Use the component anywhere in your app like this | ||
| ```html | ||
| <!-- index.html --> | ||
| <div id="app" class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <date-picker v-model="date" name="date-of-birth"></date-picker> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| //Initialize as global component | ||
| // Initialize as global component | ||
| Vue.component('date-picker', VueBootstrapDatetimePicker.default); | ||
| new Vue({ | ||
| el: '#app', | ||
| data: { | ||
| date: null | ||
| }, | ||
| }); | ||
| </script> | ||
| ``` | ||
| ### Using Webpack? | ||
| * Webpack users need to configure [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/) | ||
| ```js | ||
| // 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](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md) | ||
| ```js | ||
| // webpack.mix.js | ||
| mix.autoload({ | ||
| 'jquery': ['$', 'window.jQuery', 'jQuery'], | ||
| 'vue': ['Vue','window.Vue'], | ||
| 'moment': ['moment','window.moment'], | ||
| }) | ||
| ``` | ||
| ## Run examples on your localhost | ||
@@ -182,4 +163,3 @@ * Clone this repo | ||
| ### Testing | ||
| ## Testing | ||
| * This package is using [Jest](https://github.com/facebook/jest) and [vue-test-utils](https://github.com/vuejs/vue-test-utils) for testing. | ||
@@ -186,0 +166,0 @@ * Tests can be found in `__test__` folder. |
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-87.02%
32783
- Number of package files
- decreased by-11.11%
8
- Lines of code
- decreased by-1.39%
356
- Number of lines in readme file
- decreased by-10.64%
168
No dependency changes