|
JavaScript - Datepicker - Unable To Change Date Format
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 Similar TutorialsHi 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 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;
}
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 Hi, I am using jQuery datepicker's date range, I have a dynamic form where date range fields are added dynamically, for this reason I have set the two selectors for jQuery date range to classes. Below is my code: Code: $( ".datepicker_start_date, .datepicker_end_date" ).livequery(function() {
var dates = $( ".datepicker_start_date, .datepicker_end_date" ).datepicker({
defaultDate: "+1w",
changeMonth: false,
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var getclass = $(this).attr("class");
var option = getclass.indexOf("datepicker_start_date") != -1 ? "minDate" : "maxDate",
instance = $(this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
The above works perfect if I have just two field to range the date such as fields with class .datepicker_start_date and .datepicker_end_date. But if I have multiple fields like have 3-4 more date range fields, it will just mess the dates and add dates of field1 to field 3 and vice versa. I would appreciate if someone could help. Many Thanks 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] I have been using the following script for some time and it has only just been made known to me that it fails on todays date ! not sure if this is the case for other days but the days of the week are all messed up and do not show correctly for a date in June 2011. Code: var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();
// Get Element By Id
function ds_getel(id) {
return document.getElementById(id);
}
// Get the left and the top of the element.
function ds_getleft(el) {
var tmp = el.offsetLeft;
el = el.offsetParent
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
}
function ds_gettop(el) {
var tmp = el.offsetTop;
el = el.offsetParent
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
}
// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');
// Output Buffering
var ds_ob = '';
function ds_ob_clean() {
ds_ob = '';
}
function ds_ob_flush() {
ds_oe.innerHTML = ds_ob;
ds_ob_clean();
}
function ds_echo(t) {
ds_ob += t;
}
var ds_element; // Text Element...
var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.
var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.
// Calendar template
function ds_template_main_above(t) {
return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
+ '<tr>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="7" class="ds_head">' + t + '</td>'
+ '</tr>'
+ '<tr>';
}
function ds_template_day_row(t) {
return '<td class="ds_subhead">' + t + '</td>';
// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}
function ds_template_new_week() {
return '</tr><tr>';
}
function ds_template_blank_cell(colspan) {
return '<td colspan="' + colspan + '"></td>'
}
function ds_template_day(d, m, y) {
return '<td class="ds_cell" onMouseout="this.style.background=\'#EEE\';" onMouseover="this.style.background=\'#999\';" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
// Define width the day row.
}
function ds_template_main_below() {
return '</tr>'
+ '</table>';
}
// This one draws calendar...
function ds_draw_calendar(m, y) {
// First clean the output buffer.
ds_ob_clean();
// Here we go, do the header
ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
for (i = 0; i < 7; i ++) {
ds_echo (ds_template_day_row(ds_daynames[i]));
}
// Make a date object.
var ds_dc_date = new Date();
ds_dc_date.setMonth(m - 1);
ds_dc_date.setFullYear(y);
ds_dc_date.setDate(1);
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
days = 31;
} else if (m == 4 || m == 6 || m == 9 || m == 11) {
days = 30;
} else {
days = (y % 4 == 0) ? 29 : 28;
}
var first_day = ds_dc_date.getDay();
var first_loop = 1;
// Start the first week
ds_echo (ds_template_new_week());
// If sunday is not the first day of the month, make a blank cell...
if (first_day != 0) {
ds_echo (ds_template_blank_cell(first_day));
}
var j = first_day;
for (i = 0; i < days; i ++) {
// Today is sunday, make a new week.
// If this sunday is the first day of the month,
// we've made a new row for you already.
if (j == 0 && !first_loop) {
// New week!!
ds_echo (ds_template_new_week());
}
// Make a row of that day!
ds_echo (ds_template_day(i + 1, m, y));
// This is not first loop anymore...
first_loop = 0;
// What is the next day?
j ++;
j %= 7;
}
// Do the footer
ds_echo (ds_template_main_below());
// And let's display..
ds_ob_flush();
// Scroll it into view.
//ds_ce.scrollIntoView();
}
// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
// Set the element to set...
ds_element = t;
// Make a new date, and set the current month and year.
var ds_sh_date = new Date();
ds_c_month = ds_sh_date.getMonth() + 1;
ds_c_year = ds_sh_date.getFullYear();
// Draw the calendar
ds_draw_calendar(ds_c_month, ds_c_year);
// To change the position properly, we must show it first.
ds_ce.style.display = '';
// Move the calendar container!
the_left = ds_getleft(t);
the_top = ds_gettop(t) + t.offsetHeight;
ds_ce.style.left = the_left + 'px';
ds_ce.style.top = the_top + 'px';
// Scroll it into view.
//ds_ce.scrollIntoView();
}
// Hide the calendar.
function ds_hi() {
ds_ce.style.display = 'none';
}
// Moves to the next month...
function ds_nm() {
// Increase the current month.
ds_c_month ++;
// We have passed December, let's go to the next year.
// Increase the current year, and set the current month to January.
if (ds_c_month > 12) {
ds_c_month = 1;
ds_c_year++;
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous month...
function ds_pm() {
ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
// We have passed January, let's go back to the previous year.
// Decrease the current year, and set the current month to December.
if (ds_c_month < 1) {
ds_c_month = 12;
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the next year...
function ds_ny() {
// Increase the current year.
ds_c_year++;
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous year...
function ds_py() {
// Decrease the current year.
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Format the date to output.
function ds_format_date(d, m, y) {
// 2 digits month.
m2 = '00' + m;
m2 = m2.substr(m2.length - 2);
// 2 digits day.
d2 = '00' + d;
d2 = d2.substr(d2.length - 2);
// YYYY-MM-DD
return d2 + '-' + m2 + '-' + y;
}
// When the user clicks the day.
function ds_onclick(d, m, y) {
// Hide the calendar.
ds_hi();
// Set the value of it, if we can.
if (typeof(ds_element.value) != 'undefined') {
ds_element.value = ds_format_date(d, m, y);
// this part is a personal bit of code to allow my page to update correctly and in time.
if("fireEvent" in ds_element)
ds_element.fireEvent("onChange");
else
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
ds_element.dispatchEvent(evt);
}
//
// Maybe we want to set the HTML in it.
} else if (typeof(ds_element.innerHTML) != 'undefined') {
ds_element.innerHTML = ds_format_date(d, m, y);
// I don't know how should we display it, just alert it to user.
} else {
alert (ds_format_date(d, m, y));
}
}
http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? 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 I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console. the code that is waiting for the content... Code: <div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" /> the code that should change the content.... Code: <? echo("<script type=\"text/javascript\">
document.getElementById('desc').value='" . $count . "';
</script>");
?>
when i view the source code the javascript lines show like so... Code: <script type="text/javascript">
document.getElementById('desc').value='373';
</script>
do i have the javascript correct ? 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? Alright so I've been searching around trying to figure out how to change the date format, the way I have seen it the most is like Code: var d=new Date(); var datestring=d.getdate + d.getMonth + d.get Year I am new to javascript and this is the first script I have written on my own so this is what it does. It is supposed to display the date that a shipment should arrive on with 2 day shipping through ups so it skips weekends. It displays the date after either adding 2 days or more depending on the day of the week. But the way the date is formatted really needs to be changed. So if any one can suggest maybe how to tie in the above code with mine that would be great. Code: <script type="text/javascript">
var d=new Date();
var day=d.getDay();
if (day <= 3){
d.setDate (d.getDate() + 2);
}
else if (day == 4) {
d.setDate (d.getDate() + 4)
}
else if (day == 5){
d.setDate (d.getDate() + 4);
}
else if (day == 6) {
d.setDate (d.getDate() + 3);
}
document.write("Your card should arrive on " + d);
</script>
Hello. I have got this kind of array: Code: $days = array('Monday' => '2012-03-19',
'Tuesday' => '2012-03-20'
);
I'm iterating like this: Code: foreach($days as $key => $value){
echo '<a href="javascipt:confirmDelete('.$value.');">Delete</a>';
}
Script: Code: function confirmDelete(day)
{
if (confirm('Delete?')) {
window.location.href = 'processDay.php?action=delete&day=' + day ;
}
}
While i hover over the link with coursor, it show it good: javascript:confirmDelete(2012-03-19), but when I submit the delete confirmation, i get &day=1987. Where is the problem? I've been trying to change the way a date appears. The JS gives the date Easter will fall in a particular year. That works but the format that appears is this; Sun Apr 24 00:00:00 EDT 2011 I'm trying to get it to read like this: Sunday, April 24, 2011 I've been racking my brain all morning and can't seem to get it right. Very limited experience in JS doesn't help either. Could somebody take a look and see where I messed up. Thanks in advance. George Code: easterYear = 2011;
var a, b, c, d, e, f, g, h, i, k, l, m, easterMonth, easterDate;
a = parseInt(easterYear % 19);
b = parseInt(easterYear / 100);
c = parseInt(easterYear % 100);
d = parseInt(b / 4);
e = parseInt(b % 4);
f = parseInt((b + 8) / 25);
g = parseInt((b - f + 1) / 3);
h = parseInt((19 * a + b - d - g + 15) % 30);
i = parseInt(c / 4);
k = parseInt(c % 4);
l = parseInt((32 + 2 * e + 2 * i - h - k) % 7);
m = parseInt((a + 11 * h + 22 * l) / 451);
easterMonth = parseInt((h + l - 7 * m + 114) / 31);
easterDate = parseInt(((h + l - 7 * m + 114) % 31) + 1);
var dayName = new Array
("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday");
var monthName=new Array
("January","February","March","April","May",
"June","July","August","September","October",
"November","December");
var now = new Date();
var gplMonth = monthName[easterMonth-1];
var gplDay = dayName[0];
//gplDay ;
var gplDate = new Date();
var gplDt = gplDate.getDate();
document.write(new Date(easterYear , easterMonth - 1, easterDate) ); // Original line
document.write('<br />' )
document.write( gplDay + ", " + gplMonth + " " + easterDate + ", " + easterYear)
document.write('<br />' )
document.write(gplMonth + " " + easterDate )
document.write('<br />' )
Hello! First of all, sorry my bad english. (and javascripting skills...) I have a problem with date formatting! My code is supposed to get the day of the week from date format like dd.mm.yyyy (01.01.2010, 31.12.2010) but it only works if date format is like "28 December, 2000". Code is he Code: <script type="text/javascript">
function getTheDay(aText) {
myDays=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
myDate=new Date(eval('"'+aText.value+'"'))
document.form1.textDay.value=myDays[myDate.getDay()]
}
</script>
<form name="form1" id="form1" method="post" action="" enctype="text/plain">
<input type="text" name="textDate" id="textDate" value="" size="25" onchange="getTheDay(this.form.textDate)" />
<br />
<input type="text" name="textDay" size="25" maxlength="25" />
</form>
Original code: http://www.trans4mind.com/personal_d...ript/time2.htm Can anyone help me? I have tried everything what i have find from google... Thanks to you all who help me with this! -Roosterr I'm not too sure how to approach this but I have a date input that uses a jQuery pop-up for a calendar, and enters the date in a format d MMM yy (1 Jan 11). Not everyone wants to be clicking and choosing the date from the calendar but to be entering it just as a number such as 0101, 010111 or 01012011 which can be faster. This would then need to be converted to the d MMM yy format as per the jQuery pop-up when they exit the input box. So really only if it's a number format it needs to look at the number of digits... and does the conversion. Has anyone done something like this before? Or is there a link to how I could go about achieving this? Many thanks David Hello, I would like to learn if there is way to change a different format every time the user want as example is Code: London 12:00:33 - Friday 18/03/2011 Thanks Hello, I am using jQuery to set a cookie and the expiration date is: Code: date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); which lasts for 1 day, but I would like the cookie to not expire for a long time, is this possible? I know google has one that like expires in 2035 or something but I would like this on to last long. What should I do? So I want this function to return the date in the format: 4-Jan-2011. I feel like I have to make the variables strings or something but I can't figure it out, I'm kinda new to javascript. Code: function calander(TheDay) {
var theDate = new Date();
var day = new theDate.getDay();
var month = new theDate.getMonth();
var year = new theDate.getFullYear();
if (month == 0) {month = "Jan";}if (month == 1) { month = "Feb"; }
if (month == 2) { month = "March"; }if (month == 3) { month = "April"; }
if (month == 4) { month = "May"; }if (month == 5) { month = "June"; }
if (month == 6) { month = "July"; }if (month == 7) { month = "Aug"; }
if (month == 8) { month = "Sept"; }if (month == 9) { month = "Oct"; }
if (month == 10) { month = "Nov"; }if (month == 11) { month = "Dec"; }
TheDay.value = day + "-" + month + "-" + year;
}
hello, is there a date format for an existing date? all I see is a var d = new Date(); but i need to format an existing date? thanks! 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>
|
|||||||