@jungle_d/vue-date-time-picker NPM

Vue-Date-Time-Picker

Simple date and time picker built with Vue 2.x+ and using Luxon to handle dates

How to use

Do a regular npm install vue-date-time-picker and the file can be imported either through require or import. There is no need of CSS imports since all styles are scoped into the components

<template>
	<div id="app">
		<date-time-picker v-model="test"></date-time-picker>
	</div>
</template>
<script type="text/javascript">
(function () {
	"use strict";
	module.exports = {
		"name": "App",
		"components": {
			"DateTimePicker": require("vue-date-time-picker").DateTimePicker
		},
		"data": function() {
			return {
				"test": new Date()
			}
		}
	};
}());
</script>
<style scoped lang="scss" rel="stylesheet/scss"></style>

Properties

Prop	Required	Default	Details
elId	false	String: `"a" + Date.now()`	ID to attach to HTML element
value/v-model	true	String/Object/Date: `undefined`	Reactive variable to hold date selection value
minDate	false	String/Object/Date: `undefined`	Minimum date to control which dates can be selected
referenceDate	false	String/Object/Date: `undefined`	Date to be used as reference, or to define a range between two date-pickers instance
rangedPoint	false	String: `undefined`	This should be used to work with ranged dates with two date pickers instance, one will be `start` and the another will be `end`
placeholder	false	String: `Insert date`	Input placeholder
customTimeZone	false	String: `""`	Custom Time zone string to be applied
weekPattern	false	String: `"default"`	Define which rules should be applied regarding week start. `default` = sunday to saturday, `iso` = monday to sunday
align	false	String: `"left"`	Define the alignment of the calendar popup relative to the input

Roadmap

This project is still on development and on its early phases. I had the need of such a component on my work so I thought that would be nice to open source it and keep improving over time. Any contributions, feature requests, feedbacks and/or tips are very well appreaciated. Feel free to open a PR or raise an issue at the Issues section.

Next features / needing help

Replace luxon by a vanilla js approach to reduce footprint
Handle events
Create more customisation options and enhance the ranged feature
Create a more complete sample page
Improve accessibility
Improve locale support on labels

Contributing

This project relies on Gulp.js and Babel to perform transformations. All css applied is bundled to each component.

run npm install
run gulp build to apply the changes
The source code is under the src folder, and the js/main.js file is responsible to loading up the Vue.js component through components/date-time-picker instance
Some css variables can be found under the src/scss/variables.scss file, this can be useful to customize the component