|
JavaScript - Disable First 3 Days Of Popup Calendar
Hello,
I need to disable the first 3 days of a popup calendar so that users can only select a date which is 3 days in advance to the present date. I dont really know javascript so i would really appreciate if someone can help me out in this. Calendar code can be found below. Code: /* --- Swazz Javascript Calendar ---
/* --- v 1.0 3rd November 2006
By Oliver Bryant
http://calendar.swazz.org */
function getObj(objID)
{
if (document.getElementById) {return document.getElementById(objID);}
else if (document.all) {return document.all[objID];}
else if (document.layers) {return document.layers[objID];}
}
function checkClick(e) {
e?evt=e:evt=event;
CSE=evt.target?evt.target:evt.srcElement;
if (getObj('fc'))
if (!isChild(CSE,getObj('fc')))
getObj('fc').style.display='none';
}
function isChild(s,d) {
while(s) {
if (s==d)
return true;
s=s.parentNode;
}
return false;
}
function Left(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function Top(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="../../public/front/includes/classes/images/arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Verdana"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="../../public/front/includes/classes/images/arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Verdana">S</td><td align=center style="background:#ABABAB;font:12px Verdana">M</td><td align=center style="background:#ABABAB;font:12px Verdana">T</td><td align=center style="background:#ABABAB;font:12px Verdana">W</td><td align=center style="background:#ABABAB;font:12px Verdana">T</td><td align=center style="background:#ABABAB;font:12px Verdana">F</td><td align=center style="background:#ABABAB;font:12px Verdana">S</td></tr>');
for(var kk=1;kk<=6;kk++) {
document.write('<tr>');
for(var tt=1;tt<=7;tt++) {
num=7 * (kk-1) - (-tt);
document.write('<td id="v' + num + '" style="width:18px;height:18px"> </td>');
}
document.write('</tr>');
}
document.write('</table>');
document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);
// Calendar script
var now = new Date;
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();
var updobj;
function lcs(ielem) {
updobj=ielem;
getObj('fc').style.left=Left(ielem);
getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;
getObj('fc').style.display='';
// First check date is valid
curdt=ielem.value;
curdtarr=curdt.split('/');
isdt=true;
for(var k=0;k<curdtarr.length;k++) {
if (isNaN(curdtarr[k]))
isdt=false;
}
if (isdt&(curdtarr.length==3)) {
ccm=curdtarr[1]-1;
ccy=curdtarr[2];
prepcalendar(curdtarr[0],curdtarr[1]-1,curdtarr[2]);
}
}
function evtTgt(e)
{
var el;
if(e.target)el=e.target;
else if(e.srcElement)el=e.srcElement;
if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
return el;
}
function EvtObj(e){if(!e)e=window.event;return e;}
function cs_over(e) {
evtTgt(EvtObj(e)).style.background='#CD2F30';
}
function cs_out(e) {
evtTgt(EvtObj(e)).style.background='#F0F0F0';
}
function cs_click(e) {
updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)];
getObj('fc').style.display='none';
}
var mn=new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');
var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');
var calvalarr=new Array(42);
function f_cps(obj) {
obj.style.background='#F0F0F0';
obj.style.font='10px Verdana';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.textDecoration='none';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}
function f_cpps(obj) {
obj.style.background='#F0F0F0';
obj.style.font='10px Verdana';
obj.style.color='#ABABAB';
obj.style.textAlign='center';
obj.style.textDecoration='line-through';
obj.style.border='1px solid #6487AE';
obj.style.cursor='default';
}
function f_hds(obj) {
obj.style.background='#FFF799';
obj.style.font='bold 10px Verdana';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}
// day selected
function prepcalendar(hd,cm,cy) {
now=new Date();
sd=now.getDate();
td=new Date();
td.setDate(1);
td.setFullYear(cy);
td.setMonth(cm);
cd=td.getDay();
getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
marr=((cy%4)==0)?mnl:mnn;
for(var d=1;d<=42;d++) {
f_cps(getObj('v'+parseInt(d)));
if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));
htd=((hd!='')&&(d-cd==hd));
if (dip)
f_cpps(getObj('v'+parseInt(d)));
else if (htd)
f_hds(getObj('v'+parseInt(d)));
else
f_cps(getObj('v'+parseInt(d)));
getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;
getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;
getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;
getObj('v'+parseInt(d)).innerHTML=d-cd;
calvalarr[d]=''+(d-cd)+'-'+(cm-(-1))+'-'+cy;
}
else {
getObj('v'+d).innerHTML=' ';
getObj('v'+parseInt(d)).onmouseover=null;
getObj('v'+parseInt(d)).onmouseout=null;
getObj('v'+parseInt(d)).style.cursor='default';
}
}
}
prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';
function caddm() {
marr=((ccy%4)==0)?mnl:mnn;
ccm+=1;
if (ccm>=12) {
ccm=0;
ccy++;
}
cdayf();
prepcalendar('',ccm,ccy);
}
function csubm() {
marr=((ccy%4)==0)?mnl:mnn;
ccm-=1;
if (ccm<0) {
ccm=11;
ccy--;
}
cdayf();
prepcalendar('',ccm,ccy);
}
function cdayf() {
if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm)))
return;
else {
ccy=sccy;
ccm=sccm;
cfd=scfd;
}
}
Thank you very much in advance Sami Similar TutorialsHi Experts, I am trying to open a popup window on clicking a link. It works fine, but all I need now is to disable the address/URL bar from the window for all browsers. I am using the below script... Code: <script type="text/javascript">
<!--
function popup(url)
{
var width = 600;
var height = 400;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=yes';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>
Code: <a href="javascript: void(0)"
onclick="popup('/examples/index.php')">preview</a>
Please guide me how can I do that... Thanks. I am after a script that will allow a calendar to pop up to select a date in UK date format. I have a page that has a form with three date fields so the script needs to be reusable. I have been told to use jquery but could not work out how to reuse or get the calendar to be a different size other than half the size of the full page screen! the whole sites CSS also got messed up using jquery for some reason, think maybe I had used the same CSS tags as jquery? So looking for a basic calendar script no-frills, short sweet reusable. :-) Can anyone suggest some? Hello there, plz help working with php. am new to coding. I am working to get a reservation system for golf tee times. I have 2 different pages. one is where i will set the generic settings for golf course. the other is a reservations page which provides an option to add new reservation page. Now in the settings page i can set no of days to 1 thru 5. it will be inserted into config table in database. Based on this, on reservation page, i need to show only 1 or 2 or 5 days on the popup calendar starting from today which allows to select one while making new reservation. or based on the setting if i can prepopulate those dates in a drop down list on the addreservation.php Hey guys, I'm looking for a way to disable the popup that appears by default when visitors try to leave a webpage that has my cpalead content locker widget on it. I want to disable all cases of it happening. Thanks Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) Hello, I have a textbox with a date formatted 'dd/mm/yyyy'. I want to be able to add days to the date so that the month ticks over if the days exceed the days in the month and the year also if the month value passes 12. Currently I have the below. This adds to the days but will not tick over the month. Any help please. Thanks Code: <html>
<head>
<script type="text/javascript">
function calDate() {
var dateArr = document.getElementById('testinput').value;
var myDate = new Date();
var day;
var month;
var year;
day = dateArr.substring(0,2);
month = dateArr.substring(3,5);
year = dateArr.substring(6,10);
if (day.charAt(0) == '0')
{
day = day.charAt(1);
}
if (month.charAt(0) == '0')
{
month = month.charAt(1);
}
myDate.setDate(day);
myDate.setMonth(month); // January = 0
myDate.setFullYear(year);
alert((myDate.getDate()+28)+ "/" + (myDate.getMonth()) + "/" + myDate.getFullYear());
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="calDate();"> click</a><input type="text" id="days" value="0"/>
</body>
</html>
I have 2 dates in variables (formatted like 'Wed Jan 18 2012 01:01:01 GMT+0000 (BST)') I need to minus them to get the days This worked if they were in the same month var amountOfDays = date.getDate() - datefirst.getDate(); However if the dates where in 2 different months it doesnt work. How would i do it better 2 months? I am trying to figure out how to calculate the date 30 days ago. I also will need to be able to change the interval. Anyone have a piece of code that does this? I am attempting to create a javascript code that will write out the lyrics to the popular Christmas song, The 12 Days of Christmas. Here is what I have so far; Code: <?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>ITS 200 Project 5: 12 Days of Christmas</title>
<script type = "text/javascript">
<!--
document.writeln ("<h1> The 12 Days of Christmas </h1>");
for (var i =1; i = 12; i++)
{
var day;
var addline;
var gift;
var pastline;
switch(i)
{
case 1:
day = "first";
addline = "A partridge in a pear tree.";
pastline = "and" + addline;
break;
case 2:
day = "second";
addline = "Two Turtle Doves";
break;
case 3:
day = "third";
addline = "Three French Hens";
break;
case 4:
day = "fourth";
addline = "Four Calling Birds";
break;
case 5:
day = "fifth";
addline = "FIIIIVEEE GOOOOLDEN RIIIINGS!!!!!!";
break;
case 6:
day = "sixth";
addline = "Six Geese-a-laying";
break;
case 7:
day = "seventh";
addline = "Seven Swans-a-swimming";
break;
case 8:
day = "eighth";
addline = "Eight Maids-a-milking";
break;
case 9:
day = "ninth";
addline = "Nine Ladies Dancing";
break;
case 10:
day = "tenth";
addline = "Ten Lords-a-leaping";
break;
case 11:
day = "eleventh";
addline = "Eleven Pipers Piping";
break;
case 12:
day = "twelfth";
addline = "Twelve Drummers Drumming";
break;
} // end switch
if (i==1)
gift = addline;
else
{
gift = addline + "<br>" + pastline;
pastline = gift;
} // end else
document.writeln("<br>On the" + day + "of Christmas<br> my true love sent to me:"<br> + gift);
}
//-->
</script>
</head>
<body>
</body>
</html>
I have no idea why only the heading is coming up!? I'm just trying to add X days to a given date object. However, it's not the right answer (did it in PHP to check, and my PHP version works). dateObj = new Date (month + '/' + day + '/' + year); // Grab the object for a given date datestamp = dateObj.getTime(); // Get millisecond timestamp newDate = new Date (datestamp + (1000 * 60 * 60 * 24 * parseInt (daysToAdd))); // Add "daysToAdd" days to the date alert (newDate); It's not daysToAdd days away... Any help is greatly appreciated. I wrote a version not using the Date () object, but rather an array of the days in each month, and then subtracting each month until "day" was below 31, etc. It's a lot less efficient than this method though :P Hi Guys, Is it possible to add a certain number of days (determined by a select box option) to a date in the format of Thursday, 26 January, 2012 ?? Thanks Please help I am a newbie and need some assistant. I'm trying to get a full date. In this script I want the user to be able to enter a date and get a 1000 day result a full (date) mm/dd/yyy. So far this give me the year only. I've tried so many ways. <script language="javascript"> var reply = prompt("Please enter the date you and your love begin dating (mm/dd/yyyy)", " "); var newstring = new String(reply); var arrTemp = new Array(); arrTemp = newstring.split("/"); var year = parseInt(arrTemp[arrTemp.length-1]); year += 3; alert("You begin dating your love in " + parseInt(arrTemp[arrTemp.length-1]) + "\nYou should be married before or in the year of " + year); </script> 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 Hello everyone, I have a date script, but I want it to be adjusted so for example today it's September 17th 2009, but I want it to say September 15th 2009, so it removes automaticly 2 days.. I tried allot of things but I am not a javascript expert, I hope someone can help me out! Code: <script language="JavaScript" type="text/javascript">
<!--
var
month = new Array();
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var
day = new Array();
day[0]="Sunday";
day[1]="Monday";
day[2]="Tuesday";
day[3]="Wednesday";
day[4]="Thursday";
day[5]="Friday";
day[6]="Saturday";
today = new Date();
date = today.getDate();
day = (day[today.getDay()]);
month = (month[today.getMonth()]);
year = (today.getFullYear());
suffix = (date==1 || date==21 || date==31) ? "st" : "th" &&
(date==2 || date==22) ? "nd" : "th" && (date==3 || date==23) ? "rd" : "th"
function print_date()
{
document.write(day + "," + " " + date + "<sup>" + suffix + "</sup>" + " " +
month + "," + " " + year);
}
// -->
</script>
<script>
<!--
print_date();
//-->
</script>
Hi, i have just started learning & understanding JavaScript. I am just trying to do a small project for my Brother regarding Leave Management, for which its required to Select the From Date & To Date, wherein the Total no. of days should be calculated, excluding the weekends. I have just worked around to calculate the number of days but i am not sure how to exclude the Weekends. & what if the the Year is a Leap year - So how will i include the Extra days of Feb month. I am using RAD date-pickers to get the Value & split it. But being a newbie to the Coding world i m really N'joyin the JavaScript.... Just need help regarding this coz i m totally helpless... I am taking the 2 Dates from 2 Rad Datepickers & diplaying the Number of Days in a Text Box. Here is My Coding :- Code: <script type="text/javascript">
function CalcLeaveDays()
{
var FromDate=document.getElementById("ctl00_ContentPlaceHolder1_ApplyLeaveNew_control_rdpStartdate");
var ToDate=document.getElementById("ctl00_ContentPlaceHolder1_ApplyLeaveNew_control_rdpEnddate");
document.getElementById("ctl00_ContentPlaceHolder1_ApplyLeaveNew_control_txtnoofdays");
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var FrmDate=FromDate.value.substring(8,10);
var FrmMonth=FromDate.value.substring(5,7);
var FrmYear=FromDate.value.substring(0,4);
var TDate=ToDate.value.substring(8,10);
var TMonth=ToDate.value.substring(5,7);
var TYear=ToDate.value.substring(0,4);
var sysDate=new Date();
var sysDay=sysDate.getDate();
var sysMonth=(sysDate.getMonth())+1;
var sysYear=sysDate.getFullYear();
var LeaveDays;
if(FrmYear>=sysYear)
{
if((FrmMonth>=sysMonth)&(TMonth>=sysMonth))
{
if(FrmDate>(sysDay+3))
{
if(TDate>=FrmDate)
{
if(FrmDate==TDate)
{
alert ('1')
LeaveDays = 1;
}
else if(TDate>FrmDate)
{
alert(TDate-FrmDate+1);
LeaveDays = TDate-FrmDate+1;
}
else
{
alert('Check');
return false;
}
}
else
{
alert('Kindly Select the End Date Appropriately ');
return false;
}
}
}
}
document.getElementById("ctl00_ContentPlaceHolder1_ApplyLeaveNew_control_txtnoofdays").value =LeaveDays;
}
</script>
I've written a js function to find the difference between two dates. the format being used is dd/mm/yyyy hh:mm. The function returns correct value when give one set of values, but go wrong with another set. examples are given below. set 1 : Time 1 = 24/02/2011 09:30 , time 2 = 24/02/2011 16:00 Output is corret here. It gives 6 Hours & 30 Minutes (after converting the difference) set 2: Time 1 = 24/02/2011 09:30 , time 2 = 25/02/2011 16:00 Here, it gives 31 days, 6 Hours & 30 Minutes. My code is given below. Also the alert of dates display strange values. Don't know if it is timezone issue. I wonder what is going wrong here Code: function compareDateTime(frmtime,totime)
{
var date1 = new Date(frmtime);
var date2 = new Date(totime);
var diff = new Date();
alert(date1);
alert(date2);
diff = (date2.getTime()-date1.getTime());
if (diff<0)
{
alert("From Time cannot be later than To Time!");
return 0;
}
else if (diff==0)
{
alert("From Time cannot be equal with To Time!");
return 0;
}
else
{
return diff;
}
}
The returned diff value is broken down as following: Code: if (diff>0)
{
days = Math.floor(diff / (1000 * 60 * 60 * 24));
diff -= days * (1000 * 60 * 60 * 24);
hours = Math.floor(diff / (1000 * 60 * 60));
diff -= hours * (1000 * 60 * 60);
mins = Math.floor(diff / (1000 * 60));
alert(days+","+hours+","+mins);
return true;
}
what am i doing wrong here? I have a Java Script that displays a Daily Affirmation on a webpage from an array of 365 Affirmations within the same html webpage file. This makes the html file size way too large. So I would like for the java script to read the array from an external text file on the same website server. Please provide me the Code to insert within my script which will read the array from an external text file - and also the format that the array of 365 lines must be typed into the external text file. I am not a Javascript Programmer - and know nothing about Javascript, so please write your reply at my (lack of) knowledge Level. Thank you in advance! Here is the code I am using. <script language=javascript> <!-- Date.prototype.getDOY = function() {var onejan = new Date(this.getFullYear(),0,1); return Math.ceil((this - onejan) / 86400000);} var today = new Date(); var DOY = today.getDOY(); var HL=new Array() //Configure the following array to hold the 365 HLs for each day of the year HL[1]='HL 1 goes here' HL[2]='HL 2 goes here' HL[3]='HL 3 goes here' // Jump to Day 224 of the year for this example only HL[224]='I am surrounding myself with positive and supportive people. When I nurture relationships that give me energy and enjoyment, I mirror my beliefs that I deserve such gifts.' HL[225]='Today I affirm my own worth and value, and discover that the world agrees with me.' HL[226]='I am sowing seeds based on a healthy belief in my own self-worth. My life is flourishing with growing love, contentment, and exciting possibilities.' HL[227]='HL 227 goes here' HL[228]='HL 228 goes here' // Jump to last HL for Day 365 of year - for this example only HL[365]='HL 365 goes here' document.write(HL[DOY]) //--> </script> Is it possible to disable all scripts within a certain div? Like if I was displaying something in <div id="member"> and a member posts a script within that div, I would like it to not work.
I'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();">
<input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
<a onclick="javascript:nextEvent();">
<input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>
This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) {
if (index == maxIndex || index >= maxIndex) {
//disable next button
tempObj = document.getElementsByName("next");
tempObj.visible = false;
}
else {
index = index + 1;
eventSelected(rawDates[index]);
}
|
|||||||