|
JavaScript - Problem Wirth Datepicker Code
Hi,
I have downloaded the datepicker code from the site http://www.javascriptkit.com/script/...calendar.shtml It's working fine with Firefox but when run the application on Safari/Chrome and when I load the calendar and try to expand the expansion is uneven... only the center column i.e Wednesday is getting expanded and others are remaining constant.. but in Firefox it's working fine... Can somebody help me in fixing it.. Thanks, Ram Similar TutorialsI am trying to extend my plug in by restricting the sunday from the calendar. I am not sure how to do this with my existing code. here is the code which is currently not working: <script type="text/javascript"> $(function() { // Tabs $('#datepicker1').datepicker({ beforeShowDay: function(date) { return [(date.getDay() > 1), ""]; } minDate: 0, maxDate: "+12M +0D", dateFormat: 'dd-mm-yy' }); }); </script> Can anyone see anything obvious?? 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 I would like to use the jquery datepicker to populate 2 input fields with the same date. I need the 2 fields to display the date in different formats though. So for example one would be displayed as 2009-11-26 and the other as Thu 26 Nov 2009 Here's the code I have so far (which does not work)... Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtStartDate").datepicker({ dateFormat: 'D d M yy' });
$("#txtStartDate2").datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<p><input name="startDate" id="txtStartDate" type="text" value="" />Dept. date:</p>
<input name="startDate" id="txtStartDate2" value="" type="text" />
</body>
Hello everyone! I am using a javascript datepicker for a form field, and I had not noticed this before someone brought it up. I dont remember where I got the script but I am wondering if this error can be fixed. I had a look though the code but I do not program javascript, so nothing sticks out to me. The problem comes when there is already a date in the field. Let me start by saying we format our dates as dd/mm/yyyy. When a user clicks the field and opens the calendar it automatically goes to the date that is in the field (if there is one). Everything works fine, but when there its a number in the dd/ position that is under 12, the calendar uses it as the month. If the number is over 12, it uses the /mm/ as the month, which is correct. So today for example, if the date in the field is 08/10/2010, and a user clicks the field to open the calendar, the calendar goes to August 2010... If the date is 15/10/2010 it will go to October which is correct. Sorry for the length. I am wondering if this can be fixed somehow because finding a new datepicker and switching it on all my pages would take a very long time. Below is the datepicker.js, thanks to anyone who has time to take a look! Code: /*
* DatePicker
* @author Rick Hopkins
* @modified by Micah Nolte and Martin Vašina
* @version 0.3.2
* @classDescription A date picker object. Created with the help of MooTools v1.11
* MIT-style License.
-- start it up by doing this in your domready:
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
*/
var DatePicker = new Class({
/* set and create the date picker text box */
initialize: function(dp){
// Options defaults
this.dayChars = 1; // number of characters in day names abbreviation
this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.format = 'dd/mm/yyyy';
this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
this.yearOrder = 'asc';
this.yearRange = 10;
this.yearStart = (new Date().getFullYear());
// Finds the entered date, or uses the current date
if(dp.value != '') {
dp.then = new Date(dp.value);
dp.today = new Date();
} else {
dp.then = dp.today = new Date();
}
// Set beginning time and today, remember the original
dp.oldYear = dp.year = dp.then.getFullYear();
dp.oldMonth = dp.month = dp.then.getMonth();
dp.oldDay = dp.then.getDate();
dp.nowYear = dp.today.getFullYear();
dp.nowMonth = dp.today.getMonth();
dp.nowDay = dp.today.getDate();
// Pull the rest of the options from the alt attr
if(dp.alt) {
options = Json.evaluate(dp.alt);
} else {
options = [];
}
dp.options = {
monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames,
daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth,
dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
startDay : options.startDay || this.startDay,
dayChars : options.dayChars || this.dayChars,
format: options.format || this.format,
yearStart: options.yearStart || this.yearStart,
yearRange: options.yearRange || this.yearRange,
yearOrder: options.yearOrder || this.yearOrder
};
dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
dp.container = false;
dp.calendar = false;
dp.interval = null;
dp.active = false;
dp.onclick = dp.onfocus = this.create.pass(dp, this);
},
/* create the calendar */
create: function(dp){
if (dp.calendar) return false;
// Hide select boxes while calendar is up
if(window.ie6){
$$('select').addClass('dp_hide');
}
/* create the outer container */
dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);
/* create timers */
dp.container.onmouseover = dp.onmouseover = function(){
$clear(dp.interval);
};
dp.container.onmouseout = dp.onmouseout = function(){
dp.interval = setInterval(function(){
if (!dp.active) this.remove(dp);
}.bind(this), 500);
}.bind(this);
/* create the calendar */
dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);
/* create the date object */
var date = new Date();
/* create the date object */
if (dp.month && dp.year) {
date.setFullYear(dp.year, dp.month, 1);
} else {
dp.month = date.getMonth();
dp.year = date.getFullYear();
date.setDate(1);
}
dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;
/* set the day to first of the month */
var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);
/* create the month select box */
monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
for (var m = 0; m < dp.options.monthNames.length; m++){
monthSel.options[m] = new Option(dp.options.monthNames[m], m);
if (dp.month == m) monthSel.options[m].selected = true;
}
/* create the year select box */
yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
i = 0;
dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
if (dp.options.yearOrder == 'desc'){
for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
yearSel.options[i] = new Option(y, y);
if (dp.year == y) yearSel.options[i].selected = true;
i++;
}
} else {
for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
yearSel.options[i] = new Option(y, y);
if (dp.year == y) yearSel.options[i].selected = true;
i++;
}
}
/* start creating calendar */
calTable = new Element('table');
calTableThead = new Element('thead');
calSelRow = new Element('tr');
calSelCell = new Element('th', {'colspan':'7'});
monthSel.injectInside(calSelCell);
yearSel.injectInside(calSelCell);
calSelCell.injectInside(calSelRow);
calSelRow.injectInside(calTableThead);
calTableTbody = new Element('tbody');
/* create day names */
calDayNameRow = new Element('tr');
for (var i = 0; i < dp.options.dayNames.length; i++) {
calDayNameCell = new Element('th');
calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars));
calDayNameCell.injectInside(calDayNameRow);
}
calDayNameRow.injectInside(calTableTbody);
/* create the day cells */
while (firstDay <= dp.options.daysInMonth[dp.month]){
calDayRow = new Element('tr');
for (i = 0; i < 7; i++){
if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
} else {
calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
}
// Show the previous day
if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
calDayCell.addClass('dp_selected');
}
// Show today
if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
calDayCell.addClass('dp_today');
}
firstDay++;
}
calDayRow.injectInside(calTableTbody);
}
/* table into the calendar div */
calTableThead.injectInside(calTable);
calTableTbody.injectInside(calTable);
calTable.injectInside(dp.calendar);
/* set the onmouseover events for all calendar days */
$$('td.' + dp.id + '_calDay').each(function(el){
el.onmouseover = function(){
el.addClass('dp_roll');
}.bind(this);
}.bind(this));
/* set the onmouseout events for all calendar days */
$$('td.' + dp.id + '_calDay').each(function(el){
el.onmouseout = function(){
el.removeClass('dp_roll');
}.bind(this);
}.bind(this));
/* set the onclick events for all calendar days */
$$('td.' + dp.id + '_calDay').each(function(el){
el.onclick = function(){
ds = el.axis.split('|');
dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
this.remove(dp);
}.bind(this);
}.bind(this));
/* set the onchange event for the month & year select boxes */
monthSel.onfocus = function(){ dp.active = true; };
monthSel.onchange = function(){
dp.month = monthSel.value;
dp.year = yearSel.value;
this.remove(dp);
this.create(dp);
}.bind(this);
yearSel.onfocus = function(){ dp.active = true; };
yearSel.onchange = function(){
dp.month = monthSel.value;
dp.year = yearSel.value;
this.remove(dp);
this.create(dp);
}.bind(this);
},
/* Format the returning date value according to the selected formation */
formatValue: function(dp, year, month, day){
/* setup the date string variable */
var dateStr = '';
/* check the length of day */
if (day < 10) day = '0' + day;
if (month < 10) month = '0' + month;
/* check the format & replace parts // thanks O'Rey */
dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
dp.month = dp.oldMonth = '' + (month - 1) + '';
dp.year = dp.oldYear = year;
dp.oldDay = day;
/* return the date string value */
return dateStr;
},
/* Remove the calendar from the page */
remove: function(dp){
$clear(dp.interval);
dp.active = false;
if (window.opera) dp.container.empty();
else if (dp.container) dp.container.remove();
dp.calendar = false;
dp.container = false;
$$('select.dp_hide').removeClass('dp_hide');
}
});
Can someone please tell me how I can make the datepicker pick a date that is after a certain date I choose. <script type="text/javascript"> $(document).ready(function() { $( "#date" ).datepicker({ minDate: new Date(<?php echo $split_date[2];?>, <?php echo $split_date[0] - 1;?>, <?php echo $split_date[0];?>)}); }); </script> <?php /* I am trying to get the date from a dynamic php variable. For eg: */ $date='03/08/2011'; $split_date=explode("/",$date); echo $split_date[0]; echo $split_date[1]; echo $split_date[2]; ?> but nothing i tried so far works! Hi I was playing around with the jQuery Multiple months plugin and was wondering if there was anyway I could display 4 months in it with 2 months on top and the other two months at bottom. OR If that is not possible then can we display 2 different instance of calendars something like this screenshot but changing the month on either one would change the other two months of the other calendar at the same time. If anyone can help, i will be greateful. Thanks in advance Hi, I am using the jQuery UI Datepicker - Event Search. as a booking-system. I want to automatically disable days from my MYSQL table in my booking-system (datePicker). So, here is the deal: In my website, there is booking-system, you can reserve a room from datePicker. I have successfully created a PHP, which sends the information (name, room, date etc.) to my MYSQL. Then I have successfully created a datesonly.php, which prints only a dates from my MYSQL. So now I have to make javascript (?) which reads dates from datesonly.php and draws a booked-note to my datePicker at website (so people can see which days are booked --> no double-books!). Booked-note should be something like that day in datePicker is red. Thank you! And sorry for my bad english, I'm from Finland. EDIT: Sorry, the title should be: Disabling days from datePicker via JavaScript I currently am using the jQuery UI DatePicker for my page. For each date that has an "event" listed for that day, the date is highlighted. The other part of my page on the bottom has a "previous" and "next" button. This is basic record selection/navigation pretty much, but I am new to Javascript. Is there an easy way to navigate through these? Any help would be majorly appreciated. 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 Hi, I got this two javascripts: - Datepicker by Jason Moon (http://calendar.moonscript.com/dateinput.cfm) which can have multiple of this datepicker on a single form - Dynamic Add/Remove rows from http://viralpatel.net/blogs/2009/03/...avascript.html I would like to add rows of fields with each rows having it's individual datepicker. Code: <table id="billcmp_7" width="320" border="0">
<tr>
<td width="200" align="center"><script>DateInput('billcmp7_cycle', true)</script></td>
<td width="10"> </td>
<td width="100" align="center"><input name="billcmp7_name" type="text" /></td>
<td width="10"><INPUT type="checkbox" name="chk"/></td>
</tr>
</table>
<table width="320" border="0">
<tr>
<td colspan="4" align="center"><INPUT type="button" value="Add Row" onclick="addRow('billcmp_7')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('billcmp_7')" /></td>
</tr>
</table>
I just want this section Code: <script>DateInput('billcmp7_cycle', true)</script>
to work like Code: <script>DateInput('billcmp7_cycle_1', false)</script>
<script>DateInput('billcmp7_cycle_2', false)</script>
when click on the add button. Here's what i meant? Link cant get the time to be different as it is still read as single datepicker. Any1 has any idea how or any alternative? Hi, I have 2 calendars using jquery UI datepicker. The first calendar is default to todays date. What I need to happen is for the second calendar default date to change to default date (of first calendar) + 1 day. I'm really not too sure how to do this... So any help would be great! This is the code I have so far: [CODE] $(document).ready(function(){ $("#startDate").datepicker({ dateFormat: "dd/mm/yy" }).val() $('#startDate').datepicker('setDate', new Date()); }); $(document).ready(function(){ $("#endDate").datepicker({ dateFormat: "dd/mm/yy" }).val() }); $('#startDate').datepicker({onSelect: function(dateStr) { $('#endDate').datepicker('option', 'defaultDate', dateStr); }}); $('#endDate').datepicker(); [/ICODE] Hi, I am using a javascript datepicker which works fine with simple textboxes: For example: I have a textBox startDate1 in the table below: <form method="post" name="upload" action=""> <table id="tableId"> <tr> <td> <input type="text" name="startDate1" value="" readonly="true" size="10"/> <script language="JavaScript"> new tcal ({'formname': 'upload','controlname': 'startDate1'}); </script> <td> </tr> <table> </form> --Now I want to add rows dynamically to this table for which I have <a href="javascript:addRowToTable();" >Add Row</a> and the corresponding javascript function: <script type = "text/javascript"> function addRowToTable() { var tbl = document.getElementById('tableId'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var box = row.insertCell(0); var element = document.createElement('input'); element.setAttribute('type', 'text'); element.setAttribute('name', 'startDate' + iteration); box.appendChild(element); } </script> --This code creates the text boxes properly, but I am not being able to add the datepicker to it. Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows. Thank You Regards Rusho Shaw 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));
}
}
hi guys " I made very simple code to find the average of array : PHP Code: <script> var sum = 0; var gradesArray = [95,80,75]; for (var i = 0; i <= 3; i = i+1) { sum = sum + gradesArray[i]; } document.write('Your average is ' + sum / 3); </script> the output is : Your average is NaN how I can fixt it. Hi, Please i have this code which is not working correctly,please can somebody help write it incorrect order for me. When i write it on a separate notepad then it works but when i write or combine them on a single notepad like what is here it do not work. Help me please,here is the code <html> <body> <script type="text/javascript"> function calculate(){ A=Number(document.frmone.txtfirstnumber.value) B=Number(document.frmone.txtsecondnumber.value) A=Number(A) B=Number(B) C=A+B document.frmone.txtthirdnumber.value=C if(Number(A) && Number(B)){ A=Number(A) B=Number(B) C=A+B document.frmone.txtthirdnumber.value=C } else{ alert("Enter a number in both boxes") } } // here is another subtraction code to calculate function calculate(){ A=Number(document.frmone2.txtfirstnumber.value) B=Number(document.frmone2.txtsecondnumber.value) A=Number(A) B=Number(B) C=A-B document.frmone2.txtthirdnumber.value=C if(Number(A) && Number(B)){ A=Number(A) B=Number(B) C=A-B document.frmone2.txtthirdnumber.value=C } else{ alert("Enter a number in both boxes") } } // here is a palindrom code function palinChecker() { var string = document.palindrome.input.value; document.palindrome.palindrometext.value = reverseString(string); if (isPalindrome(string)) { alert("That IS a palindrome."); } else { alert("That is NOT a palindrome."); } } <p>Here is palindrome checker code</p> function isPalindrome (inputString) { var reversedString = reverseString(inputString); return (reversedString==reverseString(reversedString)); } function reverseString(stringToReverse) { stringToReverse = stringToReverse.toUpperCase(); var reversedString=""; var length= stringToReverse.length-1; var ch; for (var i=length; i>=0; i--) { ch = stringToReverse.charAt(i) if(ch >='A' && ch <='Z') { reversedString += ch; } } return reversedString; } </script> </head> <body> <form name=frmone> Value one: <input type=text name=txtfirstnumber size=5 value=""/> value two: <input type=text name=txtsecondnumber size=5 value=""/> Total:<input type=text name=txtthirdnumber size=5 value=""/> <input type="button" value="Add Numbers" onclick="calculate()"/> <p>this is a subtraction text field,just enter a number and get a result</p> <form name=frmone2> Value one: <input type=text name=txtfirstnumber size=5 value=""/> value two: <input type=text name=txtsecondnumber size=5 value=""/> Total:<input type=text name=txtthirdnumber size=5 value=""/> <input type="button" value="Subtract Numbers" onclick="calculate()"/> <p>Here is palindrome form filed</p> <form name="palindrome"> <p>Enter phrase: <input type="text" name="input"><br> <input type="button" name="check" value="Check if palindrome" onclick="palinChecker();"><br> <input type="text" name="palindrometext" value=""></p> </form> </body> </html> Thank you. Clement Osei. Hello to everyone, . Im a new user and i have a question. Here is a code from a WebPage, in the page there is a button that called "Check Flaps" when i click it is need to run a javascript code and show me the results on the same window, but it not worked. The javascript code: Code: javascript:document.getElementsByTagName('html')[0].innerHTML.replace(/<!--|-->/g,'')
Is Working only when i open a new window and copy & paste the code and hit enter. I want it to show me the results on the same window. Here is the method: Code: </ul>
<div id="brakeline"></div>
<div id="fs">
<form action="https://isp-012:qwerty123!!@cows-isp.hot.net.il/cgi-bin/cm_result.html?MAC=" name="frm2" method="get" id="cows" target="bottom">
<h5>#MAC</h5>
<input class="textinput" type="text" name="MAC" id="MAC">
<div id="brakeline5"></div>
<input class="submitc2" id="sumb" type="submit" value="Check">
</form>
<form action="javascript:document.getElementsByTagName('html')[0].innerHTML.replace(/<!--|-->/g,'')" target="bottom">
<input class="submitc" id="ChkFlap" type="submit" value="Check Flaps">
</form>
</div>
Thanks. Hi there, I am new to javascript and have been working on this code to randomly shuffle a playlist of Youtube videos which are in an array. I have tried to implement a next and previous function, which I have managed to some success however, there is a problem. I have a system where there are two arrays: one is for the 'upcoming' videos and the other is for 'previous' videos. When the next button is pressed, the last element of the 'upcoming' array is added to the 'previous' array and I use the pop() function to return and delete that element from the 'upcoming' array and so on. When the previous button is pressed it puts the last element into the 'upcoming' array and uses the pop function as well, and so on. It works well except one thing, when previous is pressed the current video will load again, then on the second press it will go to the true previous video. The same happens when you click next after clicking previous. This is my code: PHP Code: <html> <span id = "displayarea"></span> <script type = "text/javascript"> var Varray = []; Varray[0] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/007VM8NZxkI?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/007VM8NZxkI?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>'; Varray[1] ='<iframe width="420" height="315" src="http://www.youtube.com/embed/DfDBZUb3mvI" frameborder="0" allowfullscreen></iframe>'; Varray[2] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/T9TmmF79Rw0?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/T9TmmF79Rw0?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>'; Varray[3] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/I1edDfzluXE?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/I1edDfzluXE?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' Varray[4] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/qXLxM0u1aJw?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qXLxM0u1aJw?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' Varray[5] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/UyOaTo_MiFE?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UyOaTo_MiFE?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' var Vprevious = []; Varray.sort(function(){return Math.round(Math.random());}); function showit() { Vprevious.push((Varray[Varray.length-1])); document.getElementById("displayarea").innerHTML=Varray.pop(); } function previousit() { Varray.push((Vprevious[Vprevious.length-1])); document.getElementById("displayarea").innerHTML=Vprevious.pop(); } Vprevious.push((Varray[Varray.length-1])); document.getElementById("displayarea").innerHTML=Varray.pop(); </script> <input type = "button" id = "NextB" value = "Next" onclick = "showit();"> <input type = "button" id = "previousB" value = "previous" onclick = "previousit();"> </html> and the link to the test site is http://www.musicrate.org/rotate I have tried playing around with things and trying to use splice() to select the video one before the last, however I have not succeeded. Any help on the matter would be appreciated. It is probably something simple and obvious so I apologize in advance if that is the case. Thanks document.thisform1.q_no.value=<%=out.print(Questions.getMaxQuesNo(%>document.write(paper_id);<%)%>
|
|||||||