passing a formatted date with jquery datepicker

Question

Hi all, I'm using the jQuery Datepicker (http://keith-wood.name/datepick.html) with custom date range. My problem is that I need the output of the date for the user to be in a readable format such as dd/mm/yyyy but then take that date and pass it into a search form as yyyymmdd.

$(function() {

$('#startDatepicker,#endDatepicker').datepick({onSelect: customRange, 
   showOn: 'both', buttonImageOnly: true, buttonImage: '/images/icons/calendar.gif', dateFormat: 'dd/mm/yy'}); 

function customRange(dateStr, date) { 
    if (this.id == 'startDatepicker') { 
        $('#endDatepicker').datepick('option', 'minDate', date); 
    } 
    else { 
        $('#startDatepicker').datepick('option', 'maxDate', date); 
    } 
}

});

function getDateRange() {
    var fromDate = document.advancedsearch.startDatepicker.value;
    var toDate = document.advancedsearch.endDatepicker.value;
    var selectedDateRange = fromDate + "," + toDate;
    document.advancedsearch.searchdaterange.value += selectedDateRange;
}                   

Basically I'm taking the values of startDatepicker and endDatepicker, combining them and then adding them as a value on searchdaterange field on my search form. The date range must be yyyymmdd. Does anyone know how I can format these values to pass into my search form?

Answer 1

If you can, try using the jQuery UI DatePicker: http://jqueryui.com/demos/datepicker/

Answer 2

Why not modify the date strings supplied by your date picker so they are in the desired format prior to submitting the form data?

function getDateRange() {
  var fromDate = document.advancedsearch.startDatepicker.value;
  var toDate = document.advancedsearch.endDatepicker.value;
  var selectedDateRange = formatDateRange(fromDate, toDate);
  document.advancedsearch.searchdaterange.value += selectedDateRange;
}


function formatDateRange(fromDate, toDate) {
  var fromDateArray = fromDate.split("/")
  var toDateArray = toDate.split("/")
  var selectedDateRange = fromDateArray[2] + fromDateArray[0] + fromDateArray[1];
  selectedDateRange += "," + toDateArray[2] + toDateArray[0] + toDateArray[1];
  return selectedDateRange;
}