How we can create a draggable selector to pick date range using HTML CSS JS? Solution: See this Drag Date Range Selector Using JavaScript and CSS, Click and Drag to Select.
Previously I have shared a datepicker program, but this is a date range selector with click and drag feature. Basically, the date range selector is a kind of range selector for selecting between a date to another date. Suppose you can to select a period like 1ts Feb to 12 Feb, you can select the range by click on the 1st date and drag to 12th. And mostly website uses two inputs for the start date and end date, but this is a new and cool concept.
Today you will learn to create Click and Drag range selector. Basically, there is a box with 1 to 31 numbers and arranged/placed like a calendar. This is a dummy program, so there is no year or month selector you can create by own. By default, the range is selected between 18 and 23, but you can change it by clicking a start point and drag to the endpoint. To better visualization, there is a dark color on the start and end date, and light on the dates which are in between these.
So, Today I am sharing Drag Date Range Selector Using JavaScript and CSS. There I have used CSS for styling and JavaScript for functioning, also HTML elements have an important part in functions. There is no jQuery or any other libraries, you can call it a pure JS program( DOM Based). You can use it program after some modifications like year & month select, set in the input, etc.
If you are thinking now how this date range selector actually is, then see the preview given below.
Preview Of Click and Drag Datepicker
See this video preview to getting an idea of how this date range picker looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Drag Date Range Selector Using JavaScript and CSS Source Code
Before sharing source code, let’s talk about it. First I have created the main div with a class named “calendar” and put 31 divs inside it for 31 days. Inside every div, I have placed a span to show dates. The div contains class names and data to identify each day, and the span contains a class and days. There I have used HTML Data-* attribute to store data of days and start/end date.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I used grid display command to placement like a calendar. I also used other grid commands for placement like grid-gap, grid-column, etc. I have styled the days with multiple conditions like start, between, end days using the HTML data attribute.
JavaScript handling here the drag feature of this program. There I have used JavaScript DOM for creating the program, I have fetched the elements using JS document.querySelectorAll command. In this command, I have also put the data attribute to get values and elements data. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any trouble.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Click and Drag Datepicker | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calendar"> <div class="day" data-day="1"><span class="number">1</span></div> <div class="day" data-day="2"><span class="number">2</span></div> <div class="day" data-day="3"><span class="number">3</span></div> <div class="day" data-day="4"><span class="number">4</span></div> <div class="day" data-day="5"><span class="number">5</span></div> <div class="day" data-day="6"><span class="number">6</span></div> <div class="day" data-day="7"><span class="number">7</span></div> <div class="day" data-day="8"><span class="number">8</span></div> <div class="day" data-day="9"><span class="number">9</span></div> <div class="day" data-day="10"><span class="number">10</span></div> <div class="day" data-day="11"><span class="number">11</span></div> <div class="day" data-day="12"><span class="number">12</span></div> <div class="day" data-day="13"><span class="number" >13</span></div> <div class="day" data-day="14"><span class="number">14</span></div> <div class="day" data-day="15"><span class="number">15</span></div> <div class="day" data-day="16"><span class="number">16</span></div> <div class="day" data-day="17"><span class="number">17</span></div> <div class="day" data-day="18" data-selected="start"><span class="number">18</span></div> <div class="day" data-day="19"><span class="number">19</span></div> <div class="day" data-day="20"><span class="number">20</span></div> <div class="day" data-day="21"><span class="number">21</span></div> <div class="day" data-day="22"><span class="number">22</span></div> <div class="day" data-day="24"><span class="number">24</span></div> <div class="day" data-day="25"><span class="number">25</span></div> <div class="day" data-day="26"><span class="number">26</span></div> <div class="day" data-day="27"><span class="number">27</span></div> <div class="day" data-day="28"><span class="number">28</span></div> <div class="day" data-day="23" data-selected="end"><span class="number" >23</span></div> <div class="day" data-day="29" ><span class="number">29</span></div> <div class="day" data-day="30"><span class="number">30</span></div> <div class="day" data-day="31"><span class="number">31</span></div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put the codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ *, *::before, *::after { position: relative; box-sizing: border-box; } html { height: 100%; display: flex; background: #eee; } body { margin: auto; } :root { --color-primary: #ff3838; } .calendar { font-size: 3vw; display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 0.25em 0; margin: auto; padding: 1em; background: #FFF; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.25); border-radius: .5em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .day:first-child { grid-column-start: 4; } .day { padding: 0.5em; text-align: center; } .day::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .day[data-selected]::before { border-radius: .5em; } .day[data-selected="start"]::before { border-top-right-radius: 0; border-bottom-right-radius: 0; } .day[data-selected], .day[data-selected] ~ .day { color: white; } .day[data-selected]::before, .day[data-selected] ~ .day::before { background-color: var(--color-primary); } .day[data-selected="start"] ~ .day:not([data-selected="end"])::before { opacity: 0.5; } .day[data-selected="end"][data-selected="end"]::before { border-top-left-radius: 0; border-bottom-left-radius: 0; } .day[data-selected="end"] ~ .day { color: inherit; } .day[data-selected="end"] ~ .day::before { background-color: transparent; } @media (max-width:600px) { .calendar { font-size: 5vw; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
// Code By Webdevtrick ( https://webdevtrick.com ) * console.clear(); const data = { firstDate: null, secondDate: null }; const machine = { initial: 'idle', states: { idle: { on: { pointerdown: (data, event) => { data.firstDate = +event.currentTarget.dataset.day; data.secondDate = null; return 'dragging'; } } }, dragging: { on: { pointerover: (data, event) => { data.secondDate = +event.currentTarget.dataset.day; return 'dragging'; }, pointerup: 'idle', pointercancel: 'idle' } } } }; // idle let currentState = machine.initial; function send(event) { const transition = machine .states[currentState] .on[event.type]; if (typeof transition === 'function') { currentState = transition(data, event); updateDOM(); } else if (transition) { currentState = transition; updateDOM(); } } /* ---------------------------------- */ const allDayEls = document.querySelectorAll('[data-day]'); allDayEls.forEach(dayEl => { dayEl.addEventListener('pointerdown', send); dayEl.addEventListener('pointerover', send); }); document.body.addEventListener('pointerup', send); /* ---------------------------------- */ function updateDOM(){ document.querySelectorAll('[data-selected]') .forEach(el => { delete el.dataset.selected }); const startDate = Math.min(data.firstDate, data.secondDate); const endDate = Math.max(data.firstDate, data.secondDate); if ( startDate ) { const startDateEl = document.querySelector(`[data-day="${startDate}"]`); startDateEl.dataset.selected = "start"; } if ( endDate ) { const endDateEl = document.querySelector(`[data-day="${endDate}"]`); endDateEl.dataset.selected = "end"; } } |
That’s It. Now you have successfully created Drag Date Range Selector Using JavaScript and CSS, Click and Drag to select. If you have any doubt or question comment down below.
Thanks for Visiting, Keep Visiting.
How do you add this in a custom field