vue-bootstrap-datetimepicker - npm Package Compare versions

Comparing version 3.1.3 to 4.0.0

CHANGELOG.md

 # Changelog
 
+## [4.0.0](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/3.1.2...4.0.0) (breaking)
+* Change:
+    - Component now sets the v-model value in same format as specified in config, previously it was moment string `2017-10-02T06:14:35.665Z` but now it should follow the format; for example if format is `DD/MM/YYYY` then v-model will be like `22/10/2017`
+    - `input-class` prop has been removed, you can always use Vue.js inbuilt [class](https://vuejs.org/v2/guide/class-and-style.html#With-Components) binding
+    ```html
+      <date-picker v-model="date" class="custom-input"></date-picker>
+    ```   
+    - Similarly `name`, `id`, `placeholder` and `required` props has been removed, you can still specify any number of attributes on component
+    ```html
+      <date-picker v-model="date" name="date-of-birth" id="js-date" placeholder="Select date" aria-required="true"></date-picker>
+    ```
+    
 ## [3.1.2](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/3.1.1...3.1.2)
@@ -7,3 +19,4 @@ * Revert: prevent double `dp-change` event
 * Fix: use as plugin
-* chore: generate two dist file, it means bower no longer supported.
+* Chore: generate two dist file.
+* Change: `dist` folder is no longer part of repo. it means bower no longer supported.
 
@@ -16,5 +29,5 @@ ## [3.1.1](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/3.1.0...3.1.1)
     - You can receive the events like this
-```html
-<date-picker v-model="date" @dp-hide="onHide"></date-picker>
-```
+    ```html
+    <date-picker v-model="date" @dp-hide="onHide"></date-picker>
+    ```
 
@@ -21,0 +34,0 @@ ## [3.0.0](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/2.4.3...3.0.0)

dist/vue-bootstrap-datetimepicker.js

@@ -89,2 +89,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var name = 'date-picker';
+  /* istanbul ignore else */
   if (typeof params === 'string') name = params;
@@ -106,3 +107,3 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_component_vue__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5d8ab300_hasScoped_false_node_modules_vue_loader_lib_selector_type_template_index_0_component_vue__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1a3fa83a_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_component_vue__ = __webpack_require__(7);
 var normalizeComponent = __webpack_require__(2)
@@ -113,2 +114,4 @@ /* script */
 
+/* template functional */
+  var __vue_template_functional__ = false
 /* styles */
@@ -122,3 +125,4 @@ var __vue_styles__ = null
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_component_vue__["a" /* default */],
-  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5d8ab300_hasScoped_false_node_modules_vue_loader_lib_selector_type_template_index_0_component_vue__["a" /* default */],
+  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1a3fa83a_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_component_vue__["a" /* default */],
+  __vue_template_functional__,
   __vue_styles__,
@@ -138,4 +142,5 @@ __vue_scopeId__,
 
-// this module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle
+// IMPORTANT: Do NOT use ES2015 features in this file.
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
 
@@ -145,2 +150,3 @@ module.exports = function normalizeComponent (
   compiledTemplate,
+  functionalTemplate,
   injectStyles,
@@ -169,4 +175,10 @@ scopeId,
     options.staticRenderFns = compiledTemplate.staticRenderFns
+    options._compiled = true
   }
 
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
   // scopedId
@@ -210,2 +222,3 @@ if (scopeId) {
       : options.beforeCreate
+
     if (!functional) {
@@ -217,2 +230,5 @@ // inject component registration as beforeCreate hook
     } else {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
       // register for functioal component in vue file
@@ -241,2 +257,4 @@ options.render = function renderWithStyleInjection (h, context) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_eonasdan_bootstrap_datetimepicker___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_eonasdan_bootstrap_datetimepicker__);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 //
@@ -248,10 +266,2 @@ //
 //
-//
-//
-//
-//
-//
-//
-//
-//
 
@@ -264,2 +274,3 @@ var jQuery = window.jQuery || __webpack_require__(4);
 
+// Events list without prefix
 // http://eonasdan.github.io/bootstrap-datetimepicker/Events/
@@ -285,28 +296,4 @@ var events = ['hide', 'show', 'change', 'error', 'update'];
     },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    inputClass: {
-      type: [String, Object],
-      default: ''
-    },
-    name: {
-      type: String,
-      default: 'datetime'
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    readOnly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     /**
-     * You can to set this to true when component is wrapped in input-group
+     * You can set this to true when component is wrapped in input-group
      */
@@ -316,5 +303,2 @@ wrap: {
       default: false
-    },
-    id: {
-      type: String
     }
@@ -331,2 +315,3 @@ },
     // Return early if date-picker is already loaded
+    /* istanbul ignore if */
     if (this.dp) return;
@@ -350,2 +335,3 @@ // Handle wrapped input
     // Free up memory
+    /* istanbul ignore else */
     if (this.dp) {
@@ -375,3 +361,3 @@ this.dp.destroy();
     config: function config(newConfig) {
-      this.dp && this.dp.options(Object.assign(this.dp.options(), newConfig));
+      this.dp && this.dp.options(_extends(this.dp.options(), newConfig));
     }
@@ -386,3 +372,4 @@ },
     onChange: function onChange(event) {
-      this.$emit('input', event.date || null);
+      var formattedDate = event.date ? event.date.format(this.dp.format()) : null;
+      this.$emit('input', formattedDate);
     },
@@ -398,3 +385,3 @@
       events.forEach(function (name) {
-        _this.elem.on('dp.' + name, function () {
+        _this.elem.on("dp." + name, function () {
           for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
@@ -404,3 +391,3 @@ args[_key] = arguments[_key];
 
-          _this.$emit.apply(_this, ['dp-' + name].concat(args));
+          _this.$emit.apply(_this, ["dp-" + name].concat(args));
         });
@@ -435,3 +422,3 @@ });
 "use strict";
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{staticClass:"form-control input",class:_vm.inputClass,attrs:{"type":"text","id":_vm.id,"name":_vm.name,"placeholder":_vm.placeholder,"required":_vm.required,"readOnly":_vm.readOnly,"disabled":_vm.disabled}})}
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{staticClass:"form-control",attrs:{"type":"text"}})}
 var staticRenderFns = []
