Skip to content

Instantly share code, notes, and snippets.

@ozzi-

ozzi-/the_future_of_datepickers.html

Created October 15, 2019 14:42
Show Gist options
  • Save ozzi-/69859400fa489b6dfbe2d96f6de34e43 to your computer and use it in GitHub Desktop.
Save ozzi-/69859400fa489b6dfbe2d96f6de34e43 to your computer and use it in GitHub Desktop.
Download ZIP
top secret prototype for new HTML date pickers
Raw
the_future_of_datepickers.html
<html>
<br>
Day:
<select>
<option value="">0</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">0</option>
</select>
-
Month:
<select>
<option value="">0</option>
<option value="">1</option>
</select>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">0</option>
</select>
-
Year:
<select>
<option value="">1</option>
<option value="">2</option>
</select>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">0</option>
</select>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">0</option>
</select>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">0</option>
</select>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
Day - <span id="day">1</span>
<input type="range" min="1" max="31" value="1" class="slider" id="dayRange" onchange="updateDayRange(this)">&nbsp;&nbsp;
Month - <span id="month">1</span>
<input type="range" min="1" max="12" value="1" class="slider" id="monthRange" onchange="updateMonthRange(this)">&nbsp;&nbsp;
Year - <span id="year">1990</span>
<input type="range" min="1990" max="2099" value="1990" class="slider" id="yearRange" onchange="updateYearRange(this)">
<script>
function updateDayRange(inp){
document.getElementById("day").innerHTML = inp.value;
}
function updateMonthRange(inp){
document.getElementById("month").innerHTML = inp.value;
}
function updateYearRange(inp){
document.getElementById("year").innerHTML = inp.value;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment