JavaScript - Correct Day, For Month

Hello everyone! I am using a javascript datepicker for a form field, and I had not noticed this before someone brought it up. I dont remember where I got the script but I am wondering if this error can be fixed. I had a look though the code but I do not program javascript, so nothing sticks out to me.

The problem comes when there is already a date in the field. Let me start by saying we format our dates as dd/mm/yyyy.

When a user clicks the field and opens the calendar it automatically goes to the date that is in the field (if there is one). Everything works fine, but when there its a number in the dd/ position that is under 12, the calendar uses it as the month. If the number is over 12, it uses the /mm/ as the month, which is correct.

So today for example, if the date in the field is 08/10/2010, and a user clicks the field to open the calendar, the calendar goes to August 2010... If the date is 15/10/2010 it will go to October which is correct.

Sorry for the length. I am wondering if this can be fixed somehow because finding a new datepicker and switching it on all my pages would take a very long time. Below is the datepicker.js, thanks to anyone who has time to take a look!


Code:

/*
 * DatePicker
 * @author Rick Hopkins
 * @modified by Micah Nolte and Martin Vašina
 * @version 0.3.2
 * @classDescription A date picker object. Created with the help of MooTools v1.11
 * MIT-style License.

-- start it up by doing this in your domready:

$$('input.DatePicker').each( function(el){
	new DatePicker(el);
});

 */

