DateSelect.js (dsjs
for short) is a minimalistic Javascript date selector.
- Small (7 KB minified and gzipped)
- Options for a date selector, a date-time selector, and a date-rage selector
- Supports light/dark modes (add
class="dark"
to thebody
orhtml
tags) - Default to native elements on mobile
- Pure javascript = no dependencies
- Pretty :)
<!-- place a text element with the dsjs class and dsjs attributes -->
<input class="dsjs"
dsjs-type="date"
dsjs-min="2010-01-01"
dsjs-max="today"
dsjs-date="2021-10-13"
dsjs-month-format="full"
></input>
<!-- add these css and js files to the site's footer -->
<link rel="stylesheet" type="text/css" href="/path/to/dateselect.min.css" media="all">
<script src="/path/to/dateselect.min.js" onload="dsjs.init();"></script>
That's it!
NOTE: To render new/dynamic elements, simply call
dsjs.init();
The selected date/time/range will be saved in the data-value
attribute of the original input element, so you might need to replace the input's value
with the data-value
value before submitting the form by calling dsjs.setValues()
.
The data is stored in the following formats:
- Date:
YYYY-MM-DD
(i.e.2019-04-22
) - Date-time:
YYYY-MM-DDTHH:SS:II±TZ
(i.e.2019-04-22T00:00:00+00:00
) - Date-range:
YYYY-MM-DD~YYYY-MM-DD
(i.e.2019-04-22~2019-12-31
)
Input format: YYYY-MM-DD
Example: 2019-04-22
dsjs-type
- Mandatory value isdate
!dsjs-month-format
- Usefull
orshort
month names (Optional)dsjs-min
- minimum date allowed, in<input-format>
(Optional)dsjs-max
- minimum date allowed, in<input-format>
(Optional)dsjs-date
- default date to select, in<input-format>
(Optional)
Input format: YYYY-MM-DDTHH:II[:SS][±TZ]
Example: 2019-04-22T00:00:00+00:00
dsjs-type
- Mandatory value isdatetime
!dsjs-month-format
- Usefull
orshort
month names (Optional)dsjs-min
- minimum date allowed, in<input-format>
(Optional)dsjs-max
- minimum date allowed, in<input-format>
(Optional) (Optional)dsjs-datetime
- default date to select, in<input-format>
(Optional)dsjs-timezone
- Show the timezone selector? (true/false
, Optional)dsjs-timestamp
- Allow timestamp input? (true/false
, Optional)
Input format: YYYY-MM-DD
Example: 2019-04-22
dsjs-type
- Mandatory value isdaterange
!dsjs-month-format
- Usefull
orshort
month names (Optional)dsjs-min
- minimum date allowed, in<input-format>
(Optional)dsjs-max
- minimum date allowed, in<input-format>
(Optional)dsjs-daterange-start
- default start date to select, in<input-format>
(Optional)dsjs-daterange-end
- default end date to select, in<input-format>
(Optional)
The dsjs-min
and dsjs-max
also accepts today
as the value.