CODEWITHSUNDEEP
jquerymysqljquery-uidatejquery-ui-datepicker
StuBlackett
StuBlackett

Reputation: 3857

jQuery UI Datepicker populate and format alternate field as MySQL date

I am using jQuery UI's Datepicker and have set it to populate an alternate field. Although this appears not to be populating that field.

I would also like to format the date to MySQL format of "YYY-MM-DD". How can I get this to work and format the date too?

My current jQuery code is :

$('.booking-date').datepicker({
    minDate: new Date(y, m, d),
    numberOfMonths: 2,
    altField: "#venue_date",
    altFormat: "DD, d MM, yy",
    dateFormat: 'DD, d MM, yy',
    showButtonPanel: true
});

Thanks

Upvotes: 1

Views: 3314

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272256

To populate the input with readable date and an alternate (possibly hidden) input with MySQL friendly dates you need to specify dateFormat, altField, altFormat as shown below:

$('.booking-date').datepicker({
    minDate: new Date(),
    altField: "#venue_date",
    altFormat: "yy-mm-dd",
    dateFormat: 'DD, d MM, yy',
    numberOfMonths: 2,
    showButtonPanel: true
});

List of variables that you can use in date formats is available here, and demo here

Upvotes: 1

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

Here's some working code where u can see a lot of the different options you have. Here a lot of it is set to Swedish...and an image is used instead of an input field.

 var dateToday = new Date();

    $.datepicker.setDefaults( $.datepicker.regional[ "" ] );

$(".booking-date").datepicker( $.datepicker.regional[ "sv" ] = { 
    monthNames: ['Januari','Februari','Mars','April','Maj','Juni',
        'Juli','Augusti','September','Oktober','November','December'],
    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'], // For formatting
    dayNames: ['Söndag', 'Månday', 'Tisday', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'], // For formatting
    dayNamesShort: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'], // For formatting
    dayNamesMin: ['Sö','Må','Ti','On','To','Fr','Lö'], // Column headings for days starting at Sunday
    weekHeader: 'v.', // Column header for week of the year
    dateFormat: 'yy-mm-dd', // Swedish date format
    buttonImage: 'img/calendar.png',
    buttonImageOnly: true,
    buttonText: 'Klicka för att välja datum',
    showOn: 'both',
    minDate: dateToday,
    firstDay: 1
});

Upvotes: 1

Related Questions