var DatePicker = new Class({

	/* set and create the date picker text box */
	initialize: function(dp){

		// Options defaults
		this.dayChars = 1; // number of characters in day names abbreviation
		this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		this.format = 'dd/mm/yyyy';
		this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
		this.yearOrder = 'asc';
		this.yearRange = 10;
		this.yearStart = (new Date().getFullYear());


		// Finds the entered date, or uses the current date
		if(dp.value != '') {
			dp.then = new Date(dp.value);
			dp.today = new Date();
		} else {
			dp.then = dp.today = new Date();
		}
		// Set beginning time and today, remember the original
		dp.oldYear = dp.year = dp.then.getFullYear();
		dp.oldMonth = dp.month = dp.then.getMonth();
		dp.oldDay = dp.then.getDate();
		dp.nowYear = dp.today.getFullYear();
		dp.nowMonth = dp.today.getMonth();
		dp.nowDay = dp.today.getDate();

		// Pull the rest of the options from the alt attr
		if(dp.alt) {
			options = Json.evaluate(dp.alt);
		} else {
			options = [];
		}
		dp.options = {
			monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames, 
			daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth, 
			dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
			startDay : options.startDay || this.startDay,
			dayChars : options.dayChars || this.dayChars, 
			format: options.format || this.format,
			yearStart: options.yearStart || this.yearStart,
			yearRange: options.yearRange || this.yearRange,
			yearOrder: options.yearOrder || this.yearOrder
		};
		dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
		dp.container = false;
		dp.calendar = false;
		dp.interval = null;
		dp.active = false;
		dp.onclick = dp.onfocus = this.create.pass(dp, this);
	},

	/* create the calendar */
	create: function(dp){
		if (dp.calendar) return false;

		// Hide select boxes while calendar is up
		if(window.ie6){
			$$('select').addClass('dp_hide');
		}
		
		/* create the outer container */
		dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);
		
		/* create timers */
		dp.container.onmouseover = dp.onmouseover = function(){
			$clear(dp.interval);
		};
		dp.container.onmouseout = dp.onmouseout = function(){
			dp.interval = setInterval(function(){
				if (!dp.active) this.remove(dp);
			}.bind(this), 500);
		}.bind(this);
		
		/* create the calendar */
		dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);
		
		/* create the date object */
		var date = new Date();
		
		/* create the date object */
		if (dp.month && dp.year) {
			date.setFullYear(dp.year, dp.month, 1);
		} else {
			dp.month = date.getMonth();
			dp.year = date.getFullYear();
			date.setDate(1);
		}
		dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;
		
		/* set the day to first of the month */
		var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);
		
		
		
		/* create the month select box */
		monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
		for (var m = 0; m < dp.options.monthNames.length; m++){
			monthSel.options[m] = new Option(dp.options.monthNames[m], m);
			if (dp.month == m) monthSel.options[m].selected = true;
		}
		
		/* create the year select box */
		yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
		i = 0;
		dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
		if (dp.options.yearOrder == 'desc'){
			for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		} else {
			for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		}
		
		/* start creating calendar */
		calTable = new Element('table');
		calTableThead = new Element('thead');
		calSelRow = new Element('tr');
		calSelCell = new Element('th', {'colspan':'7'});
		monthSel.injectInside(calSelCell);
		yearSel.injectInside(calSelCell);
		calSelCell.injectInside(calSelRow);
		calSelRow.injectInside(calTableThead);
		calTableTbody = new Element('tbody');
		
		/* create day names */
		calDayNameRow = new Element('tr');
		for (var i = 0; i < dp.options.dayNames.length; i++) {
			calDayNameCell = new Element('th');
			calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars)); 
			calDayNameCell.injectInside(calDayNameRow);
		}
		calDayNameRow.injectInside(calTableTbody);
		
		/* create the day cells */
		while (firstDay <= dp.options.daysInMonth[dp.month]){
			calDayRow = new Element('tr');
			for (i = 0; i < 7; i++){
				if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
					calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
				} else {
					calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
				}
				// Show the previous day
				if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
					calDayCell.addClass('dp_selected');
				}
				// Show today
				if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
					calDayCell.addClass('dp_today');
				}
				firstDay++;
			}
			calDayRow.injectInside(calTableTbody);
		}
		
		/* table into the calendar div */
		calTableThead.injectInside(calTable);
		calTableTbody.injectInside(calTable);
		calTable.injectInside(dp.calendar);
		
		/* set the onmouseover events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseover = function(){
				el.addClass('dp_roll');
			}.bind(this);
		}.bind(this));
		
		/* set the onmouseout events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseout = function(){
				el.removeClass('dp_roll');
			}.bind(this);
		}.bind(this));
		
		/* set the onclick events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onclick = function(){
				ds = el.axis.split('|');
				dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
				this.remove(dp);
			}.bind(this);
		}.bind(this));
		
		/* set the onchange event for the month & year select boxes */
		monthSel.onfocus = function(){ dp.active = true; };
		monthSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp);
			this.create(dp);
		}.bind(this);
		
		yearSel.onfocus = function(){ dp.active = true; };
		yearSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp);
			this.create(dp);
		}.bind(this);
	},
	
	/* Format the returning date value according to the selected formation */
	formatValue: function(dp, year, month, day){
		/* setup the date string variable */
		var dateStr = '';
		
		/* check the length of day */
		if (day < 10) day = '0' + day;
		if (month < 10) month = '0' + month;
		
		/* check the format & replace parts // thanks O'Rey */
		dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
		dp.month = dp.oldMonth = '' + (month - 1) + '';
		dp.year = dp.oldYear = year;
		dp.oldDay = day;
		
		/* return the date string value */
		return dateStr;
	},
	
	/* Remove the calendar from the page */
	remove: function(dp){
		$clear(dp.interval);
		dp.active = false;
		if (window.opera) dp.container.empty();
		else if (dp.container) dp.container.remove();
		dp.calendar = false;
		dp.container = false;
		$$('select.dp_hide').removeClass('dp_hide');
	}
});

This forum give luck, I get the solution myself

regards.

Hello:

Many apologies if this is not an appropriate question here... but I have googled my fingers raw and haven't been able to find a script to do what I am looking for. I have little experience with JavaScript.

I have a VBA script (code at the end of this post) that returns the date corresponding to a given occurrence of a given weekday, e.g. Ask it for the 3rd Tuesday in October 2012 and it gives you 16-OCT-2012. It defaults to current year if you don't pass the Year argument.

It's a pretty simple script, but I need to either finds something in JavaScript that does the same thing, or convert the VBA code to JavaScript. I can't help but think that many people have already written scripts that do this. Any chance someone can lead me in a productive direction here?

Regards,

Steve Jones

