Calender for a html form

[robburne]

Hi,

Does anyone know how I can implement a calender that will autofill the date fields of a html form as in the example below, click the link and you'll see a little calender icon next to the date drop down fields.

http://www.easyjet.com/en/book/index.asp

Many thanks in advance.

Rob.

 

[BillyRayPreachersSon]

If you like their one, why not just view the source and copy it?

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Sure. This is a common thing. You can probably find plenty of calendar scripts to do this using google. Here are some suggestions:

http://javascript.internet.com/calendars/

http://www.mattkruse.com/javascript/calendarpopup/

http://www.scriptsearch.com/JavaScript/Scripts/Calendars/

http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Calendars/

http://www.java-scripts.net/javascripts/Calendar-Popup.phtml

http://www.webscriptsdirectory.com/JavaScript/Calendars/

http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[tsdragon]

My favorite popup calendar (and its free!) that can fill a field is the one from DynArch:

http://www.dynarch.com/projects/calendar/

It's very flexible and easy to use. If you don't want to read all of the documentation they have a "quick start" page with various examples that are easy to cut-n-paste.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[robburne]

Many thanks for all of the replies!

I'll take a look at all of the options!

Rob.

 

[tsdragon]

The DynArch calendar even has some features that I've never seen on another js calendar, like the ability to drag it around it if gets in your way, and some interesting ways of using it.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[j4606]

I like tigra cals.

http://www.softcomplex.com/products/tigra_calendar/

I havn't used any other cals but have used tigra cals a while back and they are very easy to work with and use.

I don't know the answer but my good friend Google does.

 

[BillyRayPreachersSon]

Personally, I would avoid the tigra calendar due to the simple fact that the demo on their website doesn't work correctly in Firefox.

While I realise they don't specifically say they support Firefox, it wouldn't take much to do so, and the dynarch one is pretty cool!

Just my 2p worth!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[robburne]

I think I am going to go with the following.....

http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm

The one issue is the order of the date parts. This calender lists the month first, then day then year. I would like day first.

I think it canbe changed within the .js file, I have taken a look but can't make head nor tail of it, would any experts care to take a quick look?

Rob.

 

[j4606]

On thier front page they have :
DateFormat STRING- optional. Default is set as a global variable in the script (MM/DD/YYYY on this page). The format of the generated Date value. It can be one of the following:
YYYYMMDD
YYYY-MM-DD *
YYYY-DD-MM *
YYYY/MM/DD *
YYYY/DD/MM *
YYYY-DD-MON * **
YYYY-MON-DD * **
MM-DD-YYYY *
DD-MM-YYYY *
MM/DD/YYYY *
DD/MM/YYYY *
DD-MON-YYYY * **
MON-DD-YYYY * **
* 2-digit year can be used instead of 4-digit year
** 3-character month name abbreviation can also be specified as MMM.


What your looking for I assume is dd-mm-yyy or dd/mm/yy

</script>
<form>

<script>DateInput('orderdate', true, [COLOR=red]'DD/MON/YYYY'[/color])</script>

<input type="button" onClick="alert(this.form.orderdate.value)" value="Show date value passed">

</form>

I don't know the answer but my good friend Google does.

 

[j4606]

<script type="text/javascript" src="calendarDateInput.js">

/***********************************************
* Jason's Date Input Calendar- By Jason Moon [URL unfurl="true"]http://calendar.moonscript.com/dateinput.cfm[/URL]
* Script featured on and available at [URL unfurl="true"]http://www.dynamicdrive.com[/URL]
* Keep this notice intact for use.
***********************************************/

</script>
<form>

<script>DateInput('orderdate', true, 'DD/MON/YYYY')</script>

<input type="button" onClick="alert(this.form.orderdate.value)" value="Show date value passed">

</form>

sorry the top of my code got cut off. just cut and pate to a text file and save it html. Also at the top of the js file. You can edit the defualt so you don't have to specify the format every time you call the cal.

/***********************************************
 Fool-Proof Date Input Script with DHTML Calendar
 by Jason Moon - calendar@moonscript.com
 ************************************************/

// Customizable variables
[COLOR=red]var DefaultDateFormat = 'MM/DD/YYYY'; // If no date format is supplied, this will be used instead[/color]

I don't know the answer but my good friend Google does.

 

[robburne]

Yes I read that but all that does it format the string which is made once the form is submitted. It does not change the date format when displayed in the form.

Thanks,

Rob.

 

[j4606]

