CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
mani
mani

Reputation: 1044

Native Date Picker in Html

I used Datepicker plugin for getting Calendar in HTML. But my boss ordered me not to t use any jquery plugins for date picker. He is saying that I must use native code only for date picker. It should work without Javascript also.

Is it possible to create native calendar in html ?

I know html5 supports native date picker; but that is not supported by all browsers.

Can i get native date picker as following style..?

enter image description here

Upvotes: 3

Views: 15446

Answers (4)

ABHIJITH CHANDRAN
ABHIJITH CHANDRAN

Reputation: 1

Look at this simple Code. You need to add 2 js files and 1 css file from net.. Don't worry,It is simple

Here it is

<!DOCTYPE html>
<html>
	<head>
		<title>Date</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
	</head>
	<body>
		  <input type="text" id="dob" name="date" placeholder="MM/DD/YYYY"/>
			<script>
				$(document).ready(function(){
					var date_input=$('input[name="date"]'); 
					var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
					date_input.datepicker({
						format: 'dd/mm/yyyy',
						container: container,
						todayHighlight: true,
						autoclose: true,
					})
				})
			</script>
	</body>
</html>

Upvotes: -3

classicjonesynz
classicjonesynz

Reputation: 4042

You could instruct the user to enter a date in MM/DD/YYYY format, spryno724

This, a simple html5 placeholder (you can also style css placeholder) would suffice.

<input type='text' placeholder='dd/mm/yyyy' name='form[datetime]' id='datetime' />

Upvotes: 1

DoXicK
DoXicK

Reputation: 4812

why not make the jquery datepicker a fallback?

pseudocode:

if (! input.supports('date'))
    $(input).datepicker();

this way, you get a datepicker if your browser does not support the native one. That is exactly what jQuery's original 'unobtrusive' idea was.

Upvotes: 0

Oliver Spryn
Oliver Spryn

Reputation: 17368

"Native" and "without JavaScript" is where this idea will not work on older browsers. You could always create an HTML5 datepicker, and non-supportive browsers will fallback to a plain textbox. You could instruct the user to enter a date in MM/DD/YYYY format, and have this format applied by the datepicker, or by hand if the datepicker is unavailable.

This page offers some advice on the HTML5 datepicker: http://html5tutorial.info/html5-date.php

Edit: Alternatively, you could just create three dropdown menus and have the user select the month, day, and year. (Of course without JS in this case, you couldn't have the number of days in a month change with the user's choice, but you could always validate their input on the server.)

Upvotes: 2

Related Questions