How to solve the problem of HTML date picker


When we need an input box with a date option in HTML then the very first option comes to our mind is input type date. It is greate to use and very easy. But the major problem with HTML Datepicker is that it doesn't support all the browser. So we need a date option that supports almost all the browsers like chrome, firefox, Mozilla etc.

JQuery Datepicker is the best option to do this. This is very easy to use and it has lot of features like date format, date range, show months and much more.

This is the very simple JQuery Datepicker code.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Date Picker by Tutorial Villa</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
<h1>JQuery Date Picker by Tutorial Villa</h1>
<br><br>
<p>Simple Datepicker</p>
<input type="text" class="simple_date">


  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>
</body>
</html>

Date Format

You can change the date format. It becomes very important when you deal with database, in case you need to change the date format according to them. 

This is the example to change the format to Year - Month - Date. You can create your own format by replacing the year, month and date.


<p>Change Date Format</p>
<input type="text" class="change_date_format">
<script>
$(function(){
	$( ".change_date_format" ).datepicker({
		dateFormat : 'yy-mm-dd'
	});
});
</script>

Month and Year

You can display the month and year option for better user access. 


<p>Month and Year Option</p>
<input type="text" class="month_and_year_option">
<script>
$(function(){
	$( ".month_and_year_option" ).datepicker({
		changeMonth : true,
		changeYear : true
	});
});
</script>


Santosh Devnath
PHP Developer
25004