Format Date with Date Picker using Jquery

[kataz671040169]

In this tutorial, we are going to learn format date with the in the given option using jquery. This is a simple project that you can use in your website or system.

Directions :


For HTML code

1. <div
   
   id
   
   =
   
   "container"
   
   >
   
2. <div
   
   class
   
   =
   
   "head"
   
   >
   
3. Format Date with Date Picker
   
4. </
   
   div
   
   >
   
5. <table
   
   >
   
6. <thead
   
   >
   
7. <tr
   
   >
   
8. <th
   
   >
   
   Date</
   
   th
   
   >
   
9. <th
   
   >
   
   Format Options</
   
   th
   
   >
   
10. </
    
    tr
    
    >
    
11. </
    
    thead
    
    >
    
12. <tbody
    
    >
    
13. <tr
    
    >
    
14. <td
    
    ><input
    
    type
    
    =
    
    "text"
    
    id
    
    =
    
    "datepicker"
    
    size
    
    =
    
    "30"
    
    ></
    
    td
    
    >
    
15. <td
    
    ><select
    
    id
    
    =
    
    "format"
    
    >
    
16. <option
    
    value
    
    =
    
    "mm/dd/yy"
    
    >
    
    Default - mm/dd/yy</
    
    option
    
    >
    
17. <option
    
    value
    
    =
    
    "yy-mm-dd"
    
    >
    
    ISO 8601 - yy-mm-dd</
    
    option
    
    >
    
18. <option
    
    value
    
    =
    
    "d M, y"
    
    >
    
    Short - d M, y</
    
    option
    
    >
    
19. <option
    
    value
    
    =
    
    "d MM, y"
    
    >
    
    Medium - d MM, y</
    
    option
    
    >
    
20. <option
    
    value
    
    =
    
    "DD, d MM, yy"
    
    >
    
    Full - DD, d MM, yy</
    
    option
    
    >
    
21. <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
    
    >
    
22. </
    
    select
    
    ></
    
    td
    
    >
    
23. </
    
    tr
    
    >
    
24. </
    
    tbody
    
    >
    
25. </
    
    table
    
    >
    
26. </
    
    div
    
    >
    

For JQuery code:

1. <
   
   script>
   
2. $(
   
   function
   
   (
   
   )
   
   {
   
3. $(
   
   "#datepicker"
   
   )
   
   .datepicker
   
   (
   
   )
   
   ;
   
4. $(
   
   "#format"
   
   )
   
   .change
   
   (
   
   function
   
   (
   
   )
   
   {
   
5. $(
   
   "#datepicker"
   
   )
   
   .datepicker
   
   (
   
   "option"
   
   ,
   
   "dateFormat"
   
   ,
   
   $(
   
   this
   
   )
   
   .val
   
   (
   
   )
   
   )
   
   ;
   
6. }
   
   )
   
   ;
   
7. }
   
   )
   
   ;
   
8. 
   

For CSS code:

1. <style>
   
2. *
   
3. {
   
4. padding
   
   :
   
   0
   
   ;
   
5. margin
   
   :
   
   0
   
   ;
   
6. }
   
7. body {
   
8. font-family
   
   :
   
   "sans-serif"
   
   ;
   
9. font-size
   
   :
   
   16px
   
   ;
   
10. background-color
    
    :
    
    #eee
    
    ;
    
11. }
    
12. #container
    
13. {
    
14. width
    
    :
    
    600px
    
    ;
    
15. height
    
    :
    
    200px
    
    ;
    
16. margin-left
    
    :
    
    auto
    
    ;
    
17. margin-right
    
    :
    
    auto
    
    ;
    
18. background-color
    
    :
    
    #fff
    
    ;
    
19. border-radius
    
    :
    
    3px
    
    ;
    
20. }
    
21. .head
    
22. {
    
23. margin-top
    
    :
    
    100px
    
    ;
    
24. width
    
    :
    
    inherit
    
    ;
    
25. background-color
    
    :
    
    #428bca
    
    ;
    
26. text-align
    
    :
    
    center
    
    ;
    
27. font-size
    
    :
    
    20px
    
    ;
    
28. padding
    
    :
    
    5px
    
    0px
    
    ;
    
29. border-radius
    
    :
    
    3px
    
    ;
    
30. }
    
31. .font
    
32. {
    
33. font-size
    
    :
    
    16px
    
    ;
    
34. }
    
35. table
    
36. {
    
37. margin-top
    
    :
    
    30px
    
    ;
    
38. margin-left
    
    :
    
    auto
    
    ;
    
39. margin-right
    
    :
    
    auto
    
    ;
    
40. }
    
41. </style>
    

For the links (Include this in your head tag)

1. <script
   
   src
   
   =
   
   "jquery-1.10.2.js"
   
   ></
   
   script
   
   >
   
2. <script
   
   src
   
   =
   
   "jquery-ui.js"
   
   ></
   
   script
   
   >
   
3. <link
   
   rel
   
   =
   
   "stylesheet"
   
   href
   
   =
   
   "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
   
   >
   

So what can you say about this simple project? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.