Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Date Picker For Your Web Site

In the past when you needed a date picker input you had to use a plug-in or program one yourself. All modern html5 compatible web browsers have a built-in input type="date" that is super easy to code and requires only minimal JavaScript to access. The minimal code for an html5 date input element is shown below:

<input type="date">

The code for a more practical date input element is shown below:

<input type="date" id="myDate" onchange="showDate()">

This example uses the element's onchange event to execute a function showDate to access the date that the user has set. The code for the showDate function is dhown below:

function showDate()
   var x = document.getElementById("myDate").value;
<input type="date" value="2018-01-08">

If you want to set the date displayed to a specific date, date simply use the date element's value property. But the date that you provide must be in the yyyy-mm-dd format: (yyyy = year, mm = month e.g. 01 for January, dd = day in two digits).

If you want to set the date displayed to today's date, use the JavaScript code shown below;

window.onload = function()
   var date = new Date();

   var day = date.getDate();
   var month = date.getMonth() + 1;
   var year = date.getFullYear();

   if (month < 10) month = "0" + month;
   if (day < 10) day = "0" + day;

   var today = year + "-" + month + "-" + day;       
   document.getElementById("theDate").value = today;

<input type="date" id="theDate">

Note that this function is called by the window.onload event so that the current date is displayed immediately as the page loads. Of course you can combine this with use of the onchange event to access the new date that the user has set.

To allow the user to choose a date range, use two date input elements as shown below:


The code for a date range picker is shown below:

function showRange()
   var f = document.getElementById("from").value;
   var t = document.getElementById("to").value;

   var fromDate = f.replace(/-/g, "");
   var toDate = t.replace(/-/g, "");

   if(fromDate > toDate) document.getElementById("to").value = f;

A possible problem with a date range picker is that the user sets the to date to an earlier date than the from date. There are several way to deal with that possibility. In the code shown above, if the to date is before the from date, the code sets the to date to the same as the from date. Note that before a comparison test is performed on the dates, the hyphens are removed from the dates by use of a regular expression.

Of course you can combine this with the earlier function called by the window.onload event to first set the from and to dates to the current date.

More Java Script Code:
• Introduction to HTML5 Canvas
• Java Script Code to Re-arrange Items in a Select List
• Put Commas in Your Java Script Calculators
• Easy Java Script Animation
• JavaScript Variable Scope
• Java Script Code to Factor Numbers
• Easy Graph Generating Code
• Easy Picture Panning Code
• Calculators for Your Website : Fahrenheit to Celsius Converter
• Creating Java Script Dynamic or anonymous Functions at Runtime

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268