diff --git a/README.md b/README.md index 1a983a2..c5c9efb 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A Vue.js responsive date range picker for hotels or date range selection, that d [https://northwalker.github.io/vue-hotel-datepicker/](https://northwalker.github.io/vue-hotel-datepicker/) -#### Running at development +#### Running in development environment ```git clone https://github.com/northwalker/vue-hotel-datepicker.git``` @@ -15,7 +15,6 @@ A Vue.js responsive date range picker for hotels or date range selection, that d ```npm run dev``` or ```yarn run dev``` - ## Installation / Usage #### HTML @@ -26,35 +25,47 @@ Download this repo and copy file ```/dist/vue-hotel-datepicker.min.js``` to ```/ ``` #### Javascript -Use ```npm``` or ```yarn``` add dependence to your project's ```package.json``` +Use ```npm``` or ```yarn``` install and add dependence to your project's ```package.json``` ```javascript -npm install https://github.com/northwalker/vue-hotel-datepicker.git +npm install 'https://github.com/northwalker/vue-hotel-datepicker.git' ``` - or - ```javascript -yarn add https://github.com/northwalker/vue-hotel-datepicker.git +yarn add 'https://github.com/northwalker/vue-hotel-datepicker.git' ``` -and import or require component to your vue app +import or require component to your app. +Vue file: ```javascript -import VueHotelDatePicker from '//vue-hotel-datepicker.min.js' +import VueHotelDatepicker from 'vue-hotel-datepicker' export default { + name: 'App' components: { - VueHotelDatePicker, + VueHotelDatepicker, + }, + data(){ + return { + datepickerId: 'datepicker-demo-id-01', + placeholder: 'placeholder demo 01' + } } + } ``` +HTML file: +```html + +``` ## Props/Options ### datePickerId - Type: `String` -- Default: `1` +- Default: `'datepickerId-' + new Date().getTime().toString()` + - simulate random id in default ### placeholder @@ -246,10 +257,10 @@ Gets the number of nights selected. Returns `0` otherwise. ## Events ### updateDateRange -When a new date is selected, trigger an event ```updateDateRange```, emit evnet and passing the new date to parent component. +When a new date is selected, ```VueHotelDatepicker``` will emit an event ```updateDateRange```, passing the new date range string and datepicker id to parent component. ### cancelUpdateDateRange -when a cancellation button click or occurred, trigger an event ```cancelUpdateDateRange```, emit event and notify parent component. +when a cancellation button click or occurred, ```VueHotelDatepicker``` will emit an event ```cancelUpdateDateRange```, passing datepicker id to notify parent component. ## Credits diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 1a8cff0..be73a04 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -6,7 +6,7 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin') config.devtool = '#source-map' config.output.libraryTarget = 'umd' -config.output.library = 'VueHotelDatePicker' +config.output.library = 'VueHotelDatepicker' config.entry = { // 'vue-hotel-datepicker': path.resolve(__dirnme, '../src/HotelDatePicker.vue'), 'vue-hotel-datepicker.min': path.resolve(__dirname, '../src/HotelDatePicker.vue') diff --git a/dist/vue-hotel-datepicker.min.js b/dist/vue-hotel-datepicker.min.js index 2cf01ce..502a061 100644 --- a/dist/vue-hotel-datepicker.min.js +++ b/dist/vue-hotel-datepicker.min.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueHotelDatePicker=e():t.VueHotelDatePicker=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=1)}([function(t,e){function n(t,e){var n=t[1]||"",a=t[3];if(!a)return n;if(e&&"function"==typeof btoa){var r=i(a);return[n].concat(a.sources.map(function(t){return"/*# sourceURL="+a.sourceRoot+t+" */"})).concat([r]).join("\n")}return[n].join("\n")}function i(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var i=n(e,t);return e[2]?"@media "+e[2]+"{"+i+"}":i}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},a=0;an.parts.length&&(i.parts.length=n.parts.length)}else{for(var o=[],a=0;a'+t.lang("day-names")[(1+n)%7]+"";return e}for(var i=0;i<7;i++)e+=''+t.lang("day-names")[i]+"";return e},t.prototype.getMonthDom=function(t){return document.getElementById(this.getMonthTableId(t))},t.prototype.getMonthName=function(t){return this.lang("month-names")[t]},t.prototype.getDatepickerId=function(){return"datepicker-"+this.generateId()},t.prototype.getMonthTableId=function(t){return"month-"+t+"-"+this.generateId()},t.prototype.getCloseButtonId=function(){return"close-"+this.generateId()},t.prototype.getTooltipId=function(){return"tooltip-"+this.generateId()},t.prototype.getNextMonth=function(t){var e=new Date(t.valueOf());return new Date(e.setMonth(e.getMonth()+1))},t.prototype.getPrevMonth=function(t){var e=new Date(t.valueOf());return new Date(e.setMonth(e.getMonth()-1))},t.prototype.getDateString=function(t,e){return void 0===e&&(e=this.format),a.a.format(t,e)},t.prototype.parseDate=function(t,e){return void 0===e&&(e=this.format),a.a.parse(t,e)},t.prototype.init=function(){this.parent=this.container?this.container:this.input.parentElement,this.start=!1,this.end=!1,this.minDays=this.minNights>1?this.minNights+1:2,this.maxDays=this.maxNights>0?this.maxNights+1:0,this.startDate&&"string"==typeof this.startDate&&(this.startDate=this.parseDate(this.startDate)),this.endDate&&"string"==typeof this.endDate&&(this.endDate=this.parseDate(this.endDate)),this.isTouchDevice()&&(this.hoveringTooltip=!1),this.isOpen=!1,this.changed=!1,this.createDom();var t=new Date;this.startDate&&this.compareMonth(t,this.startDate)<0&&(t=this.startDate),this.endDate&&this.compareMonth(this.getNextMonth(t),this.endDate)>0&&(t=this.getPrevMonth(this.endDate)),this.showMonth(t,1),this.showMonth(this.getNextMonth(t),2),this.topBarDefaultText(),this.disabledDates.length>0&&this.parseDisabledDates(),this.addListeners()},t.prototype.addListeners=function(){for(var t=this,e=this.datepicker.getElementsByClassName("datepicker__month-button--next"),n=0;n