Date Formatting with Date Picker using JavaScript

[Zinex]

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.

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

Date format of dd/mm/yy

Date format of yy-mm-dd

Date format of M d, y

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.

Download