@@ -438,0 +425,0 @@ var esExports = { render: render, staticRenderFns: staticRenderFns }

dist/vue-bootstrap-datetimepicker.min.js

@@ -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"])}(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}),n.d(t,"DatetimePickerPlugin",function(){return o});var r=n(1);n.d(t,"component",function(){return r.a});var o=function(e,t){var n="date-picker";"string"==typeof t&&(n=t),e.component(n,r.a)};r.a.install=o,t.default=r.a},function(e,t,n){"use strict";var r=n(3),o=n(7),i=n(2),a=i(r.a,o.a,null,null,null);t.a=a.exports},function(e,t){e.exports=function(e,t,n,r,o){var i,a=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(i=e,a=e.default);var u="function"==typeof a?a.options:a;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns),r&&(u._scopeId=r);var d;if(o?(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__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=d):n&&(d=n),d){var c=u.functional,p=c?u.render:u.beforeCreate;c?u.render=function(e,t){return d.call(t),p(e,t)}:u.beforeCreate=p?[].concat(p,d):[d]}return{esModule:i,exports:a,options:u}}},function(e,t,n){"use strict";var r=n(6),o=(n.n(r),window.jQuery||n(4)),i=window.moment||n(5),a=["hide","show","change","error","update"];t.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 i}},config:{type:Object,default:function(){return{}}},placeholder:{type:String,default:""},inputClass:{type:[String,Object],default:""},name:{type:String,default:"datetime"},required:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},wrap:{type:Boolean,default:!1},id:{type:String}},data:function(){return{dp:null,elem:null}},mounted:function(){if(!this.dp){var e=this.wrap?this.$el.parentNode:this.$el;this.elem=o(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()}},beforeDestroy:function(){this.dp&&(this.dp.destroy(),this.dp=null,this.elem=null)},watch:{value:function(e){this.dp&&this.dp.date(e||null)},config:function(e){this.dp&&this.dp.options(Object.assign(this.dp.options(),e))}},methods:{onChange:function(e){this.$emit("input",e.date||null)},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))})})}}}},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;return(e._self._c||t)("input",{staticClass:"form-control input",class:e.inputClass,attrs:{type:"text",id:e.id,name:e.name,placeholder:e.placeholder,required:e.required,readOnly:e.readOnly,disabled:e.disabled}})},o=[],i={render:r,staticRenderFns:o};t.a=i}])});
+!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"])}(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}),n.d(t,"DatetimePickerPlugin",function(){return o});var r=n(1);n.d(t,"component",function(){return r.a});var o=function(e,t){var n="date-picker";"string"==typeof t&&(n=t),e.component(n,r.a)};r.a.install=o,t.default=r.a},function(e,t,n){"use strict";var r=n(3),o=n(7),i=n(2),a=i(r.a,o.a,!1,null,null,null);t.a=a.exports},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 p;if(i?(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(i)},c._ssrRegister=p):r&&(p=r),p){var d=c.functional,f=d?c.render:c.beforeCreate;d?(c._injectStyles=p,c.render=function(e,t){return p.call(t),f(e,t)}):c.beforeCreate=f?[].concat(f,p):[p]}return{esModule:a,exports:s,options:c}}},function(e,t,n){"use strict";var r=n(6),o=(n.n(r),Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}),i=window.jQuery||n(4),a=window.moment||n(5),s=["hide","show","change","error","update"];t.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 a}},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=i(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()}},beforeDestroy:function(){this.dp&&(this.dp.destroy(),this.dp=null,this.elem=null)},watch:{value:function(e){this.dp&&this.dp.date(e||null)},config:function(e){this.dp&&this.dp.options(o(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;s.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))})})}}}},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;return(e._self._c||t)("input",{staticClass:"form-control",attrs:{type:"text"}})},o=[],i={render:r,staticRenderFns:o};t.a=i}])});

