├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── ToolsPresentation.vue ├── assets └── logo.png ├── components ├── base_select.vue ├── date_input.vue ├── month_selector.vue ├── number_increment.vue ├── range_selectable.vue ├── range_selector.vue ├── time_selector.vue └── validation.vue ├── date_picker.vue ├── date_picker_arrows.vue ├── date_range_picker.vue ├── date_range_picker_suggestions.vue ├── format ├── extractYMDhms.js ├── formatDDMMMMYYYYHHhmm.js ├── formatDDMMMMYYYYHHhmmss.js ├── formatDDMMYYYY.js ├── formatDDMMYYYYDDMMYYYY.js ├── formatDDMMYYYYHHmmss.js ├── formatHHmm.js ├── formatHHmm2.js ├── formatHHmmss.js ├── formatLLLL.js ├── formatMMDDYYYY.js ├── formatYYYYMMDD.js ├── formatYYYYMMDD2.js ├── formatYYYYMMDDHHmm.js ├── formatYYYYMMDDHHmmss.js └── formatYYYYMMDDHHmmss2.js ├── main.js ├── parse ├── getDateFromDDMMYYYY.js ├── getDateFromDDMMYYYYHHmmss.js ├── getDateFromYYYYMMDD.js ├── getDateFromYYYYMMDD2.js ├── getDateFromYYYYMMDDHHmmss.js ├── getRangeFromDDMMYYYYDDMMYYYY.js ├── getTimeFromHHmm.js └── getTimeFromHHmmss.js ├── time_picker.vue └── utils ├── capitalize.js └── uuid.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Antoine Stollsteiner 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-date-tools 2 | VueJS Date Components based on the date-fns library 3 | 4 | [Click Here to Try the Live Demo](https://misterfresh.github.io/vue-date-tools/) 5 | 6 | ## Best features: 7 | ### Lightweight and almost no dependencies 8 | No dependencies other than the lightweight date-fns library! All other VueJS compatible datepickers I could find until now used JQuery, Bootstrap, and Moment JS. Vue Date Tools is the best starting point for performance in Date components. 9 | 10 | ### Subcomponents are exposed for maximum flexibility 11 | Mix and match sub-components such as the RangeSelector or the NumberIncrement to create your own VueJS datepicker that matches your specific requirements! 12 | 13 | ### Easy to customize and style 14 | VueJS date component libraries that present themselves as "plug and play" are in my experience quite difficult to style and customize for a specific project. You *can* use the provided Example Date Components as is, but Vue Date Tools is more intended as a toolbox for date components where the hard parts have already been solved. 15 | 16 | ### Bi-directional components for better user experience 17 | Users also have the option to directly edit the date in the input to update the state. 18 | 19 | ### Uses Javascript Native Date object under the hood. 20 | 21 | ## Example Components: 22 | 23 | ### VueJS DatePicker with Date and Time selection 24 | ### VueJS DatePicker with Navigation arrows 25 | ### DateRange Picker to select a duration 26 | ### DateRange Picker with a list of prepared duration suggestions 27 | ### Simple TimePicker to select a time 28 | 29 | ## Project setup 30 | ``` 31 | npm install 32 | ``` 33 | 34 | ### Compiles and hot-reloads for development 35 | ``` 36 | npm run serve 37 | ``` 38 | 39 | ### Compiles and minifies for production 40 | ``` 41 | npm run build 42 | ``` 43 | 44 | ### Lints and fixes files 45 | ``` 46 | npm run lint 47 | ``` 48 | 49 | ### Customize configuration 50 | See [Configuration Reference](https://cli.vuejs.org/config/). 51 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-date-tools", 3 | "version": "0.1.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.4.3", 12 | "date-fns": "^2.8.1", 13 | "lodash.debounce": "^4.0.8", 14 | "vue": "^2.6.10" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^4.1.0", 18 | "@vue/cli-plugin-eslint": "^4.1.0", 19 | "@vue/cli-service": "^4.1.0", 20 | "babel-eslint": "^10.0.3", 21 | "eslint": "^5.16.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "vue-template-compiler": "^2.6.10" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "rules": {}, 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | } 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/misterfresh/vue-date-tools/d43d17e2385dc9770137860503610a82ca5d8a2f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | VueJS Date Tools: VueJS date components using date-fns 9 | 23 | 24 | 25 |

VueJS Date Tools

26 |

Lightweight VueJS date components using date-fns

27 |

View the source code

 28 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/ToolsPresentation.vue: -------------------------------------------------------------------------------- 1 | 63 | 114 | 140 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/misterfresh/vue-date-tools/d43d17e2385dc9770137860503610a82ca5d8a2f/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/base_select.vue: -------------------------------------------------------------------------------- 1 | 33 | 84 | 163 | -------------------------------------------------------------------------------- /src/components/date_input.vue: -------------------------------------------------------------------------------- 1 | 17 | 80 | 129 | -------------------------------------------------------------------------------- /src/components/month_selector.vue: -------------------------------------------------------------------------------- 1 | 32 | 88 | 138 | 139 | -------------------------------------------------------------------------------- /src/components/number_increment.vue: -------------------------------------------------------------------------------- 1 | 16 | 35 | 67 | -------------------------------------------------------------------------------- /src/components/range_selectable.vue: -------------------------------------------------------------------------------- 1 | 35 | 127 | 204 | -------------------------------------------------------------------------------- /src/components/range_selector.vue: -------------------------------------------------------------------------------- 1 | 26 | 95 | 163 | -------------------------------------------------------------------------------- /src/components/time_selector.vue: -------------------------------------------------------------------------------- 1 | 57 | 96 | 141 | 142 | -------------------------------------------------------------------------------- /src/components/validation.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 52 | 53 | -------------------------------------------------------------------------------- /src/date_picker.vue: -------------------------------------------------------------------------------- 1 | 52 | 163 | 294 | -------------------------------------------------------------------------------- /src/date_picker_arrows.vue: -------------------------------------------------------------------------------- 1 | 53 | 173 | 383 | -------------------------------------------------------------------------------- /src/date_range_picker.vue: -------------------------------------------------------------------------------- 1 | 112 | 285 | 503 | -------------------------------------------------------------------------------- /src/date_range_picker_suggestions.vue: -------------------------------------------------------------------------------- 1 | 125 | 305 | 539 | -------------------------------------------------------------------------------- /src/format/extractYMDhms.js: -------------------------------------------------------------------------------- 1 | import getSeconds from "date-fns/getSeconds"; 2 | import getMonth from "date-fns/getMonth"; 3 | import getMinutes from "date-fns/getMinutes"; 4 | import getDate from "date-fns/getDate"; 5 | import getYear from "date-fns/getYear"; 6 | import getHours from "date-fns/getHours"; 7 | 8 | export default function extractYMDhms(date){ 9 | if(!date || !(date instanceof Date)){ 10 | return null 11 | } 12 | const year = getYear(date) 13 | let month = getMonth(date) +1 14 | if(month < 10) { 15 | month = '0' + month 16 | } 17 | let day = getDate(date) 18 | if(day < 10){ 19 | day = '0' + day 20 | } 21 | let hours = getHours(date) 22 | if(hours < 10){ 23 | hours = '0' + hours 24 | } 25 | let minutes = getMinutes(date) 26 | if(minutes < 10){ 27 | minutes = '0' + minutes 28 | } 29 | let seconds = getSeconds(date) 30 | if(seconds < 10){ 31 | seconds = '0' + seconds 32 | } 33 | return { 34 | year, month, day, hours, minutes, seconds 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/format/formatDDMMMMYYYYHHhmm.js: -------------------------------------------------------------------------------- 1 | // DD MMMM YYYY - HH[h]mm 2 | 3 | import getYear from 'date-fns/getYear' 4 | import getMonth from 'date-fns/getMonth' 5 | import getDate from 'date-fns/getDate' 6 | import getHours from 'date-fns/getHours' 7 | import getMinutes from 'date-fns/getMinutes' 8 | import getSeconds from 'date-fns/getSeconds' 9 | 10 | export default function formatDDMMMMYYYYHHhmm(date){ 11 | 12 | if(!date || !(date instanceof Date)){ 13 | return '' 14 | } 15 | const year = getYear(date) 16 | let month = getMonth(date) 17 | const months = ('january_february_march_april_may_june_july_august_september_october_november_december').split('_') 18 | month = months[month] 19 | 20 | let day = getDate(date) 21 | if(day < 10){ 22 | day = '0' + day 23 | } 24 | let hours = getHours(date) 25 | if(hours < 10){ 26 | hours = '0' + hours 27 | } 28 | let minutes = getMinutes(date) 29 | if(minutes < 10){ 30 | minutes = '0' + minutes 31 | } 32 | let seconds = getSeconds(date) 33 | if(seconds < 10){ 34 | seconds = '0' + seconds 35 | } 36 | return `${day} ${month} ${year} - ${hours}h${minutes}` 37 | } 38 | -------------------------------------------------------------------------------- /src/format/formatDDMMMMYYYYHHhmmss.js: -------------------------------------------------------------------------------- 1 | // DD MMMM YYYY - HH:mm:ss 2 | 3 | import getYear from 'date-fns/getYear' 4 | import getMonth from 'date-fns/getMonth' 5 | import getDate from 'date-fns/getDate' 6 | import getHours from 'date-fns/getHours' 7 | import getMinutes from 'date-fns/getMinutes' 8 | import getSeconds from 'date-fns/getSeconds' 9 | 10 | export default function formatDDMMMMYYYYHHhmmss(date){ 11 | 12 | if(!date || !(date instanceof Date)){ 13 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 14 | date = new Date(date) 15 | } else { 16 | return '' 17 | } 18 | } 19 | const year = getYear(date) 20 | let month = getMonth(date) 21 | const months = ('january_february_march_april_may_june_july_august_september_october_november_december').split('_') 22 | month = months[month] 23 | 24 | let day = getDate(date) 25 | if(day < 10){ 26 | day = '0' + day 27 | } 28 | let hours = getHours(date) 29 | if(hours < 10){ 30 | hours = '0' + hours 31 | } 32 | let minutes = getMinutes(date) 33 | if(minutes < 10){ 34 | minutes = '0' + minutes 35 | } 36 | let seconds = getSeconds(date) 37 | if(seconds < 10){ 38 | seconds = '0' + seconds 39 | } 40 | return `${day} ${month} ${year} - ${hours}:${minutes}:${seconds}` 41 | } 42 | -------------------------------------------------------------------------------- /src/format/formatDDMMYYYY.js: -------------------------------------------------------------------------------- 1 | // DD/MM/YYYY 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatDDMMYYYY(date){ 6 | if(!date || !(date instanceof Date)){ 7 | return '' 8 | } 9 | let {year, month, day} = extractYMDhms(date) 10 | 11 | return `${day}/${month}/${year}` 12 | } 13 | -------------------------------------------------------------------------------- /src/format/formatDDMMYYYYDDMMYYYY.js: -------------------------------------------------------------------------------- 1 | // DD/MM/YYYY - DD/MM/YYYY 2 | 3 | import formatDDMMYYYY from './formatDDMMYYYY' 4 | 5 | export default function formatDDMMYYYYDDMMYYYY(dateRange){ 6 | if(!dateRange || !Array.isArray(dateRange) || dateRange.length !== 2){ 7 | return '' 8 | } 9 | const startDate = dateRange[0] 10 | const endDate = dateRange[1] 11 | 12 | return `${formatDDMMYYYY(startDate)} - ${formatDDMMYYYY(endDate)}` 13 | } 14 | 15 | -------------------------------------------------------------------------------- /src/format/formatDDMMYYYYHHmmss.js: -------------------------------------------------------------------------------- 1 | // DD/MM/YYYY HH:mm:ss 2 | 3 | import extractYMDhms from "./extractYMDhms" 4 | 5 | export default function formatDDMMYYYYHHmmss(date){ 6 | 7 | if(!date || !(date instanceof Date)){ 8 | return '' 9 | } 10 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 11 | return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}` 12 | } 13 | -------------------------------------------------------------------------------- /src/format/formatHHmm.js: -------------------------------------------------------------------------------- 1 | // HH:mm 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatHHmm(date){ 6 | 7 | if(!date || !(date instanceof Date)){ 8 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 9 | date = new Date(date) 10 | } else { 11 | return '' 12 | } 13 | } 14 | let {hours, minutes} = extractYMDhms(date) 15 | return `${hours}:${minutes}` 16 | } 17 | -------------------------------------------------------------------------------- /src/format/formatHHmm2.js: -------------------------------------------------------------------------------- 1 | // HHmm 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatHHmm(date){ 6 | 7 | if(!date || !(date instanceof Date)){ 8 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 9 | date = new Date(date) 10 | } else { 11 | return '' 12 | } 13 | } 14 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 15 | return `${hours}${minutes}` 16 | } 17 | -------------------------------------------------------------------------------- /src/format/formatHHmmss.js: -------------------------------------------------------------------------------- 1 | // HHmm 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatHHmmss(date){ 6 | 7 | if(!date || !(date instanceof Date)){ 8 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 9 | date = new Date(date) 10 | } else { 11 | return '' 12 | } 13 | } 14 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 15 | return `${hours}${minutes}${seconds}` 16 | } 17 | -------------------------------------------------------------------------------- /src/format/formatLLLL.js: -------------------------------------------------------------------------------- 1 | // DD MMMM YYYY - HH:mm:ss 2 | 3 | import getYear from 'date-fns/getYear' 4 | import getMonth from 'date-fns/getMonth' 5 | import getDate from 'date-fns/getDate' 6 | import getHours from 'date-fns/getHours' 7 | import getMinutes from 'date-fns/getMinutes' 8 | 9 | import capitalize from './../utils/capitalize' 10 | import getDay from "date-fns/getDay" 11 | 12 | export default function formatLLLL(date){ 13 | 14 | if(!date || !(date instanceof Date)){ 15 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 16 | date = new Date(date) 17 | } else { 18 | return '' 19 | } 20 | } 21 | const year = getYear(date) 22 | let month = getMonth(date) 23 | const months = ('january_february_march_april_may_june_july_august_september_october_november_december').split('_') 24 | month = months[month] 25 | 26 | let day = getDate(date) 27 | const daysOfWeek = ('monday_tuesday_wednesday_thursday_friday_saturday_sunday').split('_') 28 | let dayOfWeek = daysOfWeek[getDay(date)] 29 | if(day < 10){ 30 | day = '0' + day 31 | } 32 | let hours = getHours(date) 33 | if(hours < 10){ 34 | hours = '0' + hours 35 | } 36 | let minutes = getMinutes(date) 37 | if(minutes < 10){ 38 | minutes = '0' + minutes 39 | } 40 | 41 | return locale === 'en' ? `${capitalize(dayOfWeek)}, ${capitalize(month)} ${day}, ${year} - ${hours}:${minutes}` : `${capitalize(dayOfWeek)} ${day} ${month} ${year} - ${hours}:${minutes}` 42 | } 43 | -------------------------------------------------------------------------------- /src/format/formatMMDDYYYY.js: -------------------------------------------------------------------------------- 1 | // MM DD, YYYY 2 | 3 | import getYear from 'date-fns/getYear' 4 | import getMonth from 'date-fns/getMonth' 5 | import getDate from 'date-fns/getDate' 6 | import capitalize from './../utils/capitalize' 7 | 8 | export default function formatMMDDYYYY(date){ 9 | 10 | if(!date || !(date instanceof Date)){ 11 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 12 | date = new Date(date) 13 | } else { 14 | return '' 15 | } 16 | } 17 | const year = getYear(date) 18 | let month = getMonth(date) 19 | const months = ('jan._feb._mar._apr._may_june_july_aug._sept._oct._nov._dec.').split('_') 20 | month = months[month] 21 | 22 | let day = getDate(date) 23 | 24 | return locale === 'en' ? `${capitalize(month)} ${day}, ${year}` : `${day} ${capitalize(month)} ${year}` 25 | } 26 | -------------------------------------------------------------------------------- /src/format/formatYYYYMMDD.js: -------------------------------------------------------------------------------- 1 | // YYYY-MM-DD 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatYYYYMMDD(date){ 6 | if(!date || !(date instanceof Date)){ 7 | return '' 8 | } 9 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 10 | 11 | return `${year}-${month}-${day}` 12 | } 13 | -------------------------------------------------------------------------------- /src/format/formatYYYYMMDD2.js: -------------------------------------------------------------------------------- 1 | // YYYYMMDD 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatYYYYMMDD2(date){ 6 | if(!date || !(date instanceof Date)){ 7 | return '' 8 | } 9 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 10 | 11 | return `${year}${month}${day}` 12 | } 13 | -------------------------------------------------------------------------------- /src/format/formatYYYYMMDDHHmm.js: -------------------------------------------------------------------------------- 1 | // YYYY-MM-DD HH:mm 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatYYYYMMDDHHmm(date){ 6 | if(!date || !(date instanceof Date)){ 7 | return '' 8 | } 9 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 10 | return `${year}-${month}-${day} ${hours}:${minutes}` 11 | } 12 | -------------------------------------------------------------------------------- /src/format/formatYYYYMMDDHHmmss.js: -------------------------------------------------------------------------------- 1 | // YYYYMMDDHHmmss 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatYYYYMMDDHHmmss(date){ 6 | if(!date || !(date instanceof Date)){ 7 | return '' 8 | } 9 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 10 | return `${year}${month}${day}${hours}${minutes}${seconds}` 11 | } 12 | -------------------------------------------------------------------------------- /src/format/formatYYYYMMDDHHmmss2.js: -------------------------------------------------------------------------------- 1 | // YYYY-MM-DD HH:mm:ss 2 | 3 | import extractYMDhms from './extractYMDhms' 4 | 5 | export default function formatYYYYMMDDHHmmss2(date){ 6 | if(!date || !(date instanceof Date)){ 7 | if(!!date && (typeof date === 'string' || date instanceof String) && (new Date(date)) instanceof Date ){ 8 | date = new Date(date) 9 | } else { 10 | return '' 11 | } 12 | } 13 | let {year, month, day, hours, minutes, seconds} = extractYMDhms(date) 14 | return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` 15 | } 16 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ToolsPresentation from './ToolsPresentation.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(ToolsPresentation), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /src/parse/getDateFromDDMMYYYY.js: -------------------------------------------------------------------------------- 1 | // DD/MM/YYYY 2 | 3 | export default function getDateFromDDMMYYYY(timestamp){ 4 | if(!timestamp){ 5 | return null 6 | } 7 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 8 | timestamp = timestamp + '' 9 | } 10 | if(timestamp.length > 10 || timestamp.length < 8){ 11 | return null 12 | } 13 | let dateParts = timestamp.split('/') 14 | if(dateParts.length !== 3) { 15 | return null 16 | } 17 | const day = parseInt(dateParts[0]) 18 | const month = parseInt(dateParts[1]) - 1 19 | const year = parseInt(dateParts[2]) 20 | 21 | if(isNaN(day) || day < 0 || day > 31 || isNaN(month) || month < 0 || month > 11 || isNaN(year) || year < 1980 || year > 2100 ){ 22 | return null 23 | } 24 | 25 | return new Date( 26 | year, 27 | month, 28 | day 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/parse/getDateFromDDMMYYYYHHmmss.js: -------------------------------------------------------------------------------- 1 | // DD/MM/YYYY HH:mm:ss 2 | 3 | export default function getDateFromDDMMYYYYHHmmss(timestamp){ 4 | if(!timestamp){ 5 | return null 6 | } 7 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 8 | timestamp = timestamp + '' 9 | } 10 | if(timestamp.length !== 19){ 11 | return null 12 | } 13 | 14 | let parts = timestamp.split(' ') 15 | if(parts.length !== 2) { 16 | return null 17 | } 18 | 19 | let dateParts = parts[0]['split']('/') 20 | if(dateParts.length !== 3){ 21 | return null 22 | } 23 | 24 | let timeParts = parts[1]['split'](':') 25 | if(timeParts.length !== 3){ 26 | return null 27 | } 28 | 29 | const day = parseInt(dateParts[0]) 30 | const month = parseInt(dateParts[1]) - 1 31 | const year = parseInt(dateParts[2]) 32 | 33 | const hours = parseInt(timeParts[0]) 34 | const minutes = parseInt(timeParts[1]) 35 | const seconds = parseInt(timeParts[2]) 36 | 37 | if(isNaN(day) || day < 0 || day > 31 || isNaN(month) || month < 0 || month > 11 || isNaN(year) || year < 1980 || year > 2100 || isNaN(hours) || hours < 0 || hours > 23 || isNaN(minutes) || minutes < 0 || minutes > 59 || isNaN(seconds) || seconds < 0 || seconds > 59){ 38 | return null 39 | } 40 | 41 | return new Date( year, month, day, hours, minutes, seconds ) 42 | } 43 | -------------------------------------------------------------------------------- /src/parse/getDateFromYYYYMMDD.js: -------------------------------------------------------------------------------- 1 | // YYYY-MM-DD 2 | 3 | export default function getDateFromYYYYMMDD(timestamp){ 4 | if(!timestamp){ 5 | return null 6 | } 7 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 8 | timestamp = timestamp + '' 9 | } 10 | if(timestamp.length !== 10){ 11 | return null 12 | } 13 | let dateParts = timestamp.split('-') 14 | if(dateParts.length !== 3) { 15 | return null 16 | } 17 | const day = parseInt(dateParts[2]) 18 | const month = parseInt(dateParts[1]) - 1 19 | const year = parseInt(dateParts[0]) 20 | 21 | if(isNaN(day) || day < 0 || day > 31 || isNaN(month) || month < 0 || month > 11 || isNaN(year) || year < 1980 || year > 2100 ){ 22 | return null 23 | } 24 | 25 | return new Date( 26 | year, 27 | month, 28 | day 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/parse/getDateFromYYYYMMDD2.js: -------------------------------------------------------------------------------- 1 | // YYYYMMDD 2 | 3 | export default function getDateFromYYYYMMDD2(timestamp){ 4 | if(!timestamp){ 5 | return null 6 | } 7 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 8 | timestamp = timestamp + '' 9 | } 10 | timestamp = timestamp.trim() 11 | if(timestamp.length !== 8){ 12 | if(timestamp.length > 8){ 13 | timestamp = timestamp.slice(0,8) 14 | } else { 15 | return null 16 | } 17 | } 18 | 19 | const day = parseInt(timestamp.slice(6,8)) 20 | const month = parseInt(timestamp.slice(4,6)) - 1 21 | const year = parseInt(timestamp.slice(0,4)) 22 | 23 | if(isNaN(day) || day < 0 || day > 31 || isNaN(month) || month < 0 || month > 11 || isNaN(year) || year < 1980 || year > 2100 ){ 24 | return null 25 | } 26 | 27 | return new Date( 28 | year, 29 | month, 30 | day 31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /src/parse/getDateFromYYYYMMDDHHmmss.js: -------------------------------------------------------------------------------- 1 | // YYYYMMDDHHmmss 2 | 3 | export default function getDateFromYYYYMMDDHHmmss(timestamp){ 4 | 5 | if(!timestamp){ 6 | return null 7 | } 8 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 9 | timestamp = timestamp + '' 10 | } 11 | if(timestamp.length !== 14){ 12 | return null 13 | } 14 | 15 | const year = parseInt(timestamp.slice(0, 4)) 16 | const month = parseInt(timestamp.slice(4, 6)) - 1 17 | const day = parseInt(timestamp.slice(6, 8)) 18 | const hours = parseInt(timestamp.slice(8, 10)) 19 | const minutes = parseInt(timestamp.slice(10, 12)) 20 | const seconds = parseInt(timestamp.slice(12, 14)) 21 | 22 | if(isNaN(day) || day < 0 || day > 31 || isNaN(month) || month < 0 || month > 13 || isNaN(year) || year < 1980 || year > 2100 || isNaN(hours) || hours < 0 || hours > 24 || isNaN(minutes) || minutes < 0 || minutes > 60 || isNaN(seconds) || seconds < 0 || seconds > 60){ 23 | return null 24 | } 25 | 26 | return new Date( year, month, day, hours, minutes, seconds ) 27 | } 28 | -------------------------------------------------------------------------------- /src/parse/getRangeFromDDMMYYYYDDMMYYYY.js: -------------------------------------------------------------------------------- 1 | // DD/MM/YYYY - DD/MM/YYYY 2 | 3 | import getDateFromDDMMYYYY from './getDateFromDDMMYYYY' 4 | 5 | export default function getRangeFromDDMMYYYYDDMMYYYY(rangeString){ 6 | if(!rangeString){ 7 | return null 8 | } 9 | if(!( typeof rangeString === 'string' || rangeString instanceof String)){ 10 | rangeString = rangeString + '' 11 | } 12 | if(rangeString.length < 17){ 13 | return null 14 | } 15 | let rangeParts = rangeString.split('-') 16 | if(rangeParts.length !== 2) { 17 | return null 18 | } 19 | 20 | const startDate = getDateFromDDMMYYYY((rangeParts[0]).trim()) 21 | const endDate = getDateFromDDMMYYYY((rangeParts[1]).trim()) 22 | 23 | if(!startDate || !(startDate instanceof Date) || !endDate || !(endDate instanceof Date)){ 24 | return null 25 | } 26 | 27 | return startDate < endDate ? [startDate, endDate] : [endDate, startDate] 28 | } 29 | -------------------------------------------------------------------------------- /src/parse/getTimeFromHHmm.js: -------------------------------------------------------------------------------- 1 | // HHmmss 2 | 3 | import setHours from 'date-fns/setHours' 4 | import setMinutes from 'date-fns/setMinutes' 5 | import setSeconds from 'date-fns/setSeconds' 6 | 7 | export default function getTimeFromHHmm(timestamp){ 8 | if(!timestamp){ 9 | return null 10 | } 11 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 12 | timestamp = timestamp + '' 13 | } 14 | 15 | let timeParts = timestamp.split(':') 16 | 17 | if(timeParts.length !== 2){ 18 | return null 19 | } 20 | 21 | const hours = parseInt((timeParts[0]).trim()) 22 | const minutes = parseInt((timeParts[1]).trim()) 23 | 24 | if(isNaN(hours) || hours < 0 || hours > 23 || isNaN(minutes) || minutes < 0 || minutes > 59 ){ 25 | return null 26 | } 27 | 28 | return setSeconds( setMinutes( setHours(new Date(), hours), minutes), 0) 29 | } 30 | -------------------------------------------------------------------------------- /src/parse/getTimeFromHHmmss.js: -------------------------------------------------------------------------------- 1 | // HHmmss 2 | 3 | import setHours from 'date-fns/setHours' 4 | import setMinutes from 'date-fns/setMinutes' 5 | import setSeconds from 'date-fns/setSeconds' 6 | 7 | export default function getTimeFromHHmmss(timestamp){ 8 | if(!timestamp){ 9 | return null 10 | } 11 | if(!( typeof timestamp === 'string' || timestamp instanceof String)){ 12 | timestamp = timestamp + '' 13 | } 14 | timestamp = timestamp.trim() 15 | if(timestamp.length !== 6){ 16 | return null 17 | } 18 | 19 | const hours = parseInt(timestamp.slice(0,2)) 20 | const minutes = parseInt(timestamp.slice(2,4)) 21 | const seconds = parseInt(timestamp.slice(4)) 22 | 23 | if(isNaN(hours) || hours < 0 || hours > 23 || isNaN(minutes) || minutes < 0 || minutes > 59 || isNaN(seconds) || seconds < 0 || seconds > 59){ 24 | return null 25 | } 26 | 27 | return setSeconds(setMinutes(setHours(new Date(), hours), minutes), seconds ) 28 | } 29 | -------------------------------------------------------------------------------- /src/time_picker.vue: -------------------------------------------------------------------------------- 1 | 52 | 140 | 294 | -------------------------------------------------------------------------------- /src/utils/capitalize.js: -------------------------------------------------------------------------------- 1 | function capitalize(string){ 2 | if (typeof string === 'string') { 3 | return string.charAt(0).toUpperCase() + string.toLowerCase().slice(1); 4 | } else { 5 | return "" 6 | } 7 | } 8 | 9 | export default capitalize 10 | -------------------------------------------------------------------------------- /src/utils/uuid.js: -------------------------------------------------------------------------------- 1 | let lut = [] 2 | for (let i = 0; i < 256; i++) { 3 | lut[i] = (i < 16 ? '0' : '') + i.toString(16) 4 | } 5 | 6 | function uuid() { 7 | let d0 = (Math.random() * 0xffffffff) | 0 8 | let d1 = (Math.random() * 0xffffffff) | 0 9 | let d2 = (Math.random() * 0xffffffff) | 0 10 | let d3 = (Math.random() * 0xffffffff) | 0 11 | return ( 12 | lut[d0 & 0xff] + 13 | lut[(d0 >> 8) & 0xff] + 14 | lut[(d0 >> 16) & 0xff] + 15 | lut[(d0 >> 24) & 0xff] + 16 | '-' + 17 | lut[d1 & 0xff] + 18 | lut[(d1 >> 8) & 0xff] + 19 | '-' + 20 | lut[((d1 >> 16) & 0x0f) | 0x40] + 21 | lut[(d1 >> 24) & 0xff] + 22 | '-' + 23 | lut[(d2 & 0x3f) | 0x80] + 24 | lut[(d2 >> 8) & 0xff] + 25 | '-' + 26 | lut[(d2 >> 16) & 0xff] + 27 | lut[(d2 >> 24) & 0xff] + 28 | lut[d3 & 0xff] + 29 | lut[(d3 >> 8) & 0xff] + 30 | lut[(d3 >> 16) & 0xff] + 31 | lut[(d3 >> 24) & 0xff] 32 | ) 33 | } 34 | 35 | export default uuid 36 | --------------------------------------------------------------------------------