Format Date with Date Picker using Jquery

Submitted by jaredgwapo on Tuesday, December 22, 2015 - 11:56.
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>
  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>
  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.
Tags
Date
datepicker
jQuery
Javascript

Add new comment

About text formats
  • 87 views