(update - I noticed the code didn't retain its formatting, so I attached a text file)

-begin VBA code-
Public Function xdate(m As Integer, n As Integer, wd As Integer, Optional y As Integer = 0) As Date
'// m = 1-12 (Jan-Dec), n = 1-5 (1st-4th, last), wd = 1-7 (Sun-Sat), y = 1900-9999 or left blank for current year
Select Case y
Case 0 ' // Default. Use the current year.
y = year(Date)
Case 1900 To 9999 ' // treat the value as an explicit year
Case -100 To -1, 1 To 100 ' // treat the value as an offset to be applied to the current year
y = year(Date) + y
Case Else
' // invalid value. Insert whatever error processing you like.
End Select
Select Case n
Case 1 To 4 '// first through fourth
Case 5 '// last. We need to check to see it fell within the month specified, if not, use 4.
xdate = DateSerial(y, m, (8 - weekday(DateSerial(y, m, 1), (wd + 1) Mod 8)) + ((n - 1) * 7))
If month(xdate) <> m Then
n = 4
End If
Case Else
' // invalid value - insert error processing code here if you like.
' // Probably should check the other arguments as well.
End Select
xdate = DateSerial(y, m, (8 - weekday(DateSerial(y, m, 1), (wd + 1) Mod 8)) + ((n - 1) * 7))
End Function
-end vba code-

Hi Guys ,

i am wondering how i can get the current 6 month windows like the following

always based onthe current month


Aug-11
Sep-11
Oct-11
Nov-11
Dec-11
Jan-12


thanks!

Greetings. I am trying to create an "image of the day" for a site where the image will change automatically every 24 hours. Currently, I have 30 images in a folder named "petday" (no quotes) and I tried the following code (found in this forum) but I cannot get it to work. Any help or suggestions would be greatly appreciated. On a side note, I am very new to JavaScript and I know there is an easier way to write this but I am not real clear on how to do it. I have been reading the lessons found at W3 schools and I think I can use a switch statement? Is that correct?

Code:

<SCRIPT Language="JavaScript">

var now = new Date();
var dd = now.getDate();

if (dd==1)
document.write('<img src="petday/image1.jpg">');
else if (dd==2)
document.write('<img src="petday/image2.jpg">');
else if (dd==3)
document.write('<img src="petday/image3.jpg">');
else if (dd==4)
document.write('<img src="petday/image4.jpg">');
else if (dd==5)
document.write('<img src="petday/image5.jpg">');
else if (dd==6)
document.write('<img src="petday/image6.jpg">');
else if (dd==7)
document.write('<img src="petday/image7.jpg">');
else if (dd==8)
document.write('<img src="petday/image8.jpg">');
else if (dd==9)
document.write('<img src="petday/image9.jpg">');
else if (dd==10)
document.write('<img src="petday/image10.jpg">');
else if (dd==11)
document.write('<img src="petday/image11.jpg">');
else if (dd==12)
document.write('<img src="petday/image12.jpg">');
else if (dd==13)
document.write('<img src="petday/image13.jpg">');
else if (dd==14)
document.write('<img src="petday/image14.jpg">');
else if (dd==15)
document.write('<img src="petday/image15.jpg">');
else if (dd==16)
document.write('<img src="petday/image16.jpg">');
else if (dd==17)
document.write('<img src="petday/image17.jpg">');
else if (dd==18)
document.write('<img src="petday/image18.jpg">');
else if (dd==19)
document.write('<img src="petday/image19.jpg">');
else if (dd==20)
document.write('<img src="petday/image20.jpg">');
else if (dd==21)
document.write('<img src="petday/image21.jpg">');
else if (dd==22)
document.write('<img src="petday/image22.jpg">');
else if (dd==23)
document.write('<img src="petday/image23.jpg">');
else if (dd==24)
document.write('<img src="petday/image24.jpg">');
else if (dd==25)
document.write('<img src="petday/image25.jpg">');
else if (dd==26)
document.write('<img src="petday/image26.jpg">');
else if (dd==27)
document.write('<img src="petday/image27.jpg">');
else if (dd==28)
document.write('<img src="petday/image28.jpg">');
else if (dd==29)
document.write('<img src="petday/image29.jpg">');
else if (dd==30)
document.write('<img src="petday/image30.jpg">');

</SCRIPT>

I have a website with all of the months of the year. The main page of the website is suppose to be the current month. How can make my index page load automatically to the correct month. So if it is April, my index page will automatically load april.html.
Thank you so much!

hi,

anyone knows how to get the past 6th month date using time difference? like if the current date is given 18-April-2011 then the past 6th month date is 18-October-2010...how can this be done by using time difference?

Thanks,

verve

Hello,

I have this reservation form found on the main page of: http://www.avis.com.lb/
As you can see the current month "August" is selected as the default month and so is the year and day (the day is programmed to jump 2 days ahead for the renting of the car...)

However if you look closely (check the screenshot attached) you'll see that the month "August" is repeated twice and so is the year "2009", the current month is repeated twice. What I wanna do is remove the duplication and just auto select the current month without duplicating it.

I found this code: http://www.experts-exchange.com/Prog..._24229186.html
But it doesn't seem to work with my form, I donno why.

Here is the code of the script both javascript and a little bit of php
PHP Code:
$date = strtotime("+2 day");
                $date2 = date('j',$date);
                 $date4 = strtotime("+5 day");
                $date3 = date('j',$date4);
                if($date3 == 1){
                $nextmonth = strtotime("+1 day");
                $monthid = date('m',$nextmonth);    
                }else{
                $nextmonth = strtotime("+0 day");
                $monthid = date('m',$nextmonth);    
                }
            if ($monthid==1){
                $year = date("Y") + 1;
            }else{
                $year = date("Y");
            }
              //$pupday = date("j") - 12;
              //$pupday = date("d") + 2;
              //echo $pupday;
              //$returnday = date("d") +5;
              $month = date("F"); 


Code:

var xMonths = new Array( '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' );

function getListValue( option_object  ){return option_object[ option_object.selectedIndex ].value;}
function setListValue( option_object, value  ){ option_object.selectedIndex = value;}
function addDays(myDate,days) {
    return new Date(myDate.getTime() + days*24*60*60*1000);
}
function init()
{
xToday = new Date();
yToday = addDays(new Date(),3);

xMonth = xToday.getMonth();
xDay = xToday.getDate()-1;
xYear = xToday.getYear()-2005; if (xYear < 2005) xYear=0;
yMonth = yToday.getMonth();
yDay = yToday.getDate()-1;
yYear = yToday.getYear()-2005; if (yYear < 2005) yYear=0;
  xF = document.forms['quickbooking'];
  setListValue( xF.ETAHour, 9 )
  setListValue( xF.ETAMonth, xMonth )
  setListValue( xF.ETADay, xDay )
  setListValue( xF.ETAYear, xYear )
  setListValue( xF.ETTHour, 9 )
  setListValue( xF.ETTMonth, yMonth )
  setListValue( xF.ETTDay, yDay )
  setListValue( xF.ETTYear, yYear )
}

Code:

<select class="formField" name="ETAMonth">
                <option value="<? echo $monthid; ?>"  selected="selected"><? echo $month; ?></option>
                <option 
                                value="01">January</option>
                <option 
                                value="02">February</option>
                <option value="03">March</option>
                <option 
                                value="04">April</option>
                <option value="05">May</option>
                <option 
                                value="06">June</option>
                <option value="07">July</option>
                <option 
                                value="08">August</option>
                <option value="09">September</option>
                <option 
                                value="10">October</option>
                <option value="11">November</option>
                <option 
                                value="12">December</option>
              </select>
              <select 
                                class="formField" name="ETAYear">
              <option value="<? echo $year; ?>" selected="selected"><? echo $year; ?></option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <option value="2010">2010</option>
            </select>

Help is very appreciated, thanks.

Can anyone tell me what I have done wrong here? I have the following html code

Code:

<div id='group1'>
  <tr class='time'>
    <td colspan='3' name='1262815200'></td>
  </tr>
					
  <tr>
    <td class='timeleft group1' name='1262815200' colspan='3'></td>
  </tr>	

  <tr class='game'>
    <td><input type='radio' name='G1' value='NYJ'>NYJ</td>
    <td><input type='radio' name='G1' value='BUF'>BUF</td>
    <td><select name='G1P' class='points' tabindex = '1'></select></td>
  </tr>	

</div>

and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks.

Does anyone know why I am not getting an alert on an empty form INPUT value?

Code:

if (document.forms["form"]["targetname"].value == "" && document.forms["form"]["unknownname"] == false) {
	alert ("What ever");
	return false;
}

document.forms["form"]["targetname"] is a form INPUT text
document.forms["form"]["unknownname"] is a form INPUT checkbox

I suspect the problem is due to 'false'.. but I can't figure out why.

Hello coding forum users,
I am working on the only javascript chapter of my HTML textbook.
It asks me to: Quote:
replace the line <img id="sky" src="sky0.jpg" alt=""/>
with a script element that writes the following HTML code:
<img id='sky' src='mapNum.jpg' alt=' ' />
where mapNum is the value of the mapNum variable.
so I try PHP Code:
<script type="text/javascript" />
document.write("<img id='sky' src='mapNum.jpg' alt=' ' />")
</script> 


after a few other attempts I search codingforums and find: PHP Code:
document.write("<img id=\"sky\" src='sky"+mapNum+".jpg' alt='' />"); 


and PHP Code:
 document.write('<img id="sky" src="sky'+mapNum+'.jpg" alt="" />'); 


and these work perfectly fine but I don't understand why? my textbook only has one javascript chapter and its really small and vague, and
my teacher hasn't answered my emails, so I would be grateful if anyone can tell my why my first code falls flat.

I found and am using the following script to add checkbox values to a textarea.

Code:

<script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value;
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
</head>
<body>

<form name="form1" method=post>
<textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();">
</textarea><br>
<input type="checkbox" name="bob" id="bob" value="<p>" onclick="add_sub(this);"><label for="bob">&lt;p&gt;</label><br>
<input type="checkbox" name="bob1" id="bob1" value="<span>" onclick="add_sub(this);"><label for="bob1">&lt;span&gt;</label><br>
<input type="checkbox" name="bob2" id="bob2" value="<div>" onclick="add_sub(this);"><label for="bob2">&lt;div&gt;</label>

That is working. However, I wanted to put carriage returns after each checkbox value added, so I added the + "\r\n" as follows:

Code:

<script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value + "\r\n";
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>

That is working when adding the value, but removing the value when the checkbox is unchecked is not working. I know the regular expression, etc. needs to be updated to account for the carriage returns, but I have tried everything I can think of and cannot get it to work.

Help correcting the code is appreciated.

Hi, I'm trying to figure out how to make this work and I'm stumped.

I wrote this code:


<script type=text/javascript>
function firstfunction();
{
if(document.form1.inputnumbers.value="55");
{
document.form1.outputstate.value="this is a number";
}
else if
{
document.form1.inputnumbers.value="never";
}
{
document.form1.outputstate.value="this is a number";
}
else
{
document.form1.outputstate.value="";
}
</script>


<form name="form1" method="post">
<input type="text" id="inputnumbers" name="inputnumbers";>
<input type="button"; value="Enter"; onclick="firstfunction()"><br><br>
<textarea id="outputstate"; name="outputstate"; cols=60; rows=10; style="border:1"; readonly;>


I'm trying to doing something really simple but I can't seem to make it work. I'm trying have the textarea display a certain message depending on if the first input box says a certain word or number. So like in the code, if the user types "55" or "never" in the first box, then the second box should say a certain message. Then I used the else statement so that if "55" or "never" is not entered, then the second box says nothing.

If you can spot my error or suggest a different way of going about writing the code, it would be very much appreciated. Thank you.

Which of these is the correct way to set the className attribute, or are they both okay?

option 1:
Code:

var t = document.createElement("p");
t.className = "myclass";

option 2:
Code:

var t = document.createElement("p");
t.setAttribute("class","myclass");