CODEWITHSUNDEEP
javascriptjquery
Learning
Learning

Reputation: 20001

Date script for Dropdown using Javascript/JQuery

I need to populate dropdown/ select list with calender dates in DD-MM-YYYY format, I have to do this in JavaScript and script should automatically fill Dropdown with dates for next 3 months.

I tried to look for such script but could not find. I would appreciate any help. i am open to use any jQuery if it works.

I have to fill dropdown with date in the format mentioned i cant use popup Calenders etc..

Example:

<select class="ddDates" id="Dates" name="Dates">
    <option value="10-01-2012" selected>10-01-2012</option>
    <option value="11-01-2012">11-01-2012</option>
    <option value="12-01-2012">12-01-2012</option>
    <option value="13-01-2012">13-01-2012</option>
</select>

I have searched google and i cant even find the logic how i can read system calender and populate the dropdown/ select list

Upvotes: 1

Views: 2222

Answers (2)

Jai Pandya
Jai Pandya

Reputation: 2309

This code generates the markup in question using JavaScript (and jQuery)

function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
    date.setDate(date.getDate() + 1);
    formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' +  date.getUTCFullYear();
    optionElement = $('<option>')
    optionElement.attr('value',formattedDate);
    optionElement.text(formattedDate);
    selectElement.append(optionElement);
}

You can change the value of count according to your logic.

Upvotes: 3

Rodik
Rodik

Reputation: 4092

jQuery UI's Datepicker: http://jqueryui.com/demos/datepicker/

Upvotes: 2

Related Questions