package.json

 {
   "name": "vue-bootstrap-datetimepicker",
-  "version": "3.1.3",
+  "version": "4.0.0",
   "description": "Vue.js component for bootstrap-datetimepicker",
@@ -26,2 +26,3 @@ "main": "dist/vue-bootstrap-datetimepicker.js",
     "test": "node ./node_modules/jest/bin/jest.js",
+    "test:watch": "npm run test -- --watch --onlyChanged --notify",
     "lint": "eslint --ext .js,.vue --fix src",
@@ -39,20 +40,21 @@ "start": "npm run dev",
     "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.6.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-env": "^1.6.1",
     "bootstrap": "^3.3.7",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.4",
-    "file-loader": "^0.11.2",
+    "file-loader": "^1.1.5",
     "html-webpack-plugin": "^2.30.1",
     "jest": "^21.2.1",
-    "jest-vue": "^0.7.2",
+    "jest-vue": "^0.8.1",
     "jquery": "^3.2.1",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.19.0",
     "unminified-webpack-plugin": "^1.2.0",
     "vee-validate": "^2.0.0-rc.12",
-    "vue": "^2.4.2",
-    "vue-loader": "^13.0.4",
-    "vue-template-compiler": "^2.4.2",
-    "vue-test-utils": "^1.0.0-beta.1",
-    "webpack": "^3.5.3",
-    "webpack-dev-server": "^2.7.1"
+    "vue": "^2.5.2",
+    "vue-loader": "^13.3.0",
+    "vue-template-compiler": "^2.5.2",
+    "vue-test-utils": "^1.0.0-beta.2",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.2"
   },
@@ -59,0 +61,0 @@ "peerDependencies": {

README.md

@@ -13,11 +13,4 @@ # Vue-Bootstrap-DatetimePicker
 
-## Installation
-```bash
-# npm
-npm install vue-bootstrap-datetimepicker --save
+## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/zupazg2u/)
 
-# Yarn
-yarn add vue-bootstrap-datetimepicker
-```
-
 ## Features
@@ -33,4 +26,12 @@ * Reactive ``v-model`` value
 
+## Installation
+```bash
+# npm
+npm install vue-bootstrap-datetimepicker --save
+
+# Yarn
+yarn add vue-bootstrap-datetimepicker
+```
+
 ## Requirements
-* Vue.js ^2.4.4
 * Bootstrap ^3.3.7 (only css)
@@ -46,3 +47,3 @@ * jQuery >=1.8.3 || ^3.2.1
       <div class="col-md-12">
-        <date-picker v-model="date"></date-picker>
+        <date-picker v-model="date" :config="config"></date-picker>
       </div>
@@ -66,3 +67,7 @@ </div>
       return {
-        date: new Date(),       
+        date: new Date(),
+        config: {
+          format: 'DD/MM/YYYY',
+          useCurrent: false,
+        }       
       }
@@ -94,10 +99,3 @@ },
 | config          | Object             | `{}` | Datetime picker configuration [options](http://eonasdan.github.io/bootstrap-datetimepicker/Options/)|
-| placeholder     | String             | `''` | Set placeholder on input |
-| input-class     | String / Object    | `''` | Add CSS class to input  |
-| name            | String             | `datetime` | Set input field name  |
-| required        | Boolean            | `false` | Make input field required |
-| read-only       | Boolean            | `false` | Make input field read-only |
-| disabled        | Boolean            | `false` | Make input field disabled |
 | wrap            | Boolean            | `false` | Set this to true when wrapped in 'input-group' |
-| id              | String             | `''` | Set input field id |
 
@@ -124,3 +122,3 @@ ## Events
 <!-- Vue js -->
-<script src="https://unpkg.com/vue@2.4/dist/vue.min.js"></script>
+<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
 <!-- Lastly add this package -->
@@ -135,3 +133,3 @@ <script src="https://unpkg.com/vue-bootstrap-datetimepicker"></script>
     <div class="col-md-12">
-      <date-picker v-model="date"></date-picker>
+      <date-picker v-model="date" name="date-of-birth"></date-picker>
     </div>
@@ -181,18 +179,17 @@ </div>
 * Clone this repo
-* Make sure you have node-js >=6.10 and [yarn](https://yarnpkg.com) >=1.x
-* Install dependencies
-``
-yarn install
-``
-* Run webpack dev server
-``
-yarn start
-``
-* This should open the demo page at ``http://localhost:8080``
+* 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
 
 
+### Testing
+* This package is using [Jest](https://github.com/facebook/jest) and [vue-test-utils](https://github.com/vuejs/vue-test-utils) for testing.
+* Tests can be found in `__test__` folder.
+* Execute tests with this command - `yarn test`
+
 ## Changelog
-Changelog for each release can be found [here](CHANGELOG.md)
+Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
 
 ## License
 [MIT](LICENSE.txt) License

src/index.js

@@ -5,2 +5,3 @@ import component from './component.vue';
   let name = 'date-picker';
+  /* istanbul ignore else */
   if (typeof params === 'string') name = params;
@@ -7,0 +8,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

34029

decreased by-86.19%

Dev dependency count

21

increased by5%

Number of package files

8

decreased by-20%

Lines of code

367

decreased by-4.18%

Number of lines in readme file

188

decreased by-1.57%

No dependency changes