JavaScript - Datepicker Script Does Not Show Correctly Due To The Current Date (today)

Hello,

I am arranging a validation form checking a start date (DepartureDate) against today's date to verify that it must be later than today's date, I am a newbie on javascript and I have tried various ways, unfortunately I have hit the wall and I need help.

[CODE]

<SCRIPT LANGUAGE="JAVASCRIPT" SCRIPT TYPE="TEXT/JAVASCRIPT">

function checkForm() {



DepartureDate= /^(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](20)\d\d$/ //check if DepartueDate is valid entry

var depdate=myform.DepartureDate.value; // get date from keyed text box
var prsDepdate= Date.parse(depdate); // convert to date parse
var currentDate = new Date();// today's date
var now=Date.parse(currentDate);//parsed todays date




if (!DepartureDate.test(depdate)) {

alert("Departure Date must be entered in numbers in the following format dd/mm/yyyy with the first two year digits being 20yy");
return false;
} //validation if departure Date is entered correctly

if (prsDepdate<=currentDate) {
alert("Departure Date must be later than Today's date!")//comparison if Departure Date is less than today

return false;
}




}





</SCRIPT>
[CODE]

Thanks a lot

Hi,
I have 2 calendars using jquery UI datepicker. The first calendar is default to todays date. What I need to happen is for the second calendar default date to change to default date (of first calendar) + 1 day. I'm really not too sure how to do this... So any help would be great!

This is the code I have so far:

[CODE]

$(document).ready(function(){
$("#startDate").datepicker({
dateFormat: "dd/mm/yy" }).val()
$('#startDate').datepicker('setDate', new Date());

});

$(document).ready(function(){
$("#endDate").datepicker({
dateFormat: "dd/mm/yy" }).val()

});

$('#startDate').datepicker({onSelect: function(dateStr) {
$('#endDate').datepicker('option', 'defaultDate', dateStr);
}});
$('#endDate').datepicker();
[/ICODE]

Hi, I got this two javascripts:
- Datepicker by Jason Moon (http://calendar.moonscript.com/dateinput.cfm) which can have multiple of this datepicker on a single form

- Dynamic Add/Remove rows from http://viralpatel.net/blogs/2009/03/...avascript.html

I would like to add rows of fields with each rows having it's individual datepicker.

Code:

	<table id="billcmp_7" width="320" border="0">
	  <tr>
	    <td width="200" align="center"><script>DateInput('billcmp7_cycle', true)</script></td>
	    <td width="10">&nbsp;</td>
	    <td width="100" align="center"><input name="billcmp7_name" type="text" /></td>
	    <td width="10"><INPUT type="checkbox" name="chk"/></td>
	  </tr>
	</table>
	<table width="320" border="0">
	  <tr>
	    <td colspan="4" align="center"><INPUT type="button" value="Add Row" onclick="addRow('billcmp_7')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('billcmp_7')" /></td>
	  </tr>
	</table>

I just want this section
Code:

<script>DateInput('billcmp7_cycle', true)</script>

to work like
Code:

<script>DateInput('billcmp7_cycle_1', false)</script>
<script>DateInput('billcmp7_cycle_2', false)</script>

when click on the add button.

Here's what i meant? Link

cant get the time to be different as it is still read as single datepicker.

Any1 has any idea how or any alternative?

When I use the following script in my web page I do not get a print out. Can anyone tell me what is wrong?


<!-- Begin

// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}

// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;

// Print out the data.
document.write(today);

// End -->

Hi guys.

I'm trying to make a small bit of scripting that will show the current time, updating once every second.

What I need is the following:
1. Multiple timezones or GMT offsets (just put me on the right path, I can code them in,
2. Daylight savings time taken into consideration (only for Australia), adding the 1 hour during the times it is needed,
3. Text to show "Open" and "Closed" during different times (open during 8am to 5pm and closed if not 8am to 5pm.)

I have the following code as a start, but I am completely stuck with how to get the rest of what I need!

Any help would be appreciated.


<h4>Victoria
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
document.write(hours + ":" + minutes + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>


<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
if(hours > 11){
document.write("True")
} else {
document.write("False")
}
//-->
</script>
</h4>

Cheers in advance.

Dale.

Hello,

I am a newbie to this forum. I have searched for the problem that I have in this forum but found none.

I am creating a calendar using html/css and javascript. I used one the free javascript for calendar on the internet and modified it to the way I wanted it to be. However, I could not write the if statement so that the calendar will highlight the current date of the current month only, not all 12 months. And I could not write the if statement so that the calendar will know what day is a holiday and make it red color. Here is my code:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Calendar</title>

<style type="text/css">

#left {position:absolute;left:40px;top:10px;}
#right {position:absolute;left:400px;top:10px;}
.table1 {border-collapse:collapse;background-color:#efefef;}
.th2 {height:10px;background-color:#eeeee0;color:#951159;font-size:10px;}
.sunday {background-color:#DD2211;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.day {background-color:navy;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.date0 {border:1px solid #cccccc;font-size:10px;color:red;font-weight:bold;text-align:center;} /*  This is the color for Sundays and Holidays */
.date1 {border:1px solid #cccccc;font-size:10px;height:10px;font-weight:bold;text-align:center;} /*  This is the color for regular days */
.today {border:1px solid #cccccc;font-size:10px; color:#0000ff;background-color:#daffee;} /*  This is the color for current day */

</style>
</head>


<body bgcolor=#cccccc>
<div id="left">

<script>
var i=0;
for (i=0;i<=5;i++)
{

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month

var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December

// return number of days in the specified month (parameter)
return ar[month]
} 

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE", "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")

// return name of specified month (parameter)
return ar[month]
}

setCal()

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

// number of days in current month
var days = getDays(month, year)

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {

// create basic table structure
var text = "" // initialize accumulative variable to empty string

text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' &nbsp; ' +  year
text += '</TH>' // close header cell

// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
  if (dayNum == 0) {
     text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
     } else {
     text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
     }
}
text += '</TR>'

// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
   for (var col = 1; col <= 7; ++col) {
         if (digit > lastDate)
         break
            if (curCell < firstDay) {
               text += '<TD></TD>';
               curCell++
           } else {
                       if (col ==1) {  //  This is to make the text color red if it is Sunday
                          text += '<TD class="date0">' + digit + '</TD>'
                       } else
                                /* if ((month ==1) && (col ==2) && (row==3)) {  //  This is to make the text color red if it is a holiday
                                    text += '<TD class="date0">' + digit + '</TD>'
                                    } else */
                       /* if (digit == date) { // current cell represent today's date
                          text += '<TD class="today">'
                          text += digit
                          text += '</TD>'
                       } else */
                         text += '<TD class="date1">' + digit + '</TD>'
                         digit++
                      }
   }
text += '</TR>'
}

// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'

// print accumulative HTML string
document.write(text)
}
}
</script>

</div>

<!-- #################################################################### -->

<div id="right">

<script>
var i=0;
for (i=0;i<=5;i++)
{

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month

var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December

// return number of days in the specified month (parameter)
return ar[month]
} 

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")

// return name of specified month (parameter)
return ar[month]
}

setCal()

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

// number of days in current month
var days = getDays(month, year)

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {

// create basic table structure
var text = "" // initialize accumulative variable to empty string

text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' &nbsp; ' +  year
text += '</TH>' // close header cell

// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
  if (dayNum == 0) {
     text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
     } else {
     text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
     }
}
text += '</TR>'

// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
   for (var col = 1; col <= 7; ++col) {
         if (digit > lastDate)
         break
            if (curCell < firstDay) {
               text += '<TD></TD>';
               curCell++
           } else {
                       if (col ==1) {  //  This is to make the text color red if it is Sunday
                          text += '<TD class="date0">' + digit + '</TD>'
                       } else
                                /* if ((month ==1) && (col ==2) && (row==3)) {  //  This is to make the text color red if it is a holiday
                                    text += '<TD class="date0">' + digit + '</TD>'
                                    } else */
                       /* if (digit == date) { // current cell represent today's date
                          text += '<TD class="today">'
                          text += digit
                          text += '</TD>'
                       } else */
                         text += '<TD class="date1">' + digit + '</TD>'
                         digit++
                      }
   }
text += '</TR>'
}

// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'

// print accumulative HTML string
document.write(text)
}
}
</script>

</div>
</body>
</html>

This is just for my practice in html/css and javascript. Thanks for all your time and support.

kvkt

I would like top use this excellent script on my website, but I am not sure how to enhance the function of it. I mean I would like to use it for more than just one navigation menu. The script assigns the "current" id for the active link on the page through the "nav" menu.
What needs to be added to, or modify if I would like to use it also for "nav2" on the same page?

Thank you, Peter


window.onload=function()
{
setPage();
}

function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
for (var i=0; i < arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}

function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("nav") !=null )
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}

Hi guys i want to make my javascript open the link in the same window instead of opening up i new tab, i know this should be basic but for some reason i can't figure it out, ill post the code below, thanks

Code:

for (var i=0; i <UN.length; i ++) {
if (( UN[i].toLowerCase() == uname.toLowerCase() ) && (PW[i]  == pword)) {
alert ("User name and password matched!");
valid = true;
window.open('http://www.google.com');

hello there
this is in vb script. but i dont where to post it. can any one hlep me out plzz
I need to check if the date entered by user is within 5th date from current date.

I am trying to do it this way
entered date has month and date value
Code:

sResvDate = 01/24
Set sMaxDays to getdate(5)

but get date will give year too. and how do i compare if it less than 5th day or not.

Hi guys,

Just wondering if this javascript is valid. I have about 150 variables, and I want to check, before I start writing it all out. Anything that could reduce it a bit would be great, save time and make the code more efficient!
By the way, all values are numbers entered in a html text field. The script does calculations on it, and posts the result to a hidden field, which is submitted to a php email script.
Code:

<script language="JavaScript">
function calculate() {
	"use strict"; 
	var sofa_3_seaterX = (document.form1.sofa_3_seater.value * 6);
	var sofa_2_seaterX = (document.form1.sofa_2_seater.value * 35);
	var armchair_largeX = (document.form1.armchair_large.value * 9);
	var armchair_smallX = (document.form1.armchair_small.value * 2);
	var wall_unitX = (document.form1.wall_unit.value * 3);
	
	var total = (sofa_3_seaterX + sofa_2_seaterX + armchair_largeX + armchair_smallX + wall_unitX);

	document.form1.total.value = total;
}
</script>

Hi,
Please i have this code here which is not working to my expectation.Even though the code shows up the date alright but i want to add when it is morning should be AM whiles in evening PM.

I have tried several ways to get it but i'm not.please help me to add a code to show PM when the time is (h>11) and AM when (h<11) .Here is what i did

Code:

<script type="text/javascript">
function runTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();

if(m<10){
m="0"+m;
}
document.getElementById("text").innerHTML=h+":"+m+":"+s;
t=setTimeout('runTime()',500);
}

if(h>11)
{
document.write("PM");
}
else{
document.write("AM");
}
</script>
<body onload="runTime()">
<div id="text"></div>
</body>

Thank you.

Clement Osei.

Does anyone know of a javascript code that will always show the date of next tuesday? We have a reoccurring event every tuesday, so as soon as wednesday hits, we need the date to change to the following tuesday. Any help or point in the right direction is appreciated.

Thanks!

the script below works but it reveals all the codes rather than just the one clicked,
there are multiple vouchers on the page, in the php file there is one instance of <?=voucher_code?>

so how is it possible to make each instance of voucher_code unique? in order fro this script to work? is it even possible or maybe there's another way?

Code:

<script>
    $(".revealVoucher").click(function () {
    $(".voucherCode").show("slow");
    });
</script>

 <div class="revealVoucher">
 <a href="<?=$affiliate_url?>" target="_blank">Reveal Code</a>
 </div>

 <div class="voucherCode" style="display:none;">
 <a href="<?=$affiliate_url?>"><?=$voucher_code?></a>
 </div>

I am trying to extend my plug in by restricting the sunday from the calendar. I am not sure how to do this with my existing code.

here is the code which is currently not working:

<script type="text/javascript">
$(function() {
// Tabs
$('#datepicker1').datepicker({
beforeShowDay: function(date) {
return [(date.getDay() > 1), ""];
}
minDate: 0,
maxDate: "+12M +0D",
dateFormat: 'dd-mm-yy'
});
});
</script>

Can anyone see anything obvious??

I would like to use the jquery datepicker to populate 2 input fields with the same date. I need the 2 fields to display the date in different formats though.

So for example one would be displayed as 2009-11-26 and the other as Thu 26 Nov 2009

Here's the code I have so far (which does not work)...

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

<script type="text/javascript">
	$(function() {
		$("#txtStartDate").datepicker({ dateFormat: 'D d M yy' });
		$("#txtStartDate2").datepicker({ dateFormat: 'yy-mm-dd' });
	});
</script>

</head>

<body>

<p><input name="startDate" id="txtStartDate" type="text" value="" />Dept. date:</p>
<input name="startDate" id="txtStartDate2" value="" type="text" />

</body>