begin date-end date -> move to 10row selectbox

[Piotr Pietrowski]

Hello everybody,

I have a *big* problem. I thought its not that big problem for you
professionals...

Anyway, I have a begin date which has 3 dropdown boxes
(day/Month/Year).
The same for the end date.
So if somebody selects the begin date 13.12.2004 and the end date
19.12.2004
all the dates between should be moved through javascript to the 10 row
multiple selectbox. Those following shuold be moved:
13.12.2004
14.12.2004
15.12.2004
16.12.2004
17.12.2004
18.12.2004
19.12.2004
After I entered the begin date, I enter the end date, after that I
press on a link which moves the dates to the select box.
I can not make any reloads - it has to be made through javascript by
clicking a link e.g. - thats why I am in that newsgroup ;-)

I hope I described the problem good enough - thank you for your
sympathies

Dieter

 

[Lasse Reichstein Nielsen]

Anyway, I have a begin date which has 3 dropdown boxes
(day/Month/Year).
The same for the end date.

Ok. You should test for illegal inputs too (31th of February and the like).
But let's convert them to dates:

function convertToDate(day,month,year) {
day = Number(day);
month = Number(month)-1;
year = Number(year);
var date = new Date(year,month,day);
if (month != date.getMonth() || day != date.getDate()) {
return null; // or throw an error.
}
return date;
}

You can then find the start and end date (the varable "form" is
assumed to refer to the form the select elements are in):
---
var elems = form.elements;
var fromSelectDay = elem['fromSelectDay'];
var fromSelectMonth = elem['fromSelectMonth'];
var fromSelectYear = elem['fromSelectYear'];
var fromDate = convertToDate(
fromSelectDay.options[fromSelectDay.selectedIndex].value,
fromSelectMonth.options[fromSelectMonth.selectedIndex].value,
fromSelectYear.options[fromSelectYear.selectedIndex].value);
if (fromDate == null) {
alert("From date illegal!");
// ... abort somehow
}

var toSelectDay = elem['toSelectDay'];
var toSelectMonth = elem['toSelectMonth'];
var toSelectYear = elem['toSelectYear'];
var toDate = convertToDate(
toSelectDay.options[toSelectDay.selectedIndex].value,
toSelectMonth.options[toSelectMonth.selectedIndex].value,
toSelectYear.options[toSelectYear.selectedIndex].value);
if (toDate == null) {
alert("To date illegal!");
// ... abort somehow
}
---

So if somebody selects the begin date 13.12.2004 and the end date
19.12.2004
all the dates between should be moved through javascript to the 10 row
multiple selectbox.

[both inclusive]

After I entered the begin date, I enter the end date, after that I
press on a link which moves the dates to the select box.

Why a link. It would be more appropriate to have a button. Links link
to pages. Buttons activets functionalty.

Anyway, this code creates the ten new options and adds them to the
select called "targetSelect" of the same form as above:
---
function LZ(n) {// add leading zero
return (n<10?"0":"")+n;
}

var targetSelect = elems['targetSelect'];
targetSelect.options.length = 0; // clear previous content
while(fromDate <= toDate) {
var year = fromDate.getYear(); // use getFullYear if you
// only target modern browsers
if (year < 1000) {year += 1900;} // and then you can omit this
var month = fromDate.getMonth()+1;
var day = formDate.getDate();
var dateString = LZ(day)+"."+LZ(month)+"."+year;
targetSelect.options[targetSelect.options.length] =
new Option(dateString,dateString);

fromDate.setDate(fromDate.getDate()+1); // next day
}
---

That should do it, if you execute all of this when you click on the
button.

/L

 

[McKirahan]

Hello everybody,

I have a *big* problem. I thought its not that big problem for you
professionals...

Anyway, I have a begin date which has 3 dropdown boxes
(day/Month/Year).
The same for the end date.
So if somebody selects the begin date 13.12.2004 and the end date
19.12.2004
all the dates between should be moved through javascript to the 10 row
multiple selectbox. Those following shuold be moved:
13.12.2004
14.12.2004
15.12.2004
16.12.2004
17.12.2004
18.12.2004
19.12.2004
After I entered the begin date, I enter the end date, after that I
press on a link which moves the dates to the select box.
I can not make any reloads - it has to be made through javascript by
clicking a link e.g. - thats why I am in that newsgroup ;-)

I hope I described the problem good enough - thank you for your
sympathies

Dieter

Here's an ugly solution that populates ten SELECT options with the starrting
date and the next nine days: Watch for word-wrap.



