|
JavaScript - Date Calculation - Change Date Formats
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? Similar TutorialsI have just implemented the Event Calendar (located at http://javascriptkit.com/script/scri...calendar.shtml) on my website with only 1 issue : the date format has to be changed from mm/dd/yyyy to dd/mm/yyyy. I have been searching for the coding in the html and js file to amend this to no avail.\ Can someone point me in the right direction ? I have a javascript that should convert any date into a number between 1 and 260. Based on the outcome of that calculation, a viewer is directed to a specific web page. How can I verify the calculation? How can I see what number javascript is arriving at so I can backtrack to the error? It is not serving up the correct page. I have compared the results to a calculator on another website that uses a different script to calculate the same result -- that's why I am saying the end results are not correct. On the other website, scroll down to where you enter a date. It returns a name just above the date (example: July 25, 1970 returns Electric Star). The script I included above returns Yellow Sun. July 25, 1970 should = 68. Code: function calculate() {
if(!isValidDate())
return;
var result = 0;
var cuttingAge = 260;
var yearBox = document.getElementById("year");
var year = yearBox.value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
//Rule # 1
if(month==1 || month==2){
var selectedYearIndex;
for(var i=0; i<yearBox.options.length; i++){
if(yearBox.options[i].selected){
selectedYearIndex = i;
break;
}
}
year = yearBox.options[selectedYearIndex-1].value;
}
//Rule # 2
var monthLength = new Array();
monthLength[0]=0;
monthLength[1]=31;
monthLength[2]=29;
monthLength[3]=31;
monthLength[4]=30;
monthLength[5]=31;
monthLength[6]=30;
monthLength[7]=31;
monthLength[8]=31;
monthLength[9]=30;
monthLength[10]=31;
monthLength[11]=30;
monthLength[12]=31;
monthLength[13]=31;
monthLength[14]=29;
var dayPassed = 0;
var tempMonth = month;
if(month<3) //If its january or february
tempMonth = parseInt(tempMonth) +12; //Add previous year's days
for(var i=3; i<tempMonth; i++){
dayPassed += monthLength[i];
}
dayPassed += parseInt(day) -1;
dayPassed = dayPassed%cuttingAge;
//Rule # 3
result = parseInt(year) + parseInt(dayPassed);
//Rule # 4
if(result > cuttingAge)
result -= cuttingAge;
//Rule # 5
var pendant = new Array();
var abc = new Array();
pendant[0] = {
name:"imix",
values:new Array(1, 21, 41, 61, 81, 101, 121, 141, 161, 181, 201, 221, 241)
};
pendant[1] = {
name:"ik",
values:new Array(2, 22, 42, 62, 82, 102, 122, 142, 162, 182, 202, 222, 242)
};
pendant[2] = {
name:"akbal",
values:new Array(3, 23, 43, 63, 83, 103, 123, 143, 163, 183, 203, 223, 243)
};
pendant[3] = {
name:"kan",
values:new Array(4, 24, 44, 64, 84, 104, 124, 144, 164, 184, 204, 224, 244)
};
pendant[4] = {
name:"chicchan",
values:new Array(5, 25, 45, 65, 85, 105, 125, 145, 165, 185, 205, 225, 245)
};
pendant[5] = {
name:"cimi",
values:new Array(6, 26, 46, 66, 86, 106, 126, 146, 166, 186, 206, 226, 246)
};
pendant[6] = {
name:"manik",
values:new Array(7, 27, 47, 67, 87, 107, 127, 147, 167, 187, 207, 227, 247)
};
pendant[7] = {
name:"lamat",
values:new Array(8, 28, 48, 68, 88, 108, 128, 148, 168, 188, 208, 228, 248)
};
pendant[8] = {
name:"muluk",
values:new Array(9, 29, 49, 69, 89, 109, 129, 149, 169, 189, 209, 229, 249)
};
pendant[9] = {
name:"oc",
values:new Array(10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250)
};
pendant[10] = {
name:"chuen",
values:new Array(11, 31, 51, 71, 91, 111, 131, 151, 171, 191, 211, 231, 251)
};
pendant[11] = {
name:"eb",
values:new Array(12, 32, 52, 72, 92, 112, 132, 152, 172, 192, 212, 232, 252)
};
pendant[12] = {
name:"ben",
values:new Array(13, 33, 53, 73, 93, 113, 133, 153, 173, 193, 213, 233, 253)
};
pendant[13] = {
name:"ix",
values:new Array(14, 34, 54, 74, 94, 114, 134, 154, 174, 194, 214, 234, 254)
};
pendant[14] = {
name:"men",
values:new Array(15, 35, 55, 75, 95, 115, 135, 155, 175, 195, 215, 235, 255)
};
pendant[15] = {
name:"cib",
values:new Array(16, 36, 56, 76, 96, 116, 136, 156, 176, 196, 216, 236, 256)
};
pendant[16] = {
name:"caban",
values:new Array(17, 37, 57, 77, 97, 117, 137, 157, 177, 197, 217, 237, 257)
};
pendant[17] = {
name:"etznab",
values:new Array(18, 38, 58, 78, 98, 118, 138, 158, 178, 198, 218, 238, 258)
};
pendant[18] = {
name:"cauac",
values:new Array(19, 39, 59, 79, 99, 119, 139, 159, 179, 199, 219, 239, 259)
};
pendant[19] = {
name:"ahau",
values:new Array(20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260)
};
var redirecctPages = new Array();
redirecctPages["chuen"] = "http://store.mayankin.com/blue-monkey/";
redirecctPages["eb"] = "http://store.mayankin.com/yellow-human/";
redirecctPages["ben"] = "http://store.mayankin.com/red-skywalker/";
redirecctPages["ix"] = "http://store.mayankin.com/white-wizard/";
redirecctPages["men"] = "http://store.mayankin.com/blue-eagle/";
redirecctPages["cib"] = "http://store.mayankin.com/yellow-warrior/";
redirecctPages["caban"] = "http://store.mayankin.com/red-earth/";
redirecctPages["etznab"] = "http://store.mayankin.com/white-mirror/";
redirecctPages["cauac"] = "http://store.mayankin.com/blue-storm/";
redirecctPages["ahau"] = "http://store.mayankin.com/yellow-sun/";
redirecctPages["imix"] = "http://store.mayankin.com/red-dragon/";
redirecctPages["ik"] = "http://store.mayankin.com/white-wind/";
redirecctPages["akbal"] = "http://store.mayankin.com/blue-night/";
redirecctPages["kan"] = "http://store.mayankin.com/yellow-seed/";
redirecctPages["chicchan"] = "http://store.mayankin.com/red-serpent/";
redirecctPages["cimi"] = "http://store.mayankin.com/white-world-bridger/";
redirecctPages["manik"] = "http://store.mayankin.com/blue-hand/";
redirecctPages["lamat"] = "http://store.mayankin.com/yellow-star/";
redirecctPages["muluk"] = "http://store.mayankin.com/red-moon/";
redirecctPages["oc"] = "http://store.mayankin.com/white-dog/";
var pendantName;
for(var i =0; i<pendant.length; i++){
var found = false;
for(var j=0; j<pendant[i].values.length; j++){
if(result == pendant[i].values[j]){
pendantName = pendant[i].name;
found = true;
break;
}
}
if(found)
break;
}
document.location = redirecctPages[pendantName];
}
/**
* Comment
*/
function isValidDate() {
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
if(month==2 && day>29){
alert("Please select a valid date");
return false
}
if((month==4 || month==6 || month==9 || month==11) && day>30){
alert("Please select a valid date");
return false
}
return true;
}
In my JSP page i have start date and End date fields are there. The format for these two fields has Date and Time . But my requirement is if i change the date in start date field it should change the same date in End Date field also automatically. Here is my code Code: <div id=apptTimeEditOD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
<%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() ) %>
<select name="startHour" id=startHour class="selInputSmall" onChange="odRefreshApptEndTime();">
<%= OptionMenu.render( _ahsPage, "CAL_TIME_HOUR", appt.getStartTime().substring(0,2), false, true ) %>
</select>
<select name="startMin" id=startMin class="selInputSmall" onChange="odRefreshApptEndTime();">
<%=OptionMenu.render( _ahsPage, "CAL_TIME_MINUTE", appt.getStartTime().substring(3,5), false )%>
</select>
</div>
<div class="formPrompt" style="position: absolute; width: 90; height: 22; left: 20; top: 2; text-align: left;"><%=_pCal.get("end_time")%>:</div>
<div id=apptTimeEditEnD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
<%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() )%> <div id=apptODEndTime style="position: absolute; width: 90; height: 22; left: 140; top: 2; text-align: left;" > </div>
</div>
Please give me an idea on this one ? How do i change the End Date automatically when i change the start date. - never mind, I figured out the javascript problem
Hi All, I have a snippet of Javascript that changes date format from yyyy/mm/dd to dd/mm/yyyy: Code: <script type="text/javascript">
var myString = "[[date]]";
var mySplitResult = myString.split("-");document.write(mySplitResult[2] + "/" + mySplitResult[1] + "/" + mySplitResult[0] );
</script>
However, I want it to return the format as dd/mm/yy (the last two number of the year rather than the full four). Is this possible to do? Thanks, Neil I have a database script that returns dates in the following format: yyyy-mm-dd I have been using the following code to change this format to dd-mm-yyyy: Code: <script type="text/javascript">
var myString = "[[date]]";
var mySplitResult = myString.split("-");document.write(mySplitResult[2] + "/" + mySplitResult[1] + "/" + mySplitResult[0] );
</script>
However, I now want to display the date in text format, e.g. 01-08-2009 would be displayed as 01 August 2009. Could anyone please let me know how I change the script to show this format? Many thanks in advance, Neil 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 everyone, i made this clock and for me in the UK it displays my time, however for people everywhere else in the world it displays their current time, i would like it to display GMTdate only regardless of where you live. any help would be great. below is my code: Code: <script type="text/javascript">
<!--
function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
// -->
</script>
thanks Hello I am trying to change the default date format within my date picker, but nothing I do seems to work. This is the relevant Code: Code:
$(function() {
Date.format = 'yy-mm-dd';
$('#popupDatepicker').datepick();
});
<p><b>Date Of Birth:</b><input type="text" name="dob" id="popupDatepicker"><br>
All I see is dd/mm/yy no matter what I change I need it in a format suitable for MySQL Thanks 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;
}
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. 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 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 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. 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 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 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 folks, i am trying to generate a dynamic datefield with date mask "mm/dd/yyyy" and trying to insert it into Oracle db ...i still got the error ORA invalid month ehich means the date filed is not recognized as date: below is what i am doing : newStartDate = document.createElement( 'INPUT' ); newStartDate.setAttribute('type','Date'); newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; any help thanks ?? Also i want to add a datepicke to this textbox..how it is posible / other option is to use Jquery datepicker but could not know how to impement it thanks again I have been working on this code for a few days now and it works. Or at least it appears to be working. I would like to have the tot 1, tot 2, tot 3 return with currency formatting. Is there a way to add something to my code to accomplish this? Thank you in advance for any suggestions. Regards Code: <html>
<head>
<script type="text/javascript" src="autoCurrency.js"></script>
<script type="text/javascript">
function doCalc() {
var v1 = document.getElementById('value1').value;
var v2 = document.getElementById('value2').value;
var v3 = document.getElementById('value3').value;
document.getElementById('total1').value = ((v1*5)+(v2*1)) * (1-v3/100);
document.getElementById('total2').value = ((v1*10)+(v2*1)) * (1-v3/100);
document.getElementById('total3').value = ((v1*15)+(v2*1)) * (1-v3/100);
}
</script>
<style type="text/css">
button { width: 80px; }
input { margin: 10px 0; }
input[type='text'] { width: 50px; }
</style>
</head>
<body>
<div>
<input id="value1" type="text" value="0" /> <br />
</div>
<div>
<input id="value2" type="text" value="0" /> <br />
</div>
<div>
<input id="value3" type="text" value="0" /> <br />
</div>
Tot 1:<input id="total1" type="text" /><br />
Tot 2: <input id="total2" type="text" /><br />
Tot 3: <input id="total3" type="text" /><br />
<button class="long" onclick="doCalc();">Calculate</button>
</body>
</html>
I am delving into the coding world and while I understand the basic principle of cookies, conditional statements, arrays, etc... I am still learning how to properly implement them. Any asistance with the following situation would be greatly appreciated and help with my learning as I try to reverse engineer the logic. I have looked around the web and this forum with little success. If the situation below is too complicated, I would really appreciate even a shove in the right direction regarding the logic. ----------------- How could I show a preset counter which counts up from a preset, beginning number toward a preset, end number? I imagine the increment and speed is set be the difference between the two numbers and a timeframe. Assumptions: I would rather not set the increment but edit the end number to show a steady increase. As I update that number, the increment adapts dynamically. I would want the number/script to be useful, so it should not refresh to the beginning number on each page load (i.e. num=0). When a visitor comes to the page, it must seem like the counter has been steadily been increasing in their absence. Coke or Pesi did something similar one time regarding cans sold to date (doubt it was plugged into a DB somewhere but rather based on a steady sales figure) and it was pretty cool. All the best! |
|||||||