JavaScript - Date Comparison Based On Selected Date
I have a drop down menu where people can select a month, day and year. Based on their selection, I want to show them an image.
If their selection is >= July 26, 2010 but <= July 25, 2011, show the red image; If their selection is >= July 26, 2011 but <= July 25, 2012, show the white image; If their selection is >= July 26, 2012 but <= July 25, 2013, show the blue image; If their selection is >= July 26, 2013 but <= July 25, 2014, show the yellow image; I don't know how to compare a selected date to a range of dates like this. Similar TutorialsWhy alert('hua'); does not pop up ? Code: var cur_date = new Date(); cur_date.setSeconds(0); cur_date.setHours(0); cur_date.setMilliseconds(0); cur_date.setMinutes(0); alert(cur_date); alert(new Date(cur_date.getFullYear(),cur_date.getMonth(),cur_date.getDate())); if (new Date(cur_date.getFullYear(),cur_date.getMonth(),cur_date.getDay()) == cur_date ) { alert('hua'); } I would like to compare dates in the format used in twitter, which is this: Wed Apr 08 14:30:10 +0000 2009 How do I do this? Do I need to convert to a timestamp first, and if so, how do I do this? G Hi all, I'm using the Epoch calendar at: http://www.javascriptkit.com/script/...ch/index.shtml It works great and does exactly what I need. I'm using it in flat mode so that it can be displayed statically on the page. What I can't seem to work out is how to retrieve the selected date once clicked on. I need to be able to print the output in dd/mm/yyyy format, either on screen or in an alert or something similar. If anyone has worked with this calendar and knows how to do it, or can sort it, I'd appreciate it greatly. I can't paste code here as it's too long, but the source code on the site linked above is exactly the same as I'm using. Cheers! I have a calendar and when selecting the date the date format inserted to text box is in the format ' 10/10/2010'. This is not getting inserted into oracle database. Oracle accepts only the format '10-OCT-10' . So please help me to change the format of date that getting selected from calendar. Code is given below (calendar.html, calendar.js & style.css) //calendar.html Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="standard.css" type="text/css" /> <script type="text/javascript" src="calendar.js"></script> <title>CALENDAR</title> </head> <body> <label>Date : </label><input name="startdate" type="text" onClick="displayDatePicker('startdate')"> <script type="text/javascript"> window.onLoad(displayDatePicker('ADate')); </script></body></html> //calendar.js Code: var datePickerDivID = "datepicker"; var iFrameDivID = "datepickeriframe"; var dayArrayShort = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'); var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'); var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'); var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'); var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'); var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); // these variables define the date formatting we're expecting and outputting. // If you want to use a different format by default, change the defaultDateSeparator // and defaultDateFormat variables either here or on your HTML page. var defaultDateSeparator = "/"; // common values would be "/" or "." var defaultDateFormat = "dmy" // valid values are "mdy", "dmy", and "ymd" var dateSeparator = defaultDateSeparator; var dateFormat = defaultDateFormat; function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep) { var targetDateField = document.getElementsByName (dateFieldName).item(0); // if we weren't told what node to display the datepicker beneath, just display it // beneath the date field we're updating if (!displayBelowThisObject) displayBelowThisObject = targetDateField; // if a date separator character was given, update the dateSeparator variable if (dtSep) dateSeparator = dtSep; else dateSeparator = defaultDateSeparator; // if a date format was given, update the dateFormat variable if (dtFormat) dateFormat = dtFormat; else dateFormat = defaultDateFormat; var x = displayBelowThisObject.offsetLeft; var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ; // deal with elements inside tables and such var parent = displayBelowThisObject; while (parent.offsetParent) { parent = parent.offsetParent; x += parent.offsetLeft; y += parent.offsetTop ; } drawDatePicker(targetDateField, x, y); } /** Draw the datepicker object (which is just a table with calendar elements) at the specified x and y coordinates, using the targetDateField object as the input tag that will ultimately be populated with a date. This function will normally be called by the displayDatePicker function. */ function drawDatePicker(targetDateField, x, y) { var dt = getFieldDate(targetDateField.value ); // the datepicker table will be drawn inside of a <div> with an ID defined by the // global datePickerDivID variable. If such a div doesn't yet exist on the HTML // document we're working with, add one. if (!document.getElementById(datePickerDivID)) { // don't use innerHTML to update the body, because it can cause global variables // that are currently pointing to objects on the page to have bad references //document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>"; var newNode = document.createElement("div"); newNode.setAttribute("id", datePickerDivID); newNode.setAttribute("class", "dpDiv"); newNode.setAttribute("style", "visibility: hidden;"); document.body.appendChild(newNode); } // move the datepicker div to the proper x,y coordinate and toggle the visiblity var pickerDiv = document.getElementById(datePickerDivID); pickerDiv.style.position = "absolute"; pickerDiv.style.left = x + "px"; pickerDiv.style.top = y + "px"; pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible"); pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block"); pickerDiv.style.zIndex = 10000; // draw the datepicker table refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate()); } /** This is the function that actually draws the datepicker calendar. */ function refreshDatePicker(dateFieldName, year, month, day) { // if no arguments are passed, use today's date; otherwise, month and year // are required (if a day is passed, it will be highlighted later) var thisDay = new Date(); if ((month >= 0) && (year > 0)) { thisDay = new Date(year, month, 1); } else { day = thisDay.getDate(); thisDay.setDate(1); } // the calendar will be drawn as a table // you can customize the table elements with a global CSS style sheet, // or by hardcoding style and formatting elements below var crlf = "\r\n"; var TABLE = "<table cols=7 class='dpTable'>" + crlf; var xTABLE = "</table>" + crlf; var TR = "<tr class='dpTR'>"; var TR_title = "<tr class='dpTitleTR'>"; var TR_days = "<tr class='dpDayTR'>"; var TR_todaybutton = "<tr class='dpTodayButtonTR'>"; var xTR = "</tr>" + crlf; var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event var TD_title = "<td colspan=5 class='dpTitleTD'>"; var TD_buttons = "<td class='dpButtonTD'>"; var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>"; var TD_days = "<td class='dpDayTD'>"; var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event var xTD = "</td>" + crlf; var DIV_title = "<div class='dpTitleText'>"; var DIV_selected = "<div class='dpDayHighlight'>"; var xDIV = "</div>"; // start generating the code for the calendar table var html = TABLE; // this is the title bar, which displays the month and the buttons to // go back to a previous month or forward to the next month html += TR_title; html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "<") + xTD; html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD; html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, ">") + xTD; html += xTR; // this is the row that indicates which day of the week we're on html += TR_days; for(i = 0; i < dayArrayShort.length; i++) html += TD_days + dayArrayShort[i] + xTD; html += xTR; // now we'll start populating the table with days of the month html += TR; // first, the leading blanks for (i = 0; i < thisDay.getDay(); i++) html += TD + " " + xTD; // now, the days of the month do { dayNum = thisDay.getDate(); TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">"; if (dayNum == day) html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD; else html += TD + TD_onclick + dayNum + xTD; // if this is a Saturday, start a new row if (thisDay.getDay() == 6) html += xTR + TR; // increment the day thisDay.setDate(thisDay.getDate() + 1); } while (thisDay.getDate() > 1) // fill in any trailing blanks if (thisDay.getDay() > 0) { for (i = 6; i > thisDay.getDay(); i--) html += TD + " " + xTD; } html += xTR; // add a button to allow the user to easily return to today, or close the calendar var today = new Date(); var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate(); html += TR_todaybutton + TD_todaybutton; html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>this month</button> "; html += xTD + xTR; // and finally, close the table html += xTABLE; document.getElementById(datePickerDivID).innerHTML = html; // add an "iFrame shim" to allow the datepicker to display above selection lists adjustiFrame(); } /** Convenience function for writing the code for the buttons that bring us back or forward a month. */ function getButtonCode(dateFieldName, dateVal, adjust, label) { var newMonth = (dateVal.getMonth () + adjust) % 12; var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12); if (newMonth < 0) { newMonth += 12; newYear += -1; } return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>"; } /** Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator variables at the beginning of this script library. */ function getDateString(dateVal) { var dayString = "00" + dateVal.getDate(); var monthString = "00" + (dateVal.getMonth()+1); dayString = dayString.substring(dayString.length - 2); monthString = monthString.substring(monthString.length - 2); switch (dateFormat) { case "dmy" : return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear(); case "ymd" : return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString; case "mdy" : default : return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear(); } } /** Convert a string to a JavaScript Date object. */ function getFieldDate(dateString) { var dateVal; var dArray; var d, m, y; try { dArray = splitDateString(dateString); if (dArray) { switch (dateFormat) { case "dmy" : d = parseInt(dArray[0], 10); m = parseInt(dArray[1], 10) - 1; y = parseInt(dArray[2], 10); break; case "ymd" : d = parseInt(dArray[2], 10); m = parseInt(dArray[1], 10) - 1; y = parseInt(dArray[0], 10); break; case "mdy" : default : d = parseInt(dArray[1], 10); m = parseInt(dArray[0], 10) - 1; y = parseInt(dArray[2], 10); break; } dateVal = new Date(y, m, d); } else if (dateString) { dateVal = new Date(dateString); } else { dateVal = new Date(); } } catch(e) { dateVal = new Date(); } return dateVal; } /** Try to split a date string into an array of elements, using common date separators. If the date is split, an array is returned; otherwise, we just return false. */ function splitDateString(dateString) { var dArray; if (dateString.indexOf("/") >= 0) dArray = dateString.split("/"); else if (dateString.indexOf(".") >= 0) dArray = dateString.split("."); else if (dateString.indexOf("-") >= 0) dArray = dateString.split("-"); else if (dateString.indexOf("\\") >= 0) dArray = dateString.split("\\"); else dArray = false; return dArray; } function updateDateField(dateFieldName, dateString) { var targetDateField = document.getElementsByName (dateFieldName).item(0); if (dateString) targetDateField.value = dateString; var pickerDiv = document.getElementById(datePickerDivID); pickerDiv.style.visibility = "hidden"; pickerDiv.style.display = "none"; adjustiFrame(); targetDateField.focus(); // after the datepicker has closed, optionally run a user-defined function called // datePickerClosed, passing the field that was just updated as a parameter // (note that this will only run if the user actually selected a date from the datepicker) if ((dateString) && (typeof(datePickerClosed) == "function")) datePickerClosed(targetDateField); } /** Use an "iFrame shim" to deal with problems where the datepicker shows up behind selection list elements, if they're below the datepicker. The problem and solution are described at: http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx */ function adjustiFrame(pickerDiv, iFrameDiv) { // we know that Opera doesn't like something about this, so if we // think we're using Opera, don't even try var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1); if (is_opera) return; // put a try/catch block around the whole thing, just in case try { if (!document.getElementById(iFrameDivID)) { // don't use innerHTML to update the body, because it can cause global variables // that are currently pointing to objects on the page to have bad references //document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>"; var newNode = document.createElement("iFrame"); newNode.setAttribute("id", iFrameDivID); newNode.setAttribute("src", "javascript:false;"); newNode.setAttribute("scrolling", "no"); newNode.setAttribute ("frameborder", "0"); document.body.appendChild(newNode); } if (!pickerDiv) pickerDiv = document.getElementById(datePickerDivID); if (!iFrameDiv) iFrameDiv = document.getElementById(iFrameDivID); try { iFrameDiv.style.position = "absolute"; iFrameDiv.style.width = pickerDiv.offsetWidth; iFrameDiv.style.height = pickerDiv.offsetHeight ; iFrameDiv.style.top = pickerDiv.style.top; iFrameDiv.style.left = pickerDiv.style.left; iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1; iFrameDiv.style.visibility = pickerDiv.style.visibility ; iFrameDiv.style.display = pickerDiv.style.display; } catch(e) { } } catch (ee) { } } //style.css Code: body { margin:5px 5px; font-size:0.9em; font-family: "Myriad Pro", "Trebuchet MS", Arial; font-size:14px; border:1px solid #000; background-color:#CCCCFF;} a { color:#64a520; text-decoration:none;} a:hover { text-decoration:underline;} /*Calendar Styles*/ /* the div that holds the date picker calendar */ .dpDiv { } /* the table (within the div) that holds the date picker calendar */ .dpTable { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; color:#000000; background-color:#99CCCC; border: 1px solid #AAAAAA; } /* a table row that holds date numbers (either blank or 1-31) */ .dpTR { } /* the top table row that holds the month, year, and forward/backward buttons */ .dpTitleTR { } /* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */ .dpDayTR { } /* the bottom table row, that has the "This Month" and "Close" buttons */ .dpTodayButtonTR { } /* a table cell that holds a date number (either blank or 1-31) */ .dpTD { border: 1px solid #ece9d8; } /* a table cell that holds a highlighted day (usually either today's date or the current date field value) */ .dpDayHighlightTD { background-color: #CCCCCC; border: 1px solid #AAAAAA; } /* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */ .dpTDHover { background-color: #aca998; border: 1px solid #888888; cursor: pointer; color: red; } /* the table cell that holds the name of the month and the year */ .dpTitleTD { } /* a table cell that holds one of the forward/backward buttons */ .dpButtonTD { } /* the table cell that holds the "This Month" or "Close" button at the bottom */ .dpTodayButtonTD { } /* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */ .dpDayTD { background-color: #CCCCCC; border: 1px solid #AAAAAA; color: white; } /* additional style information for the text that indicates the month and year */ .dpTitleText { font-size: 12px; color: gray; font-weight: bold; } /* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ .dpDayHighlight { color: 4060ff; font-weight: bold; } /* the forward/backward buttons at the top */ .dpButton { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; color: gray; background: #d8e8ff; font-weight: bold; padding: 0px; } /* the "This Month" and "Close" buttons at the bottom */ .dpTodayButton { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; color: gray; background: #d8e8ff; font-weight: bold; } what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? I have this script that I got from some site. When you click on a link tied to a div it hides all other divs and displays just that one. Well, that works, but I want it to display one of the divs on page load based on today's date. For example, it will display the "summer" div if today's date is anywhere between June 1 and August 31. When links to other divs are clicked that div will disappear and other ones will appear in its place. Anyway, here's the code, and I don't know anything about javascript so I have no idea where to even start editing it. Please help Code: <script type="text/javascript"> <!-- Layer Show/Hide Script last="" function changeDiv(the_div,the_change) { var the_style = getStyleObject(the_div); if (the_style != false) { the_style.display = "block" if(last!="") { last.display = "none" } } last=the_style } function getStyleObject(objectId) { if (document.getElementById && document.getElementById(objectId)) { return document.getElementById(objectId).style; } else if (document.all && document.all(objectId)) { return document.all(objectId).style; } else { return false; } } //--> </script> Javascript novice here looking to create a dynamic dropdown based on date. It's a list of preset prices that will change each month to reflect a pro-rated system. Any thoughts/examples on how I would go about setting this up using javascript would be much appreciated. Thanks. Here's what I need: In September, the dropdown will display these prices Code: <option value="100">Product 1</option> <option value="150">Product 2</option> <option value="200">Product 3</option> In October, the dropdown will display these prices <option value="50">Product 1</option> <option value="100">Product 2</option> <option value="150">Product 3</option> Hello all. I have created a 2 frame site where I want the top frame (header) to redirect the other frame (main) to a different page depending on the date, time, and second. For example, on 12 FEB at 07:00:00, I would like the header frame to redirect the main frames page to EmmasBday.html; in which I would be alerted of my little sisters Birthday. This is for personal use and isn't going to be hosted online so I will just use JavaScript, it's basically a simple system to remind me of crucial events at certain times and dates so I don't forget them. The same events will apply every year, so there is no need to programme in specific years although having the option could prove useful. I am aware of other alternatives to achieve this, but would very much like to work with JavaScript; as I can expand it. As I state, this is for personal use and therefore won't be hosting it; I will use JavaScript throughout and cannot use anything else like PHP, Perl, etc. I am aware JavaScript takes the time & date from the computer hosting it (unlike PHP), which is fine. So, for example; at 14:30:00 I will be informed to get dinner; and at 15:00:45 I'll be informed to study. The knowledge you guys have presented so far is phenomenal, and I couldn't think of anybody better to ask for assistance. Anyway, I hope you can resolve my problem and I'm looking forward to a response! Thanks for your concern, you brain Gods you! AHa. Hi guys. I am kind of new to javascript, and was hoping that someone here could help out on a problem I have been having. What I am trying to do is to make a page which will redirect to three diffrent sites, based on date. I want it to change to diffrent sites during the time before summer to summer, the time before xmas till xmas and from before easter till easter. A bit more spesific this would be: From 29. march --> 22. july (summer) From 22. august --> 24. december (xmas) From 3. january --> 22. march (easter) Could you help me out? I have tried lots of diffrent ways to do this with javascripts if...else statements, but I havent yet found a way to make it work properly. Really thankful for answers! I'm new to coding and recently undertook the position as my school district's webmaster. We use a six day schedule where the days are labeled A-F. I want to be able to display the Today is...A graphic based on the date. I tried some scripts from other forums, but it does not appear to be working. Any suggestions? TY <code> <script language="javascript"> <!-- var picture=''; mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); if (mymonth==9 && mydate==13){picture="<img src=/images/d.gif>"; } if (mymonth==9 && mydate==14){picture="<img src=/images/e.gif width=150 height=150 alt=E>"; } if (mymonth==9 && mydate==15){picture="<img src=/images/f.gif width=150 height=150 alt=F>"; } if (mymonth==9 && mydate==16){picture="<img src=/images/A.gif width=150 height=150 alt=A>"; } if (mymonth==9 && mydate==19){picture="<img src=/images/B.gif width=150 height=150 alt=B>"; } if (mymonth==9 && mydate==20){picture="<img src=/images/c.gif width=150 height=150 alt=C>"; } //--> </script></code> Hi All, I have a form that captures member registration details. In the admin section .. I would like to change the Status field of a record/s from NEW to PAYMENT DUE after 14 days from the data of submission. The status change should automatically trigger on the 15th day. So when the admin checks the list page he/she should be able to view the updated status field. Any pointers how to accomplish this? Thanks in advance. Vinny Hello, I've been trying to figure this script out for awhile and I've hit a wall. Basically, what I want to do for my organization's website is to use JS to display an image containing our hours and have it change each day of the week. The hard part (for me) is that there are certain days we're closed. Ideally, I'd like a separate "We're Closed" message to overwrite the image carrying our hours on specific days (major holidays like Xmas, New Years, Vet's Day, furlough periods, etc. etc.). Here's the code I've managed to cobble together (I have a real basic understanding of JS, so I've been pulling scripts from sites offering free copy/pastecode): [CODE] <script language="javascript"> mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); myday=mytime.getDay(); arday = new Array("sunday.png", "monday.png", "tuesday.png", "wednesday.png", "thursday.png", "friday.png", "saturday.png"); document.write("<img src='" + arday[myday] + "'>"); if (mymonth==12 && mydate==24){document.write("<img src='closure.png'>"); } </script> [CODE] For the most part, this code works just fine. However, if I jump my system clock to December 24, the "closure.png" comes up appears ALONGSIDE the hours image for that day of the week. In other words, I've got two images appearing right next to each other - that's not what I want. How can I work the code in such a way that when a closure date comes up (in this case, 12/24), just the "closure.png" image shows up by itself? Thank you all so much for your time and patience. Not sure if this is possible in javascript: I'm looking for two different dates (bill date and due date) on an invoice that are captured by OCR. If one of them exists, but the other does not, I want the empty field to be 14 days before (or after) the other. For example: if the bill date is 7/27/2010 and the due date was not captured, I want to set the due date as 8/10/2010 (14 days after the bill date). If the due date was captured as 8/10/2010, but the due date is blank, I want to assign the bill date as 7/27/2010 (14 days before the due date). if both dates have values, do nothing. Thanks. 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 Hi, I've inherited a Form which calculates a future date based on a calculation and then inserts today's date and the future date into a database. The day part of the date is formatted as a number. This is fine, but up to 9 the numbers display in single figures with no leading zeros. I want them to display leading zeros (e.g. 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11... 30, 31) So; 1/12/2010 is NOT wanted 01/12/2010 IS wanted The inherited code originally set the Month names as "Jan", "Feb" etc, and it was easy to kludge these to 01, 02... 12, but I suspect there's a more elgant solution to this as well, this bit of the code works so it's not as vital to neaten this but my database needs dd/mm/yyyy format (it's a third party email program). Code: </script> <script type="text/javascript"> var todaysDate = new Date(); function updateExpiryDate(){ var weeklyMileage = document.getElementById('AvWeeklyMileage').value; var expiryDate; var weeks = 0; var expiryDateString = ''; if (!isNaN(parseInt(weeklyMileage))){ weeks = 700/weeklyMileage; expiryDate = new Date(todaysDate.getTime() + (1000 * 3600 * 24 * 7 * weeks)); var expiryDateString = expiryDate.getDate() + '/' + getMonthString(expiryDate.getMonth()+1) + '/' + expiryDate.getFullYear(); document.getElementById('expiryDate').innerHTML = expiryDateString; document.getElementById('ShoeExpiryDate').value = expiryDateString; } else { document.getElementById('ShoeExpiryDate').value = ''; document.getElementById('expiryDate').innerHTML = 'Please enter a valid weekly average mileage' } } function getMonthString(monthNumber){ var monthString = ""; switch(monthNumber){ case 1: monthString = "01"; break; case 2: monthString = "02"; break; case 3: monthString = "03"; break; case 4: monthString = "04"; break; case 5: monthString = "05"; break; case 6: monthString = "06"; break; case 7: monthString = "07"; break; case 8: monthString = "08"; break; case 9: monthString = "09"; break; case 10: monthString = "10"; break; case 11: monthString = "11"; break; case 12: monthString = "12"; break; default: // do nothing; } return monthString; } function setTodaysDate(){ var todaysDateString = todaysDate.getDate() + '/' + getMonthString(todaysDate.getMonth()+1) + '/' + todaysDate.getFullYear(); document.getElementById('todaysDate').innerHTML =todaysDateString; document.getElementById('DateOfPurchase').value = todaysDateString; } Can someone point me in the right direction please? Hi, I need to add days to a date in javascript, My requirement is as follows: Date is coming from a textbox. eg:- 26/07/2010 days from this statement var day1=document.getElementById('<%=HiddenDate.ClientID %>').value; an eg:- if the date is 28/01/2012 and days Needed to be added=5 the added date should be 02/02/2012. Can anybody help me? Thanks Jamuna Using Adobe Form Javascript validation, how would I do this code for Visual Basic in Javascript (non web) Code: If PurchaseDate.Value > Date Then MsgBox ("PurchaseDate cannot be greater than Today's Date!") Cancel = True End If Something along these lines but this isnt working: Code: If (PurchaseDate.Value > Date) Then { app.alert ("Purchase Date cannot be greater than Today's Date!"); } Thanks Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript"> jQuery(document).ready(function($){ $('input[name="item_meta[428]"]').change(function(){ var d = $('input[name="item_meta[428]"]').val(); var n = new Date(d).getDay(); if(n == 0) val v = 'Sunday'; else if(n == 1) val v = 'Monday'; else if(n == 2) val v = 'Tuesday'; else if(n == 3) val v = 'Wednesday'; else if(n == 4) val v = 'Thursday'; else if(n == 5) val v = 'Friday'; else if(n == 6) val v = 'Saturday'; $('input[name="item_meta[429]"]').val(v).change(); }); }); </script> I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. |