<html>
<head>
<title>DDMMYY.htm</title>
<script type="text/javascript">
function populate(former) {
var DD = former.DD.options[former.DD.selectedIndex].text;
var MM = former.MM.options[former.MM.selectedIndex].text;
var YY = former.YY.options[former.YY.selectedIndex].text;
var DA = parseInt(DD);
var MO = parseInt(MM);
var YR = parseInt(YY);
var LY = false;
if (YR % 4 == 0 && (YR % 100 != 0 || YR % 400 == 0)) LY = true;
if (MO == 4 || MO == 6 || MO == 9 || MO == 11) {
if (DA == 31) DA = 0;
} else if (MO == 2) {
if (DA == 29 && !LY) DA = 0;
if (DA == 30 || DA == 31) DA = 0;
}
if (DA == 0) {
alert("Invalid Day for this Month!");
return;
}
var ZZ = new Array();
ZZ[0] = DD + "/" + MM + "/" + YY;
for (var i=1; i<former.ZZ.length; i++) {
DA++;
if (DA > 31) {
DA = 0;
if (MO == 12) {
MO = 0;
YR++;
}
} else if (MO == 4 || MO == 6 || MO == 9 || MO == 11) {
if (DA > 30) DA = 0;
} else if (MO == 2) {
if (LY) {
if (DA > 29) DA = 0;
} else {
if (DA > 28) DA = 0;
}
}
if (DA == 0) {
DA++;
MO++;
}
DD = (DA + 100) + "";
MM = (MO + 100) + "";
ZZ = DD.substr(1,2) + "/" + MM.substr(1,2) + "/" + YR;
}
for (var j=0; j<ZZ.length; j++) {
former.ZZ.options[j].text = ZZ[j];
}
}
</script>
</head>
<body>
<form>
<select name="DD">
<option>01<option>02<option>03<option>04<option>05
<option>06<option>07<option>08<option>09<option>10
<option>11<option>12<option>13<option>14<option>15
<option>16<option>17<option>18<option>19<option>20
<option>21<option>22<option>23<option>24<option>25
<option>26<option>27<option>28<option>29<option>30
<option>31
</select>
<select name="MM">
<option>01<option>02<option>03<option>04<option>05
<option>06<option>07<option>08<option>09<option>10
<option>11<option>12
</select>
<select name="YY">
<option>2003<option>2004
</select>
<input type="button" value="OK" onclick="populate(this.form)">
<br><br>
<select name="ZZ" size="10">
<option><option><option><option><option>
<option><option><option><option><option>
</select>
</form>
</body>
</html>

 

[Dr John Stockton]

JRS: In article <FDfQb.109361$nt4.410819@attbi_s51>, seen in

Here's an ugly solution that populates ten SELECT options with the starrting
date and the next nine days: Watch for word-wrap.

Trash.

function populate(former) {
var DD = former.DD.options[former.DD.selectedIndex].text;
var MM = former.MM.options[former.MM.selectedIndex].text;
var YY = former.YY.options[former.YY.selectedIndex].text;
var DA = parseInt(DD);
var MO = parseInt(MM);

ISTM that you have designed to allow failure during the first nine
months of the year and the first nine days of the remaining months.

parseInt("08") = parseInt("09") = 0

var DA = + former.DD.options[former.DD.selectedIndex].text;

var YR = parseInt(YY);

var LY = false;
if (YR % 4 == 0 && (YR % 100 != 0 || YR % 400 == 0)) LY = true;

var LY = (YR % 4 == 0 && (YR % 100 != 0 || YR % 400 == 0)) ;

is better than the two lines quoted, although not needed.

if (MO == 4 || MO == 6 || MO == 9 || MO == 11) {
if (DA == 31) DA = 0;
} else if (MO == 2) {
if (DA == 29 && !LY) DA = 0;
if (DA == 30 || DA == 31) DA = 0;
}
if (DA == 0) {
alert("Invalid Day for this Month!");
return;

Unnecessary if a Date Object is used; see LRN's post.

}
var ZZ = new Array();
ZZ[0] = DD + "/" + MM + "/" + YY;
for (var i=1; i<former.ZZ.length; i++) {
DA++;
if (DA > 31) {
DA = 0;
if (MO == 12) {
MO = 0;
YR++;
}
} else if (MO == 4 || MO == 6 || MO == 9 || MO == 11) {
if (DA > 30) DA = 0;
} else if (MO == 2) {
if (LY) {
if (DA > 29) DA = 0;
} else {
if (DA > 28) DA = 0;
}
}
if (DA == 0) {
DA++;
MO++;
}

Unnecessary if a Date Object is used; see LRN's post.

DD = (DA + 100) + "";
MM = (MO + 100) + "";
ZZ = DD.substr(1,2) + "/" + MM.substr(1,2) + "/" + YR;

The OP did ask for dots, not slashes.

Where code is repetitive, a function should be used.

}
for (var j=0; j<ZZ.length; j++) {
former.ZZ.options[j].text = ZZ[j];
}
}

