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.

1. run npm install
2. run gulp build to apply the changes
3. 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
4. Some css variables can be found under the src/scss/variables.scss file, this can be useful to customize the component