|
JavaScript - Greyout Specific Dates In Popup Calendar
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 Similar TutorialsHi I'm relatively new to Javascript and I'm trying to learn more about dates my problem is as follows I have to do validation on a form for 2 dates(StartDate and EndDate) the dates cannot be more than four months apart if they are an alert must be displayed. In other words Nov 2009 till March 2010 or May 2009 till September 2009 should be invalid regardless of the day of the month Simply 2 input boxes(StartDate and EndDate) and a submit I've got the other parts of my page worked out just this has me stumped I would appreciate any help in this regard Thank You for your time 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 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? Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me. I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them. Is there a single method using JS that works for all browsers? Thre is probably a very simple answer and I am just missing it somehow. 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. :-) I am trying to launch an HTML page with a calendar field populated with today's date. I have a function to set the date but I am getting an error when I try to run the page: Code: //Begin function window_onload
function window_onload() {
UpdateData();
// TODO: Add your event handler code here
function onInitialUpdate() {
document.getElementById('calendar1').value=getTodaysDate();
}
}
//End function window_onload
function getTodaysDate(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
var today = yyyy+'/'mm+'/'+dd;
alert('Today is '+mm+'/'+dd+'/'+yyyy);
return today;
}
gives me an error that the onload function is expecting an object. Is ther something wrong with my coding? I'm not sure if java is the best way to go with this, I'm pretty inexperienced with java, but I have a workable knowledge of html, and couldn't see a way to do it that way... so here goes: For my job I work with a ton of different deadlines all the time. What I want to do is to make a webpage that displays the date N days ago, and N days into the future. So something like 7 days ago, 30 days ago, 60 days ago 75 days ago, 30 days from now, 60 days from now, 75 days from now. etc. I've found brief snippets for how to display today's date, but i'm having trouble with the calculations. Then I also need one that displays 18 years ago, I'm not sure if the change from days to years makes any kind of difference, but I suppose it's easy enough to convert years to days anyway.... How would I go about doing that? Thank you!!! Can anyone explain why this isn't working!? I hate JavaScript and dates! For the date: 07/08/2010 it will output: 6/7/2010. Thanks for any help. Code: var startDay = startDate.value.substr(0,2); var startMonth = startDate.value.substr(3,2); var startYear = startDate.value.substr(6,4); var myDate = new Date(startYear,startMonth-1,startDay+numberNights.value); endDate.value = myDate.getDay() + '/' + myDate.getMonth() + '/' + myDate.getFullYear(); Hi there How can you calculate the difference in two dates that are in different formats? I have one date as: '2010-06-16 21:20:44.000' and the other date as now = new Date(); I want to subtract the dates to see if it is over 30 days. Thanks! This is my problem: I have a seperate page on my website with a list of upcoming events. On that page I have the date of the upcoming event and then the description. On the main page of my website, I have a small table with the next four upcoming events(with the dates of course). So far I have been manually changing the four closest upcoming events on the main page. (just copy and paste from the upcoming events page) My question: Can javascript "grab" from the upcoming events page the next four events, and have them automatically pasted into the table on my main page? And if it is possible, what code(s) do I need? This way I don't have to do it manually and will save me lots of time. P.S. I have a weak understanding of javascript, but throw any code at me and I will try to understand it. Thank you Hello, I'd like to be able to calculate the difference between 2 dates in the format dd/mm/yyyy var date1 = 06/01/2012 var date2 = 10/01/2012 Then an alert box would tell me there is a difference of 4 days. Thanks a bunch Jay. Calculating the difference between two dates in JavaScript is relatively straightforward, provided you choose the right Date methods to work with. Whichever way you get there.... see this http://www.tutorials99.com/tutorials...aScript/page_1 Hi I have the following script Code: function timeDifference(laterdate,earlierdate) {
var difference = laterdate.getTime() - earlierdate.getTime();
var daysDifference = Math.floor(difference/1000/60/60/24);
difference -= daysDifference*1000*60*60*24
document.write('difference = ' + daysDifference + ' day/s ');
}
var laterdate = ? ;
var earlierdate = ? ;
timeDifference(laterdate,earlierdate);
//--></script>
and would like to insert my datein and dateout values where the ? marks are above in red. I can call these variables into the form on the page using <%=Request("datein")%> but how do I call a variable into the script above ? Thanks 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? Hi Guys I have created a flight/hotel itinerary and I need to work out the duration of the customers' holiday in order to work out how much it will cost to charge that person per night at their selected hotel. The problem I have is that the dates are going to vary due to user inputs in which I have used jquery 's " datepicker " Cheers George I really don't understand JavaScript... xD Code: var inputDate = "<?php echo $inputDate2; ?>";
var JDates = new Array();
Jdates = inputDate.split("/");
var currentDate = new Date(parseInt(Jdates[2]), parseInt(Jdates[0])-1, parseInt(Jdates[1]));
So... when creating 'currentDate' Jdates[0] will equal 0, even though I just asked javascript to split the inputDate by all "/". The inputDate var equals "08/06/2010" before the split. Any help greatly appreciated! I don't have any knowledge of apps but would like to get one like this and be able to change/add info to it myself, where/how can I go about doing this please?
hi all, I need one script for the change of month & year the data of the month and year is changed in iframe. like when ever we select the month and date the calender is changing like that i frame content t be change. Hi, I have a problem related to Javascript. 1) I have a php form in which there two text boxes. 2) User enter date in these text boxes via using a calender control. 3) Dates displayed in the textbox in this format i.e: 05-11-2009 I need to compare the dates of both text boxes, but my code is not working fine. I think i need to convert these the values of both text boxes to date format, but i am unable to do this. Can anyone please help in writing the new code. Thanks Hi- I am new to this so, please forgive me in advance... goldDaysArray[3] = new Date(); goldDaysArray[3].setFullYear(2010,01,01); goldDaysArray[4] = new Date(); goldDaysArray[4].setFullYear(2010,01,03); goldDaysArray[5] = new Date(); goldDaysArray[5].setFullYear(2010,01,22); goldDaysArray[6] = new Date(); goldDaysArray[6].setFullYear(2010,01,09); Can the three .setFullYear statements be combined into one, so I can reduce the number of statements? There are many more. I tried: goldDaysArray[3] = new Date(); goldDaysArray[3].setFullYear(2010,01,[01,03,22,09]); but February 1 was not recognized. Can someone please help? Thank you. |
|||||||