Date script for Dropdown using Javascript/JQuery

Question

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

i think you need to Google a little to find some logic for generating calender.. then you try displaying it as you want. try out some working stuff then will help you... — Murtaza
– Murtaza, Commented Jan 10, 2012 at 9:01

Jai Pandya · Accepted Answer · 2012-01-10 10:44:03Z

3

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.

edited Jan 10, 2012 at 10:44

answered Jan 10, 2012 at 10:17

Jai Pandya

2,34919 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Learning Over a year ago

I tried to call the function but it does not show anything <script type="text/javascript"> pad(2) </script>. I am doing something wrong

Jai Pandya Over a year ago

See it working here: jsfiddle.net/saQTw (pad just adds leading zero to single digit numbers, check the code :) )

Rodik · Accepted Answer · 2012-01-10 08:59:10Z

2

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

answered Jan 10, 2012 at 8:59

Rodik

4,10228 silver badges49 bronze badges

6 Comments

Rory McCrossan Over a year ago

I was thinking the same, but i cant use popup Calenders etc in the question means this may not be suitable for the OP.

Rodik Over a year ago

That is not a popup, that is a Dropdown, just like OP asked.

Rory McCrossan Over a year ago

I took dropdown to mean filling a native HTML select box - hence my first comment. Without clarification from the OP it's hard to tell exactly what he wants. This is the best solution though IMO.

Rodik Over a year ago

Ok, I see what you mean. Perhaps some input from OP would clear this up.

Jai Pandya Over a year ago

@RoryMcCrossan I took the same meaning, hence is the solution I provided. Though, I also don't think giving dates of 3 months in a select box can be nice idea anywhere.

|

Collectives™ on Stack Overflow

Date script for Dropdown using Javascript/JQuery

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related