Datepicker altField

Date Format/datepicker altField

How to set datepicker altfield? Or have you faced any issue when you set datepicker altfield? How to change the date format in datepicker, when we want to send the date in a different format to server? The user will be viewing the date in one format. But, when it is sent to server, it will be sent in a different format. Is it possible to achieve this? What trick we can use for getting this done? We can use Datepicker altField for this purpose. The following steps will show, how to use Datepicker altField.

Before we proceed to learn how to add datepicker altfield, please read more about jquery datepicker. We will add the jquery datepicker.

<!doctype html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
       $(function() {
          $('#datepicker').datepicker({
             altField: '#alt_date',
             altFormat: 'dd-MM-yy',
             fielddateFormat: 'mm-dd-yy'
          });
      });
    </script>
 </head>
 <body>
    <label>Date:</label> <input type="text" id="datepicker" />
    <input type="hidden" id="alt_date" value="" />
 </body>
</html>

In the header tag add jquery Ui css, jquery plugin and the jQuery Ui javascript plugin. The jquery UI datepicker is tied to a form input field. Click on the input field to open the calendar. When you choose a date from the calender which is open, the selected date is shown as the input’s value.

jQuery datepicker date formats

a) Default – mm/dd/yy,
b) ISO 8601 – yy-mm-dd,
c) Short – d M, y,
d) Medium – d MM, y,
e) Full – DD, d MM, yy,
f) With text – ‘day’ d ‘of’ MM ‘in the year’ yy

these are date formats given by jquery api.

First step for setting datepicker altfield

We already added the datepicker. Now, we go to the first step for adding datepicker altfield. We dd a hidden field for getting the different format of date. Add it next to the datepicker input field.

HTML for adding Datepicker altField

<input type="hidden" id="alt_date" />

Let us add a few lines of jquery as the following.

     $(function() {
         $('#datepicker').datepicker({
             altField: '#alt_date', //setting alternate field
             altFormat: 'dd-MM-yy', //setting alternate date format
             fielddateFormat: 'mm-dd-yy' //this is the date format for datepicker field
         });
    });

Here, the hidden field will have the date format ‘dd-M-yy’. Example: 12-Jul-2013.

But, the value of the field which the user can see is ‘dd-mm-yy ‘. Example: 12-07-2013.

So, this is the way to set datepicker altfield and get the selected date value in a different date format.

Demo for Datepicker Altfield

Date Format/datepicker altField

jQuery datepicker date formats

First step for setting datepicker altfield

HTML for adding Datepicker altField

Demo for Datepicker Altfield

About the author