Automatically fill in dates

**netsurfer** · Jul 23 '05, 05:37 PM

Re: Automatically fill in dates

I'm going to try to make this concept easier to answer since the above
is messy code please see my "hypothetic al" example and tell me how I
can get dates automatically entered in with this HTML document:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<INPUT TYPE=text ID=Amount1 Name=Amount1 Value=""">&nbsp ; Date gets
entered
here. Example user enters "2/9/05"<p>&nbs p;<INPUT TYPE=text
ID=Amount1 Name=Amount1 Value=""">&nbsp ;
Thursday....&qu ot;2/3/05" automatically fills here.</p>

<p><INPUT TYPE=text ID=Amount2 Name=Amount2 Value=""">&nbsp ; 
Friday.....&quo t;2/4/05" automatically fills here.</p>
<p><INPUT TYPE=text ID=Amount3 Name=Amount3 Value=""">&nbsp ;
Saturday....&qu ot;2/5/05" automatically fills here.</p>
<p><INPUT TYPE=text ID=Amount4 Name=Amount4 Value=""">&nbsp ; 
Sunday....&quot ;2/6/05" automatically fills here.</p>
<p><INPUT TYPE=text ID=Amount5 Name=Amount5 Value=""">&nbsp ; 
Monday..." 2/7/05" automatically fills here.</p>
<p><INPUT TYPE=text ID=Amount6 Name=Amount6 Value=""">&nbsp ;
Tuesday....&quo t;2/8/05"
automatically fills in here.</p>
<p><INPUT TYPE=text ID=Amount7 Name=Amount7 Value=""">&nbsp ; 
Wednesday...... "2/9/05" automatically fills in here.</p>

</body>

</html>

**Dr John Stockton** · Jul 23 '05, 05:38 PM

Re: Automatically fill in dates

JRS: In article <1107790941.334 955.138660@l41g 2000cwc.googleg roups.com>
, dated Mon, 7 Feb 2005 07:42:21, seen in news:comp.lang. javascript,
netsurfer <netsurfer802@y ahoo.com> posted :[color=blue]
>
>The date entered at the top would most likely be on a Wednesday then I
>need to have all the prior dates pop in. Example: User enters 2/9/05
>in the date field at the top being a Wednesday...I need the dates at
>the bottom to be filled in automatically, respectively as 2/3/05,
>2/4/05, 2/5/05, 2/6/05, 2/7/05, 2/8/05, 2/9/05 above the days Thurs.,
>Fri., Sat., Sun., Mon., Tues. and Wed. See text below as HTML. Thanks
>very much in advanced for any ideas:[/color]

Read the newsgroup FAQ.

When posting code, do not allow your posting agent to wrap lines; code
should be executable as transmitted.

Don't post excess code. In particular, most scripts should work without
CSS, so strip out CSS and as much else as possible. Then test your
reduced page to check that it still shows what needs to be shown, and no
more.

Explain where your problem actually lies; does it lie in the execution
of code after data entry, or the computation of the dates, in the
representation as date strings, or in the emplacement of those strings?

Avoid FFF on the WWW.

Don't fix font sizes in points, it is a breach of the DDA, if you
provide a public service.

http://validator.w3.org/ will probably give a number of warnings about
your HTML.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

**Fred Oz** · Jul 23 '05, 05:38 PM

Re: Automatically fill in dates

netsurfer wrote:[color=blue]
> I'm going to try to make this concept easier to answer since the above
> is messy code please see my "hypothetic al" example and tell me how I
> can get dates automatically entered in with this HTML document:[/color]

Thanks for cleaning up your code, at least a little.

