Date Formatting with Date Picker using JavaScript

Submitted by alpha_luna on Friday, July 8, 2016 - 17:43.
In this article, we are going to show you Date Formatting with Date Picker using JavaScript. Using jQuery date picker we can select our desired date then, we are going to set the format of the selected date using dateFormat option in the select field. Date Format
  • mm/dd/yy
  • dd/mm/yy
  • yy-mm-dd
  • M d, y

Creating Markup for Date Picker with Date Formats

This HTML source code shows the date picker where the user can select desired date and a list of date format. 
  1. <div id="date_Format_Style">
  2. <h2>
  3. 	Date Formatting with Date Picker using JavaScript
  4. </h2>
  5. 	<div class="input-style">
  6. 		<div class="frm-label">Select Date:</div>
  7. 		<div><input type="text" id="date_picker" size="30" class="form-input-style"></div> 
  8. 	</div>
  9. 	<div class="input-style">
  10. 		<div>Formats:</div>
  11. 		<div>
  12. 			<select id="date-format" onchange="change_DateFormat(this.value);" class="form-input-style">
  13. 				<option value="mm/dd/yy">mm/dd/yy</option>
  14. 				<option value="dd/mm/yy">dd/mm/yy</option>
  15. 				<option value="yy-mm-dd">yy-mm-dd</option>
  16. 				<option value="M d, y">M d, y</option>
  17. 			</select>
  18. 		</div>
  19. 	</div>
  20. </div>
This is the output of the source code above. Result

CSS, External Link, and Script Codes

Kindly copy and paste to your HEAD tag of your page for the external link, CSS, and a short script. 
  1. <link rel="stylesheet" href="css/style.css">
  2. <script src="js/jquery-1.10.2.js"></script>
  3. <script src="js/jquery-ui.js"></script>
  4.  
  5. <style type="text/css">
  6. body {
  7. 	width:800px;
  8. 	margin:auto;
  9. }
  10.  
  11. #date_Format_Style {
  12. 	padding: 20px 40px;
  13. 	background: #0079B3;
  14. 	border:2px solid #222;
  15. 	color: #FFF;
  16. 	font-size: 1.2em;
  17. 	margin-top:100px;
  18. 	text-align:center;
  19. }
  20.  
  21. .input-style {
  22. 	margin-bottom: 20px;
  23. }
  24.  
  25. .form-input-style {
  26. 	padding: 10px;
  27. 	width: 250px;
  28. 	border:1px solid blue;
  29. 	font-size: 18px;
  30. 	border-radius:8px;
  31. }
  32. </style>
  33.  
  34. <script>
  35. 	$(document).ready(function() {
  36. 	$( "#date_picker" ).datepicker();
  37. 	});
  38. 	function change_DateFormat(date_format) {
  39. 	$( "#date_picker" ).datepicker( "option", "dateFormat", date_format );
  40. 	}
  41. </script>

Output

Date format of mm/dd/yy ResultDate format of dd/mm/yy ResultDate format of yy-mm-dd ResultDate format of M d, y Result If you are interested in programming, we have an example of programs that may help you even just in small ways. If you want more tutorials, you can visit our website, click here Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 474 views