Skip to content

Minimalistic date/time/range selector, written in Javascript

License

Notifications You must be signed in to change notification settings

tradologics/dateselect.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DateSelect.js

DateSelect.js (dsjs for short) is a minimalistic Javascript date selector.

Features:

  • 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 the body or html tags)
  • Default to native elements on mobile
  • Pure javascript = no dependencies
  • Pretty :)

Live demo

Examples

Date selector

Date-time selector

Date-range selector


How to use:

<!-- 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();

Where data is stored?

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)

Supported dsjs-* attributes

Date selector

Input format: YYYY-MM-DD
Example: 2019-04-22

  • dsjs-type - Mandatory value is date!
  • dsjs-month-format - Use full or short 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)

Date-time selector

Input format: YYYY-MM-DDTHH:II[:SS][±TZ]
Example: 2019-04-22T00:00:00+00:00

  • dsjs-type - Mandatory value is datetime!
  • dsjs-month-format - Use full or short 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)

Date-range selector

Input format: YYYY-MM-DD
Example: 2019-04-22

  • dsjs-type - Mandatory value is daterange!
  • dsjs-month-format - Use full or short 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)

NOTE:

The dsjs-min and dsjs-max also accepts today as the value.