Question

I have a datepicker input that is populated with today’s date when the page loads. When datepicker is used, the date is split into month, day, and year and put into three hidden fields that are sent to the sever with the post data. The problem comes when the user decides today’s date is fine and doesn’t use the datepicker; how do I get the date pieces into those three hidden fields?

I tried breaking out today’s date into pieces and adding it to those fields but every way I’ve tried to add it into jQuery or using plain JavaScript breaks the whole thing. Here is the working code that I’d like to build on:

jQuery

$(function() {
    //set your date picker
        $("#CI").datepicker({
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        buttonImage: "css/images/calendar-green.gif",
        buttonImageOnly: true,
        buttonImageText: "Calendar",
        beforeShow: function(dateText, instance) { 
            $("#CI").datepicker('setDate', new Date());
        },
        onSelect: function(dateText, instance) {
            var pieces = dateText.split("/");
             $("#CID").val(pieces[0]);
             $("#CIM").val(pieces[1]);
             $("#CIY").val(pieces[2]);
         }                
    })

    //get the current date
    var todaysDate = new Date();
    //format the date in the right format (add 1 to month because JavaScript counts from 0)
    formatDate = (todaysDate.getMonth() + 1) + '/' + 
                         todaysDate.getDate() + '/' + 
                         todaysDate.getFullYear();
    //set the input value
    $('#CI').val(formatDate);       
});

HTML

<input type='text' id='CI' name="CI">
<input type="text" name="CID" id="CID" />
<input type="text" name="CIM" id="CIM" />
<input type="text" name="CIY" id="CIY" />

Answer 1

Split out your onSelect() functionality into a separate function, which can them be called twice.

Having the same function performing both tasks allows you to deal with any changes to your functionality or HTML structure.

so…

$(function() {
    function populateHidden(dateText){
        var pieces = dateText.split("/");
        $("#CID").val(pieces[0]);
        $("#CIM").val(pieces[1]);
        $("#CIY").val(pieces[2]);
    }
    //set your date picker
    $("#CI").datepicker({
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        buttonImage: "css/images/calendar-green.gif",
        buttonImageOnly: true,
        buttonImageText: "Calendar",
        beforeShow: function(dateText, instance) { 
            $("#CI").datepicker('setDate', new Date());
        },
        onSelect: populateHidden
    })

    //get the current date
    var todaysDate = new Date();
    //format the date in the right format (add 1 to month because JavaScript counts from 0)
    formatDate = (todaysDate.getMonth() + 1) + '/' + 
                         todaysDate.getDate() + '/' + 
                         todaysDate.getFullYear();
    //set the input value
    $('#CI').val(formatDate); 
    populateHidden(formatDate); 
});