Sorry I misread the question I edited the script a little, I hope it still works like its supposed to, but it isn't my code and it is relativly lengthy. Here is what I got working. Hope this is what you are looking for. I suggest not editing the original script and using this as a second copy. replace the NEW red color code with the old code on the bottom in white.
On my text pad the lines to replace span from 563-578.
new

[COLOR=red]
         writeln('<table cellpadding="0" cellspacing="2"><tr>' + String.fromCharCode(13) + '<td valign="middle">');
         writeln('<select' + InitialStatus + ' class="calendarDateInput" id="' + DateName + '_Day_ID" onChange="' + DateName + '_Object.changeDay(this)">');
	          for (var j=1;j<=eval(DateName + '_Object.picked.dayCount');j++) {
	             DaySelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.day') == j)) ? ' selected' : '';
	             writeln('<option' + DaySelected + '>' + j + '</option>');
	          }
	          writeln('</select>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '<td valign="middle">');

         
         writeln('<select class="calendarDateInput" id="' + DateName + '_Month_ID" onChange="' + DateName + '_Object.changeMonth(this)">');
         if (!Required) {
            var NoneSelected = (DefaultDate == '') ? ' selected' : '';
            writeln('<option value=""' + NoneSelected + '>' + UnselectedMonthText + '</option>');
         }
         for (var i=0;i<12;i++) {
            MonthSelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.monthIndex') == i)) ? ' selected' : '';
            writeln('<option value="' + i + '"' + MonthSelected + '>' + MonthNames[i].substr(0,3) + '</option>');
         }
         writeln('</select>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '<td valign="middle">');
                  writeln('<input' + InitialStatus + ' class="calendarDateInput" type="text" id="' + DateName + '_Year_ID" size="' + eval(DateName + '_Object.picked.yearPad.length') + '" maxlength="' + eval(DateName + '_Object.picked.yearPad.length') + '" title="Year" value="' + eval(DateName + '_Object.picked.yearPad') + '" onKeyPress="return YearDigitsOnly(window.event)" onKeyUp="' + DateName + '_Object.checkYear(this)" onBlur="' + DateName + '_Object.fixYear(this)">');
[/color]

old

         writeln('<table cellpadding="0" cellspacing="2"><tr>' + String.fromCharCode(13) + '<td valign="middle">');
         writeln('<select class="calendarDateInput" id="' + DateName + '_Month_ID" onChange="' + DateName + '_Object.changeMonth(this)">');
         if (!Required) {
            var NoneSelected = (DefaultDate == '') ? ' selected' : '';
            writeln('<option value=""' + NoneSelected + '>' + UnselectedMonthText + '</option>');
         }
         for (var i=0;i<12;i++) {
            MonthSelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.monthIndex') == i)) ? ' selected' : '';
            writeln('<option value="' + i + '"' + MonthSelected + '>' + MonthNames[i].substr(0,3) + '</option>');
         }
         writeln('</select>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '<td valign="middle">');
         writeln('<select' + InitialStatus + ' class="calendarDateInput" id="' + DateName + '_Day_ID" onChange="' + DateName + '_Object.changeDay(this)">');
         for (var j=1;j<=eval(DateName + '_Object.picked.dayCount');j++) {
            DaySelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.day') == j)) ? ' selected' : '';
            writeln('<option' + DaySelected + '>' + j + '</option>');
         }
         writeln('</select>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '<td valign="middle">');
         writeln('<input' + InitialStatus + ' class="calendarDateInput" type="text" id="' + DateName + '_Year_ID" size="' + eval(DateName + '_Object.picked.yearPad.length') + '" maxlength="' + eval(DateName + '_Object.picked.yearPad.length') + '" title="Year" value="' + eval(DateName + '_Object.picked.yearPad') + '" onKeyPress="return YearDigitsOnly(window.event)" onKeyUp="' + DateName + '_Object.checkYear(this)" onBlur="' + DateName + '_Object.fixYear(this)">');

I don't know the answer but my good friend Google does.

 

[robburne]

You´re a star that works great many thanks.

One other thing, on my original calender (before I implemented the javascript version) I was using some css to control the look:

<select name=date style="width: 50px; font-size:10">

Namely using the width to spread the 3 date boxes over the area of the table data and size to reduced the text inside the drop downs.

Would it be possible to add these styles to the .js file too?

Thanks in advance.

Rob.

 

[BillyRayPreachersSon]

Yes - you should have no problems at all adding them into the JS file code. Just put the CSS in at the same place as the original.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]