Skip to content

EquipmentShare/date-range-input

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

date-range-input

A user interface for inputting date ranges.

Demo

Install

npm i @equipmentshare/date-range-input

How to use

The date range input takes these properties.

start and end are required. They must be an object with these numeric properties: year, month, and day.

visibleStartMonth and visibleEndMonth are optional, for if you want to manually specify which month should be displayed in each calendar. They are an object with the numeric properties year and month.

The component emits a change event with a detail property that is an object with start and end properties. Both dates are objects with year/month/day properties.

As vanilla JS

import DateRangeInput from '@equipmentshare/date-range-input'

const dateRangeInput = new DateRangeInput({
	target: document.querySelector('div.date-range-input'),
	props: {
		start: {
			year: 2020,
			month: 1,
			day: 5,
		},
		end: {
			year: 2020,
			month: 1,
			day: 18,
		},
		visibleEndMonth: {
			year: 2020,
			month: 2
		}
	}
})

dateRangeInput.$on('change', event => console.log(event.detail))

As a Svelte component

<script>
import DateRangeInput from '@equipmentshare/date-range-input'
</script>

<DateRangeInput
	start={ { year: 2020, month: 1, day: 10 } }
	end={ { year: 2020, month: 1, day: 20 } }
	visibleEndMonth={ { year: 2020, month: 2 } }
	on:change={ event => console.log(event.detail) }
>
</DateRangeInput>

How to test/develop

npm run dev

Edit src/TestApp.svelte to play with the component.

To consider

A couple folks have said that they expected different behavior when they started a click-and-drag on an existing end-point.

If this continues, we may want to experiment with different behavior when a drag starts on a current end-point – probably making it drag that end-point around, as opposed to the normal behavior of starting a new range selection

About

A user interface for inputting date ranges in the browser

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published