Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

Datepicker using Jquery

by
Category:javascript
javascript jquery datepicker
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.

Datepicker appears on focus (popup only)

You can provide one or more options at a time using 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="http://bladephp.co/download/datepicker/jquery-ui.css">
<script src="http://bladephp.co/download/datepicker/jquery-1.12.4.js"></script>
<script src="http://bladephp.co/download/datepicker/jquery-ui.js"></script>

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

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

Datepicker with dateFormat

<link rel="stylesheet" href="http://bladephp.co/download/datepicker/jquery-ui.css">
<script src="http://bladephp.co/download/datepicker/jquery-1.12.4.js"></script>
<script src="http://bladephp.co/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="http://bladephp.co/download/datepicker/jquery-ui.css">
<script src="http://bladephp.co/download/datepicker/jquery-1.12.4.js"></script>
<script src="http://bladephp.co/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>

0 Comments


Html code work in comment box


Related Post