how to use Datepicker using Jquery

A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges.

You can provide one or more options at a time using a JavaScript object. If there are more than one option to be provided then you will separate them using a comma.

Example

<link rel="stylesheet" href="https://scripts.guru/download/datepicker/jquery-ui.css">
<script src="https://scripts.guru/download/datepicker/jquery-1.12.4.js"></script>
<script src="https://scripts.guru/download/datepicker/jquery-ui.js"></script>

<input type="text" id="datepicker">

<script>
	$("#datepicker").datepicker();
</script>

another Example Datepicker with dateFormat

<link rel="stylesheet" href="https://scripts.guru/download/datepicker/jquery-ui.css">
<script src="https://scripts.guru/download/datepicker/jquery-1.12.4.js"></script>
<script src="https://scripts.guru/download/datepicker/jquery-ui.js"></script>

<input type="text" id="datepicker">

<script>
	$( "#datepicker" ).datepicker({
		dateFormat: "yy-mm-dd"
	});
</script>

Date format option in Datepicker

<link rel="stylesheet" href="https://scripts.guru/download/datepicker/jquery-ui.css">
<script src="https://scripts.guru/download/datepicker/jquery-1.12.4.js"></script>
<script src="https://scripts.guru/download/datepicker/jquery-ui.js"></script>

<input type="text" id="datepicker">

<p>Date Format options:<br>
	<select id="format">
		<option value="mm/dd/yy">Default - mm/dd/yy</option>
		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
		<option value="d M, y">Short - d M, y</option>
		<option value="d MM, y">Medium - d MM, y</option>
		<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
		<option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">
		With text - 'day' d 'of' MM 'in the year' yy</option>
	</select>
</p>

<script>
$("#datepicker").datepicker();

$( "#format" ).on( "change", function() {
	$( "#datepicker" ).datepicker( "option", "dateFormat", $(this).val() );
});
</script>