Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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

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;
   alert(x);
}
<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;

<script>
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;
}
</script>

<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:

From:
To:

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:
• Concatenating a String and Another Data Type
• JavaScript to Set Checkbox to Readonly
• Create a Mouse Click Sound Effect
• Code for Java Script Circle/Sphere Calculator
• Easy Java Script Code for Sideways Slide show
• What is a Regular Expression?
• Change the Case of a Character in a String
• Let Your Web site Visitors Set Font Size
• Using the Java Script Date Object
• Basic State Machines

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-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268