[...][color=blue]
> <INPUT TYPE=text ID=Amount1 Name=Amount1 Value=""">&nbsp ; Date gets[/color]

All attributes should be quoted, and that extra " at the end
will upset most browsers.

You only need both id and name attributes on form elements under
certain circumstances, it is not needed here. Just use name.
And if you aren't going to give the input a value, why include an
empty value attribute? It's optional, it isn't required and
just gives more code to maintain (and you've got an error...)

I also would not use input fields for the generated dates as
users will likely try to modify them (unless you want your users
modifying the dates).

[...][color=blue]
> Thursday....&qu ot;2/3/05" automatically fills here.</p>[/color]

Do not assume US dates. Always specify input formats and units
where appropriate. Assume your users are really dumb (but don't
*treat* them as dumb). Make everything obvious with subtle but
concise and accurate help.

[...]

It seems you are trying to create a Hegira week - or am I way
off? The code below creates a set of dates from Thu to the
following Wed that includes the input date.

It does not validate the input - you need to do that. You need
to check that integers within an appropriate range have been
entered, I'll leave that up to you.

<html><head>
<title>Date Play</title>
<style type="text/css">
body {font-family: sans-serif;}
..dd {text-align: center;}
..od {text-align: right; border: 1px solid blue; width: 15em;}
</style>
<script type="text/javascript">

var months =
['January','Febr uary','March',' April','May','J une','July',
'August','Septe mber','October' ,'November','De cember'];

var days = ['Sunday','Monda y','Tuesday','W ednesday',
'Thursday','Fri day','Saturday']

function doDates(f) {

var slot; // will store a reference to the output element

// Get the input text and divide into bits
var dBits = f.startDate.val ue.split('-');

/* Code here to validate input
....
*/

// If passes validation, create a date at noon on date entered
var sDate = new Date(dBits[0],dBits[1]-1,dBits[2],'12');

// Go backward through week to Thursday
while ( days[sDate.getDay()] != days[4]) {
sDate.setDate(s Date.getDate()-1);
}

// Write the days of the week to the fields
for (var i=0; i<7; i++){
var dateString = days[sDate.getDay()]
+ ', ' + addZ(sDate.getD ate())
+ ' ' + months[sDate.getMonth( )]
+ ', ' + sDate.getFullYe ar();

// Get the field to write to
if (document.getEl ementById) {
slot = document.getEle mentById('day' + i);
} else if (document.all) {
slot = document.all('d ay' + i);
}

// See if slot has any child nodes. If so, remove them
while (slot.firstChil d) {
slot.removeChil d(slot.firstChi ld);
}

// Add a text node with the date string in it
slot.appendChil d(document.crea teTextNode(date String));

// Add one day to the date
sDate.setDate(+ sDate.getDate() +1);
}
}

// Adds a leading zero to single digit numbers
function addZ(x) {
return (x<10)? '0'+x:x;
}
</script>

</head>
<body>

<form action="">
<table>
<tr>
<td class="dd">Ente r the start date<br>(yyyy-mm-dd):</td>
<td class="dd"><INP UT TYPE="text" id="startDate"
name="startDate " value="2005-02-09"><br>
<INPUT TYPE="button" value="Set dates" onclick="
doDates(this.fo rm);
">
<input type="reset">
</td>
</tr>
<tr>
<td class="dd">Date s:</td>
<td>
<p class="od">
<span id="day0">&nbsp ;</span><br>
<span id="day1">&nbsp ;</span><br>
<span id="day2">&nbsp ;</span><br>
<span id="day3">&nbsp ;</span><br>
<span id="day4">&nbsp ;</span><br>
<span id="day5">&nbsp ;</span><br>
<span id="day6">&nbsp ;</span>
</p>
</td>
</tr>
</table>
</form>

</body>

</html>

--
Fred

**netsurfer** · Jul 23 '05, 05:39 PM

Re: Automatically fill in dates

Fred Oz wrote:[color=blue]
> netsurfer wrote:[color=green]
> > I'm going to try to make this concept easier to answer since the[/color][/color]
above[color=blue][color=green]
> > is messy code please see my "hypothetic al" example and tell me how[/color][/color]
I[color=blue][color=green]
> > can get dates automatically entered in with this HTML document:[/color]
>
> Thanks for cleaning up your code, at least a little.
>
> [...][color=green]
> > <INPUT TYPE=text ID=Amount1 Name=Amount1 Value=""">&nbsp ; Date gets[/color]
>
> All attributes should be quoted, and that extra " at the end
> will upset most browsers.
>
> You only need both id and name attributes on form elements under
> certain circumstances, it is not needed here. Just use name.
> And if you aren't going to give the input a value, why include an
> empty value attribute? It's optional, it isn't required and
> just gives more code to maintain (and you've got an error...)
>
> I also would not use input fields for the generated dates as
> users will likely try to modify them (unless you want your users
> modifying the dates).
>
> [...][color=green]
> > Thursday....&qu ot;2/3/05" automatically fills here.</p>[/color]
>
> Do not assume US dates. Always specify input formats and units
> where appropriate. Assume your users are really dumb (but don't
> *treat* them as dumb). Make everything obvious with subtle but
> concise and accurate help.
>
> [...]
>
> It seems you are trying to create a Hegira week - or am I way
> off? The code below creates a set of dates from Thu to the
> following Wed that includes the input date.
>
> It does not validate the input - you need to do that. You need
> to check that integers within an appropriate range have been
> entered, I'll leave that up to you.
>
>
> <html><head>
> <title>Date Play</title>
> <style type="text/css">
> body {font-family: sans-serif;}
> .dd {text-align: center;}
> .od {text-align: right; border: 1px solid blue; width: 15em;}
> </style>
> <script type="text/javascript">
>
> var months =
> ['January','Febr uary','March',' April','May','J une','July',
> 'August','Septe mber','October' ,'November','De cember'];
>
> var days = ['Sunday','Monda y','Tuesday','W ednesday',
> 'Thursday','Fri day','Saturday']
>
> function doDates(f) {
>
> var slot; // will store a reference to the output element
>
> // Get the input text and divide into bits
> var dBits = f.startDate.val ue.split('-');
>
> /* Code here to validate input
> ....
> */
>
> // If passes validation, create a date at noon on date entered
> var sDate = new Date(dBits[0],dBits[1]-1,dBits[2],'12');
>
> // Go backward through week to Thursday
> while ( days[sDate.getDay()] != days[4]) {
> sDate.setDate(s Date.getDate()-1);
> }
>
> // Write the days of the week to the fields
> for (var i=0; i<7; i++){
> var dateString = days[sDate.getDay()]
> + ', ' + addZ(sDate.getD ate())
> + ' ' + months[sDate.getMonth( )]
> + ', ' + sDate.getFullYe ar();
>
> // Get the field to write to
> if (document.getEl ementById) {
> slot = document.getEle mentById('day' + i);
> } else if (document.all) {
> slot = document.all('d ay' + i);
> }
>
> // See if slot has any child nodes. If so, remove them
> while (slot.firstChil d) {
> slot.removeChil d(slot.firstChi ld);
> }
>
> // Add a text node with the date string in it
> slot.appendChil d(document.crea teTextNode(date String));
>
> // Add one day to the date
> sDate.setDate(+ sDate.getDate() +1);
> }
> }
>
>
> // Adds a leading zero to single digit numbers
> function addZ(x) {
> return (x<10)? '0'+x:x;
> }
> </script>
>
> </head>
> <body>
>
> <form action="">
> <table>
> <tr>
> <td class="dd">Ente r the start date<br>(yyyy-mm-dd):</td>
> <td class="dd"><INP UT TYPE="text" id="startDate"
> name="startDate " value="2005-02-09"><br>
> <INPUT TYPE="button" value="Set dates" onclick="
> doDates(this.fo rm);
> ">
> <input type="reset">
> </td>
> </tr>
> <tr>
> <td class="dd">Date s:</td>
> <td>
> <p class="od">
> <span id="day0">&nbsp ;</span><br>
> <span id="day1">&nbsp ;</span><br>
> <span id="day2">&nbsp ;</span><br>
> <span id="day3">&nbsp ;</span><br>
> <span id="day4">&nbsp ;</span><br>
> <span id="day5">&nbsp ;</span><br>
> <span id="day6">&nbsp ;</span>
> </p>
> </td>
> </tr>
> </table>
> </form>
>
> </body>
>
> </html>
>
>
>
> --
> Fred[/color]

Ahhh...very cool..thanks Fred.

**Dr John Stockton** · Jul 23 '05, 05:40 PM

Re: Automatically fill in dates

JRS: In article <4208acc3$0$189 34$5a62ac22@per-qv1-newsreader-
01.iinet.net.au >, dated Tue, 8 Feb 2005 22:11:51, seen in
news:comp.lang. javascript, Fred Oz <ozfred@iinet.n et.auau> posted :[color=blue]
>netsurfer wrote:[color=green]
>> I'm going to try to make this concept easier to answer since the above
>> is messy code please see my "hypothetic al" example and tell me how I
>> can get dates automatically entered in with this HTML document:[/color]
>
> Thanks for cleaning up your code, at least a little.
>
>[...][color=green]
>> <INPUT TYPE=text ID=Amount1 Name=Amount1 Value=""">&nbsp ; Date gets[/color]
>
> All attributes should be quoted, and that extra " at the end
> will upset most browsers.[/color]

Where an attribute is a pure alphanumeric identifier, then IMHO quoting
just adds to bloat, clutter, and the possibility of misquoting.

MSIE4 did not mind """; but of course W3's TIDY disliked it.

[color=blue]
> You only need both id and name attributes on form elements under
> certain circumstances, it is not needed here. Just use name.[/color]

Agreed - but, more importantly, different but nearby elements should
have different names/IDs. The OP had two Amount1 fields.

[color=blue]
> I also would not use input fields for the generated dates as
> users will likely try to modify them (unless you want your users
> modifying the dates).[/color]

They are, however, easy to address; and using readonly tends to
inhibit modification (what percentage of installed browsers honour
readonly?). In some contexts, they can be used to provide an indication
that the field is, or will be, calculated and is not supplied in HTML.
In this context, that is not needed.

[color=blue]
> Do not assume US dates.[/color]
[color=blue]
> It does not validate the input - you need to do that. You need
> to check that integers within an appropriate range have been
> entered, I'll leave that up to you.[/color]

You don't need to, taking that literally. Checking day-of-month in
1..31 allows Feb 30th, whereas by using a Date Object a full check of
field values can be done in a couple of lines - read the newsgroup FAQ!

[color=blue]
> var dBits = f.startDate.val ue.split('-');[/color]
.split(/\D+/) // more lenient : '+'?
[color=blue]
> // If passes validation, create a date at noon on date entered
> var sDate = new Date(dBits[0],dBits[1]-1,dBits[2],'12');[/color]

That can be done during full validation; the hours need not be a string,
and can be omitted (864e5 is not used).

[color=blue]
> // Go backward through week to Thursday
> while ( days[sDate.getDay()] != days[4]) {
> sDate.setDate(s Date.getDate()-1);
> }[/color]

with (sDate) setDate(getDate () - (n + getDay())%7)

should do that in one move, with n=3 for Thursday; and your array
lookups are superfluous.

[color=blue]
> // Get the field to write to
> if (document.getEl ementById) {
> slot = document.getEle mentById('day' + i);
> } else if (document.all) {
> slot = document.all('d ay' + i);
> }
>
> // See if slot has any child nodes. If so, remove them
> while (slot.firstChil d) {
> slot.removeChil d(slot.firstChi ld);
> }[/color]

Are there browsers with .firstChild but not getElementById ?

[color=blue]
> sDate.setDate(+ sDate.getDate() +1);[/color]
^ not needed

The OP needs to read the newsgroup FAQ, section 2.3, if he wants to
deserve assistance.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demo n.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

**pjryanSpamless@gmail.com** · Jul 23 '05, 05:40 PM

Re: Automatically fill in dates

Something simple that works, and sticks close to your original post:

<html>

<head>
<script>
function fillDates(){
//set array of weekdays
var weekday=new
Array("Sunday", "Monday","Tuesd ay","Wednesday" ,"Thursday","Fr iday","Saturday ")

//capture the entered date
enterDate = document.dateSt uff.Amount0.val ue;

// DO SOME ERROR HANDLING HERE CHECK FOR VALID DATE (MM/DD/YY) !!!!!

//split date into individual pieces
var dateArray = enterDate.split ('/')

//translate the string '05' to '2005'
dateArray[2] = "20"+dateAr ray[2]

//assemble date object
sdate = new Date(dateArray[2],dateArray[0]-1,dateArray[1])

//work backwards through date fields
for (i = 7; i >= 1; i--){
//assemble date
newDate = weekday[sdate.getDay()] + " " + ((sdate.getMont h()+1) +
"/" + sdate.getDate() + "/" +
sdate.getFullYe ar().toString() .substring(2,4) )

//write date
eval("document. dateStuff.Amoun t" + i + ".value = newDate")

//go back one day
sdate = new Date(sdate.getT ime() - 86400000);
}

}

</script>

</head>

<body>

<form name="dateStuff ">

<p><INPUT TYPE=text ID=Amount0 Name=Amount0 Value="">
<a href="#" onClick="fillDa tes()">Enter</a>
  &nb sp; Date gets entered here. Example user enters
"2/9/05"</p>

<p><INPUT TYPE=text ID=Amount1 Name=Amount1 Value="">
Thursday...."2/3/05" automatically fills here.</p>

<p><INPUT TYPE=text ID=Amount2 Name=Amount2 Value="">
Friday....."2/4/05" automatically fills here.</p>

<p><INPUT TYPE=text ID=Amount3 Name=Amount3 Value="">
Saturday...."2/5/05" automatically fills here.</p>

<p><INPUT TYPE=text ID=Amount4 Name=Amount4 Value="">
Sunday...."2/6/05" automatically fills here.</p>

<p><INPUT TYPE=text ID=Amount5 Name=Amount5 Value="">
Monday..."2/7/05" automatically fills here.</p>

<p><INPUT TYPE=text ID=Amount6 Name=Amount6 Value="">
Tuesday...."2/8/05" automatically fills in here.</p>

<p><INPUT TYPE=text ID=Amount7 Name=Amount7 Value="">
Wednesday...... "2/9/05" automatically fills in here.</p>

</form>

</body>

</html>

**Fred Oz** · Jul 23 '05, 05:40 PM

Re: Automatically fill in dates

Dr John Stockton wrote:
[...][color=blue][color=green]
>> All attributes should be quoted, and that extra " at the end
>> will upset most browsers.[/color]
>
>
> Where an attribute is a pure alphanumeric identifier, then IMHO quoting
> just adds to bloat, clutter, and the possibility of misquoting.[/color]

The operative word being "should", not must. The w3c HTML 4.01
spec says:

3.2.2 Attributes

Elements may have associated properties, called attributes,
which may have values...

By default, SGML requires that all attribute values be
delimited using either double quotation marks (ASCII decimal
34) or single quotation marks (ASCII decimal 39).

...

In certain cases, authors may specify the value of an
attribute without any quotation marks. The attribute value may
only contain letters (a-z and A-Z), digits (0-9), hyphens
(ASCII decimal 45), periods (ASCII decimal 46), underscores
(ASCII decimal 95), and colons (ASCII decimal 58). We
recommend using quotation marks even when it is possible to
eliminate them.

<URL:http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2>

AFAIK, every example in the HTML 4.01 spec uses quoted attribute
values - so whilst it isn't required, I think it's a good idea.
[color=blue]
>
> MSIE4 did not mind """; but of course W3's TIDY disliked it.
>[/color]

Contrary to my post, most browsers probably will tolerate it,
but it sure messed with my text editor's syntax colouring!

[...][color=blue][color=green]
>> It does not validate the input - you need to do that. You need
>> to check that integers within an appropriate range have been
>> entered, I'll leave that up to you.[/color]
>
>
> You don't need to, taking that literally. Checking day-of-month in
> 1..31 allows Feb 30th, whereas by using a Date Object a full check of
> field values can be done in a couple of lines - read the newsgroup FAQ![/color]

I was thinking more along the lines of dates permitted within
the OP's application logic - say within one month of today. I
should have said 'dates', not 'integers' ... my bad.
[color=blue][color=green]
>> var dBits = f.startDate.val ue.split('-');[/color]
>
> .split(/\D+/) // more lenient : '+'?[/color]

Yes, great idea - allows and delimiter. But what to use for
on-screen help?

[...][color=blue][color=green]
>> // Get the field to write to
>> if (document.getEl ementById) {
>> slot = document.getEle mentById('day' + i);
>> } else if (document.all) {
>> slot = document.all('d ay' + i);
>> }
>>
>> // See if slot has any child nodes. If so, remove them
>> while (slot.firstChil d) {
>> slot.removeChil d(slot.firstChi ld);
>> }[/color]
>
>
> Are there browsers with .firstChild but not getElementById ?[/color]

Point taken, but the other choices were:
- put the same "while" on both sides of the else (ugh, bloat)
- use a DynWrite type solution - seems over the top for this
- add:
} else {
alert('Your browser ain\'t supported by this script');
return false;
}

Incidentally, I used firstChild rather than childNodes 'cos
Safari doesn't support access to the childNodes collection,
even though (eleRef.childNo des) may return true.
[color=blue][color=green]
>> sDate.setDate(+ sDate.getDate() +1);[/color]
>
> ^ not needed[/color]

The "+" is not needed to ensure the "1" is added rather than
appended, but to my mind it improves readability.

--
Fred

**Dr John Stockton** · Jul 23 '05, 05:41 PM

Re: Automatically fill in dates

JRS: In article <1107909458.775 890.285560@c13g 2000cwb.googleg roups.com>
, dated Tue, 8 Feb 2005 16:37:38, seen in news:comp.lang. javascript,
pjryanSpamless@ gmail.com posted :[color=blue]
>Something simple that works, and sticks close to your original post:[/color]

You have posted your article as a follow-up to mine, yet yours is
unrelated to mine. You have not given proper quoting or attribution.
You have allowed your posting agent to wrap code lines. Please find out
how to post correctly.

[color=blue]
> //write date
> eval("document. dateStuff.Amoun t" + i + ".value = newDate")[/color]

Routine eval is a bad idea for this. Read the newsgroup FAQ.

[color=blue]
> //go back one day
> sdate = new Date(sdate.getT ime() - 86400000);[/color]

Naive. Though (the page is obviously suited only to Murricans, as it
has FFF dates) it will suffice for users in much of Arizona, in Hawaii,
and in most of southern Indiana; and in non-contiguous territories
(American Samoa, Guam, Puerto Rico, the Virgin Islands).

Test it over the first Sunday on April, if you are in the rest of the
USA; the last one of March, if in the EU; about six months later, if
Antipodean (not Que, NT, WA, though).

Discover the difference between Date and Time.

Read the newsgroup FAQ.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Automatically fill in dates

Automatically fill in dates

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment