|
JavaScript - Issues With A Picker Calendar
I have been working on this picker calendar all day and I am completely stumped. The calendar will show. Any help with this code would be REALLY appreciated!! Thank you!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Central Valley Snowboarding</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> </head> <body> <h1>Central Valley Snowboarding</h1> <h2>Group Reservations</h2><hr /> <form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"> <h3>Snowboarding Date</h3> <p><input type="text" name="reservationDate" /> <a href="" onclick="displayCalendar()">Select Date</a></p> <h3>Group Leader</h3> <table border="0"> <tr valign="top"> <td>Last name<br /> <input type="text" name="leaderLastName" size="50" /> <br /> First name<br /> <input type="text" name="leaderFirstName" size="50" /> <br /> Telephone<br /> <input type="text" name="leaderTelephone" size="50" /> <br /> Address<br /> <input type="text" name="leaderAddress" size="50" /><br /> City, State, Zip<br /> <input type="text" name="leaderCity" size="34" /> <input type="text" name="leaderState" size="2" maxlength="2" /> <input type="text" name="leaderZip" size="5" maxlength="5" /></td> </tr></table> <script type="text/javascript"> /* <![CDATA[ */ var dateObject = new Date(); var month = dateObject.getMonth(); var monthArray = new Array("January","February","March","April","May","June", "July","August","September","October","November","December"); var dateToday = monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear(); document.forms[0].reservationDate.value = dateToday; function displayCalendar(whichMonth) { calendarWin = window.open("", "CalWindow", "status=no,resizable=yes,width=400,height=320,left=200, top=200"); calendarWin.focus(); calendarWin.document.write("<!DOCTYPE html PUBLIC '-//W3C// DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd'><html xmlns='http://www.w3.org/ 1999/xhtml'> <head><title>Central Valley Snowboarding</title><meta http-equiv='content-type' content='text/html; charset=iso-8859-1' /> <link rel='stylesheet' href='js_styles.css' type='text/ css' /></head><body>"); calendarWin.document.write("<table cellspacing='0' border='1' width='100%'>"); } if (whichMonth == -1) dateObject.setMonth(dateObject.getMonth()-1); else if (whichMonth == 1) dateObject.setMonth(dateObject.getMonth()+1); var month = dateObject.getMonth(); calendarWin.document.write("<tr><td colspan='2'><a href='' onclick='self.opener.displayCalendar(-1);return false'> Previous</a></td><td colspan='3' align='center'><strong>" + monthArray[month] + " " + dateObject.getFullYear() + "</strong></td><td colspan='2' align='right'><a href='' onclick='self.opener.displayCalendar(1);return false'> Next</a></td></tr>"); + "</strong></td></td></tr>"); calendarWin.document.write("<tr align='center'><td>Sun</td> <td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td> <td>Sat</td></tr>"); calendarWin.document.write("<tr align='center'>"); dateObject.setDate(1); var dayOfWeek = dateObject.getDay(); for (var i=0; i<dayOfWeek; ++i) { calendarWin.document.write("<td> </td>"); } var daysWithDates = 7 - dayOfWeek; var dateCounter = 1; for(var i=0; i<daysWithDates; ++i) { var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear(); calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0] .reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "</a></td>"); ++dateCounter; } var numDays = 0; // January, March, May, July, August, October, December if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) numDays = 31; // February else if (month == 1) numDays = 28; // April, June, September, November else if (month == 3 || month == 5 || month == 8 || month == 10) numDays = 30; for (var rowCounter = 0; rowCounter < 5; ++rowCounter) { var weekDayCounter = 0; calendarWin.document.write("<tr align='center'>"); while (weekDayCounter < 7) { var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear(); if (dateCounter <= numDays) calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0]. reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "</a></td>"); else calendarWin.document.write("<td> </td>"); ++weekDayCounter; ++dateCounter; } calendarWin.document.write("</tr>"); } calendarWin.document.write("</table></body></html>"); calendarWin.document.close(); /* ]]> */ </script> <p><input type="submit" value="Submit Group Reservation" /></p> </form> </body> </html> Similar TutorialsI'm looking for a good javascript time & date popup other than this one. It conflicts with Joomlas javascript code and causes problems in the back-end. Other than that, it's perfect. Does anyone know of any other free calendar popups that let you pick both date and time? Hi, I'm new to javascripts. I have a perl script that takes 2 sets of dates as input: http://myhost/perlscript.pl/?startda...ate=yyyy-mm-dd I would like to have a date picker for the 2 arguments and pass them as yyyy-mm-dd format . thanks, Sirjune I have an issue with a javascript date picker. I need to figure out how to get the date to submit from the date picker into my database. Haven't been able to get any help from the maker of the date picker. I have a form which is collecting about 15 other items and I need the date to go in as well. Any help would be great.
Hi to aLL CAN ANY BODY HELP ME OUT IN WRITING JAVASCRIPT CODE FOR MONTH PICKER HERE I DONT NEED DATE, I JUST WANT ALL THE MONTHS IN PLACE OF DATES AND AN OPTION FOR SELECTING YEARS, WHEN I SELECT MONTH AND CHOOSE YEAR, THEN TEXT FIELD GET JAN-2008 clearly, need a calender with out date in it, months and years.... colud you please give me any information regarding this thank you Hi all , first let me just say I know incredibly little about JavaScript at all , I'm currently studying PHP however as part of a course and do occasionally use JavaScript here and there My problem is on a register page for example i have a JavaScript Date picker so users can select their D.O.B without me having to worry about if the date is valid ...etc through PHP checking. PHP Code: <tr> <th>Date of Birth :</th> <td input name="dob" id="dob"><?php $thisyear= getdate(); $myCalendar = new tc_calendar("date5", true, false); $myCalendar->setIcon("./images/iconCalendar.gif"); $myCalendar->setDate($thisyear['year'],$thisyear['month'],$thisyear['day']); $myCalendar->setPath("./"); $myCalendar->setYearInterval(1910, ($thisyear['year'])); $myCalendar->dateAllow('1910-05-13', ($thisyear['year']-18) ); $myCalendar->setDateFormat('j F Y'); //$myCalendar->setHeight(350); //$myCalendar->autoSubmit(true, "form1"); $myCalendar->writeScript(); ?></td> </tr> Now in the <head> tag of my page i do i my JavaScript validation , and was wondering what would i have to do for this to work Thus far i've tried .checked/.selected basically anything i can think of but since its not my forte there isn't a lot for me to think of PHP Code: <script type="text/javascript"> function validate(form) { if(!document.form1.agree.checked) { alert("Please check the terms and conditions"); return false; } if(!document.form1.dob.checked) { alert("Please select a date of birth"); return false; } return true; } </script> </script> Now i was wondering is there anyway to check if a valid date was selected ?? if you can offer any help it'd be much appreciated. hi folks.. how to start with color picker using a layered div? i would like to have idea about that.. if anyone have any code samples then let me know.. thank you Good day! I explore something so I used jquery in my date, without any knowledge about jquery. I research a sample Jquery Date Picker internet and I found one, my problem is the Year is started at 2001 , I don't know if I could change it so that the year would start atleast 1950's or 1990's here's the code that I add in my webpage to display the Jquery Date Picker Code: <link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#date").datepicker({ showOn: 'button', buttonText: "Select your Birthday" });
});
</script>
I will attach the date picker that I get from internet. Thank you Hi, I'm trying to display a time clock in input text box. The time should display in Time utilization box after clicking on START BUTTON. I tried the below code and it is not starting the time. However, I tried the javascript individually and it worked. Any help? PHP Code: <script type="text/javascript"> var seconds = 0; var minutes = 0; var hours = 0; function zeroPad(time) { var numZeropad = time + ''; while(numZeropad.length < 2) { numZeropad = "0" + numZeropad; } return numZeropad; } function countSecs() { seconds++; if (seconds > 59) { minutes++; seconds = 0; } if (minutes > 59) { hours++ minutes = 0; } document.getElementById("time_utilization").innerHTML = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds); } function startTimer() { action = window.setInterval(countSecs,1000); } </script> </head> <body> <?php include("header.php"); ?> <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-content"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner art-article"> <form name="tracker" method="post" action="processor.php" onsubmit="return formCheck(this);"> <ul> <li class="mainForm" id="fieldBox_8"> <label class="formFieldQuestion">Start Time *</label><input readonly class=mainForm type=text name=start_time id=start_time size='30' value=''> <input type="button" id="start1_time" style="width: 100px" Value="Start Time" onClick="startTimer()"></li> <li class="mainForm" id="fieldBox_12"> <label class="formFieldQuestion">Time Utilization</label><input class=mainForm type=text name="time_utilization" id="time_utilization" size='8' value='00:00:00' ></li> <br /> <br /> <li class="mainForm"> <input id="saveForm" class="mainForm" type="submit" value="Submit" style="width : 100px"/> </li> </form> I am getting "Unknown Runtime Error at line 43". However, code has below line at link 43: Code: document.getElementById("time_utilization").innerHTML = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds);
dear all.... could you help me how to created database popup picker with javascript and php....i use mysql databse. best regards Hi All, i am having some difficulties to figure out how can i link get my calendar (datepicker) working with my dynamic generated textbox . I am using a Jquery file that i download form the net <!-- link calendar files --> <script language="JavaScript" src="calendar_us.js"></script> <link rel="stylesheet" href="calendar.css"> and here is my code to generate my dynamic controls which is working fine actually..i need to have : 1- option : the datepicker showing up once i click on StartDate textbox 2- in the future i ll use an img and i want to use it to populate the datepicker. below is my modest javascipt code i use to create dynamic textbox: <script type="text/javascript"> // Declare element id for different dynamic generated controls var elementid = 1; function addNew() { var elementrow = 1; // Get the main Div in which all the other divs will be added var mainContainer = document.getElementById('mainContainer'); // Create a new div for holding text and button input elements var newDiv = document.createElement('div'); var bgc ="##E2E2E2"; //"##b2d47e"; newStartDate = document.createElement( 'INPUT' ); newStartDate.id = 'id' + elementid + elementrow; newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; newAddButton.title = " Add new Project"; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.title = " Remove Project"; // Append new text input to the newDiv newDiv.appendChild(newStartDate); // Append new button inputs to the newDiv newDiv.appendChild(newAddButton); newDiv.appendChild(newDelButton); // Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); // Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = addNew; newDelButton.onclick = function() {mainContainer.removeChild(newDiv);}; elementid++; } </script> any help will be apprecited ! thanks I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery): http://www.gumtree.com/add_posting.html?location_id=uk Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categories I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery I have been researching like crazy, and I can't find any information that seems to fit what I need! I am looking for a solution for the following problem: We have products that have multiple parts that can be colored separately from each other. In other words, if it was a shirt, the sleeves, graphic, front panel, pocket, and back panel could all be a different color. We have a range of color options available that can be up to 50. So, if I made a single image for each combination, we're looking at thousands of images here. How can I use scripts to build a page that can pick all of these options and combine them together in a product image for the customer? Is it even possible? I have tried layering 4 0r 5 images with relative and absolute positioning, and doing an image swap...but that is not something I can see us using on a regular basis. I must be missing something here. We've been looking around at other sites like Victorias Secret and Old Navy, and like their color changes....but theirs seem to only involve the single color layer. Thanks for any advice! does anyone know of a timepicker that i can disable weekends and bank holidays (or that at least easily has a place i can add code to disable days by making a call to my database of holidays in ajax?) Hi. I'm working on a script that picks out a random entry in an array every 10seconds and show it to the user (using document.write). So far I've got the "Randomizer" to work like this: Code: function random(){
var nummer = Math.floor(Math.random()* tekst.length);
return nummer;
}
var tekst = new Array("Different", "Values");
and showing it like this: Code: document.write(tekst[random()]); Now, I've tried my best to implement setInterval() to give me a new random number every 10seconds, but so far without any luck... I appreciate all help! Thx in advance. Hello, I really need your help with one. How can I use the following code below to save the date from my popup window datepicker back into a var and relay it back onto its parent page? I can't seem to figure this out: Code: <html>
<head>
<script>
function open_cal() {
var str_html = ""
+ "<!DOCTYPE html>\n"
+ "<html lang=\"en\">\n"
+ "<head>\n"
+ "<meta charset=\"utf-8\">\n"
+ "<title>CALENDAR</title>\n"
+ "<link href=\"jq/jquery-ui.css\" rel=\"stylesheet\" type=\"text/css\">\n"
+ "<script src=\"jq/jquery.min.js\" type=\"text/javascript\"></" + "script>\n"
+ "<script src=\"jq/jquery-ui.min.js\" type=\"text/javascript\"></" + "script>\n"
+ "<script src=\"jq/datepicker.js\" type=\"text/javascript\"></" + "script>\n"
+ "</head>\n"
+ "<body>\n"
+ "<div id=\"text\" style=\"font: bold 10pt Tahoma\">Enter Approval Date:</div>\n"
+ "<div id=\"datepicker\"></div>\n"
+ "</body>\n"
+ "</html>"
var j = window.open("","CALENDAR","width=200,height=250,status=no,resizable=yes,top=200,left=200")
j.opener = self;
j.document.write(str_html);
}
</script>
</head>
<body>
<input onclick="open_cal()" type="button" value="Open" name="B1">
</body>
</html>
Datepicker.js: Code: $(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
alert(dateText)
window.close()
}
})
});
Any help with this is greatly and mostly appreciated. Thanks in advance, Cheers, J I don't have any knowledge of apps but would like to get one like this and be able to change/add info to it myself, where/how can I go about doing this please?
hi all, I need one script for the change of month & year the data of the month and year is changed in iframe. like when ever we select the month and date the calender is changing like that i frame content t be change. I have a page of dates in a form field which currently are being entered manually and wish to have a calendar pop up for each one to make it a bit easier. i have managed to use a calendar routine 'tigra calendar' i found online but now after working out not to get it working within my own template i faced the problem on multiple date fields. i currently use a numbers field 1-10 or how every many there needs to be on that page. but how would i integrate this within the coding from 'tigra calendar' can anyone suggest a better way to do this. if needed i can sort out a zip file of the files i have for tigra calendar. Hi everyone, I am looking to insert a 225x200 pixel monthly calendar on a webpage. I would like it to just show one month but you can click a down arrow to show a different month. I also would like each day to be changed to a different color (I am going to put in a legend at the bottom with different topics color-coded where the user can see the date and click the topic to learn more). If anyone can help with this code it would be much appreciated! Thanks DvdBonan I have a calendar that gets pulled up via javascript. It allows someone to pick a date in a form with this little calendar icon that pops up. However, I am trying to make certain days of the week not available. If I wanted to make Tuesdays and Thursdays not available, where would I edit it? Here is the lengthy code http://www.happydogwebproductions.com/CFcalendar.js It was too long to post here. Thanks for any help |
|||||||