Reading on a topic should precede writing answers on it.


Piotr : Unless you want to confuse the Americans (often amusing), I
suggest that you use YYYY-MM-DD for dates. Anyone can understand that
unambiguous format.

 

[McKirahan]

JRS: In article <FDfQb.109361$nt4.410819@attbi_s51>, seen in



Trash.

I did say it was ugly!

I didn't realize that it was incorrect; nor how inefficient it was.

How about:


<html>
<head>
<title>DDMMYYLZ.htm</title>
<script type="text/javascript">
function LZ(n) {
// add leading zero
return (n<10?"0":"")+n;
}
function OK(former) {
var DA = parseInt(former.DD.options[former.DD.selectedIndex].value);
var MO = parseInt(former.MM.options[former.MM.selectedIndex].value);
var YR = parseInt(former.YY.options[former.YY.selectedIndex].value);
var DT = new Date(YR,MO-1,DA);
if (DT == null) {
alert("Invalid Date");
return;
}
for (var i=0; i<former.ZZ.length; i++) {
var YY = DT.getFullYear();
var MM = DT.getMonth()+1;
var DD = DT.getDate();
former.ZZ.options.text = LZ(DD) + "." + LZ(MM) + "." + LZ(YY);
DT.setDate(DT.getDate()+1);
}
}
</script>
</head>
<body>
<form>
<select name="DD">
<option value="1">01<option value="2">02<option value="3">03
<option value="4">04<option value="5">05<option value="6">06
<option value="7">07<option value="8">08<option value="9">09
<option value="10">10<option value="11">11<option value="12">12
<option value="13">13<option value="14">14<option value="15">15
<option value="16">16<option value="17">17<option value="18">18
<option value="19">19<option value="20">20<option value="21">21
<option value="22">22<option value="23">23<option value="24">24
<option value="25">25<option value="26">26<option value="27">27
<option value="28">28<option value="29">29<option value="30">30
<option value="31">31
</select>
<select name="MM">
<option value="1">01<option value="2">02<option value="3">03
<option value="4">04<option value="4">05<option value="6">06
<option value="7">07<option value="8">08<option value="9">09
<option value="10">10<option value="11">11<option value="12">12
</select>
<select name="YY">
<option value="2003">2003<option value="2004">2004
</select>
<input type="button" value="OK" onclick="OK(this.form)">
<br><br>
<select name="ZZ" size="10">
<option><option><option><option><option>
<option><option><option><option><option>
</select>
</form>
</body>
</html>


Note: The OP used a Begin Date and an End Date to fill in a drop-down list
of ten items. This approach lets the "size" of the select determine who
many "options" to generate based only on a Begin Date. Perhaps the OP
wanted a drop=down list of all dates between Begin Date and End Date but it
wasn't stated so I interpreted his requirement to always show ten dates.

 

[Lasse Reichstein Nielsen]

How about:

function OK(former) {
var DA = parseInt(former.DD.options[former.DD.selectedIndex].value);

You still use parseInt without the second argument. You have added values
to all the options without prefixed zeros, which avoids the problem, but
it would have been *much* easier to just add a ",10" to tell parseInt
to use decimal, or use the Number function instead of parseInt.

var DT = new Date(YR,MO-1,DA);
if (DT == null) {
alert("Invalid Date");

Using "new Date" will *never* return null. Even if all three are NaN, it
will return a Date object (although with its valueOf returns NaN).
The test for whether DT is not the correct date is, e.g.:

if (DT.getMonth() != MO-1 || DT.getDate() != DA) {
// invalid date
}

for (var i=0; i<former.ZZ.length; i++) { ....
former.ZZ.options.text = LZ(DD) + "." + LZ(MM) + "." + LZ(YY);

You migth run into troubles in some browers here, because the text
property of an option is described as read-only in the DOM
specification. I recommend createing a new Option instead:

var dateString = LZ(DD) + "." + LZ(MM) + "." + YY;
former.elements['ZZ'].options = new Option(dateString);

/L

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in

Using "new Date" will *never* return null. Even if all three are NaN, it
will return a Date object (although with its valueOf returns NaN).
The test for whether DT is not the correct date is, e.g.:

if (DT.getMonth() != MO-1 || DT.getDate() != DA) {
// invalid date
}

Since the values come from select controls, the only possible error is
that DA is in 29,30,31 and too big for its MO. Therefore, each one of
the two tests is sufficient on its own, in this case.

My js-date6.htm has a selector where the days offered depend on month
and year chosen, making invalidity impossible. It does make the code
longer.

Unary + could be used instead of parseInt.

ISTM that, in options, there is nothing special about value, and another
name could be used; and that, instead of setting value in HTML, it could
be set in javascript. Setting it to 0123, it reads back as 83, which
proves numericality. But that's probably more interesting than useful.