How to split jQuery Datepicker's date into 3 separate fields with Validations.

I will show you how to split the Datepicker of jQuery into 3 separate fields (text and drop down) and give validations to the selected date.

HTML:

<script type="text/javascript" src="js/jquery.datepicker.js"></script>

TEXT FIELDS:

<div class="demo">    

    <p>Date:</p>

    <input id="month" type="text" />

    <input id="day" type="text" />

    <input id="year" type="text"/>

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

</div>

Demo: http://jsfiddle.net/gvAbv/277/

DROP DOWN FIELDS:

    

    <div class="demo">

    

    <p>Date:</p>

    <select id="month" name="month">

        <option value="01">January</option> 

        <option value="02">February</option>

        .

        .

        .

        <option value="12">December</option>

    </select>

    <select id="day" name="day">

        <option value="01">1</option>

        <option value="02">2</option>

        .

        .

        .

        <option value="30">30</option>

        <option value="31">31</option>

    </select>

    <select id="year" name="year">

        <option value="2011">2011</option>

        .

        .

        .

        <option value="2015">2015</option>

    </select>

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

    

</div>

Demo: http://jsfiddle.net/zwwY7/66/

JAVASCRIPT:

$(function() {

    $("#datepicker").datepicker({

         buttonImage: '../../images/icons/calendar.png',

        buttonImageOnly: true,

        showOn: 'button',

         onSelect: function(dateText, inst) {

            $('#year').val(dateText.split('/')[2]);

            $('#month').val(dateText.split('/')[0]);

            $('#day').val(dateText.split('/')[1]);                     

        }

    });

});

VALIDATION:

The Validation plugin lets you apply validations to your fields to prevent a form being submitted with invalid values. Meanwhile the jQuery UI Datepicker plugin lets the user select a date from a pop calendar, ensuring a correct entry. A problem arises if the user can also enter a date manually as they may not provide a valid value. The plugin presented here extends the Validation plugin to allow Datepicker fields to be validated before submission.

Add the jquery.ui.datepicker.validation.js extension to your page, following both the jQuery UI/Datepicker and Validation modules. The current version is 1.0.1 and works with jQuery UI Datepicker version 1.8.6.

A new validation rule is defined (dpDate) that may be added as a class to your datepicker fields or specified in the rules section of the validate settings. As well as checking the text against the current dateFormat, this validator also checks any minDate and maxDate settings and any beforeShowDay callback that might make the date unselectable.

Follow the steps below to include validations.

1. Include the validate plugin in the head section of your page.

<script type="text/javascript" src="js/jquery.ui.datepicker.validation.js"></script>

    2.   Add the dpDate marker class to your datepicker fields or specify dpDate in the rules section of your validate call.

$('#validateForm').validate({ 

 rules: { 

       datepicker: { 

            required: true, 

            dpDate: true 

        }

         }

    }});