# @jungle_d/vue-date-time-picker

> Open source vue.js component to handle date and time values

Latest version **1.4.99** (published 2021-09-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install @jungle_d/vue-date-time-picker
pnpm add @jungle_d/vue-date-time-picker
yarn add @jungle_d/vue-date-time-picker
bun add @jungle_d/vue-date-time-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.99 |
| Published | 2021-09-03 |
| First published | 2019-02-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | jungleBadger |
| Maintainers | jungle_d |

## Links

- npm: https://www.npmjs.com/package/@jungle_d/vue-date-time-picker
- Repository: https://github.com/jungleBadger/vue-date-time-picker
- Homepage: https://github.com/jungleBadger/vue-date-time-picker#readme
- Issues: https://github.com/jungleBadger/vue-date-time-picker/issues
- npm.io page: https://npm.io/package/@jungle_d/vue-date-time-picker

## Recent versions

- 1.4.99 (latest) — 2021-09-03
- 1.4.98 — 2021-03-04
- 1.4.96 — 2020-09-03
- 1.4.95 — 2020-08-26
- 1.4.94 — 2020-08-26
- 1.4.93 — 2020-08-26
- 1.4.92 — 2020-08-26
- 1.4.91 — 2020-08-26
- 1.4.9 — 2020-08-26
- 1.4.8 — 2020-08-26
- 1.4.7 — 2020-08-24
- 1.4.6 — 2020-08-17
- 1.4.5 — 2020-08-14
- 1.4.4 — 2020-08-14
- 1.4.3 — 2020-07-18
- … 48 more at https://npm.io/package/@jungle_d/vue-date-time-picker/versions

## README

### 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

```js
<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

---
_Source: https://npm.io/package/@jungle_d/vue-date-time-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._