JavaScript - Disabling Days From Datepicker Via Mysql

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

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!

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 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 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">&nbsp;</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 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

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();">&lt;&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</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();">&gt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</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));
	}
}

So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie.

Code:

var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
    return document.getElementById(id);
}


var temperature = function (){//This function converts the value the user provides


if($("to_celcius").checked == true)//if checked, then do this conversion
	{
		$("degrees_celcius").disabled = true;
		var far = parseFloat($("degrees_fahrenheit").value );
		
		if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		
		var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
		
		$("degrees_celcius").value = far_cel;
		
		
		}else  ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
		{
		$("degrees_fahrenheit").disabled = true;
		var cell = parseFloat($("degrees_celcius").value);
		
		if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		var cel_far = Math.round(cell * 9/5 + 32);
		
		$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
		
	}
}

function reset()//resets the text box fields
{
	$("foofoo").reset();
	
}

	
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;

}

Code:

<body>
<form id="foofoo" name="foofoo">
  <div id="content">
    <h1>Convert temperature</h1>
	
       
    <input type="radio"   name="conversion_type" id="to_celcius"  />From Fahrenheit to Celcius<br />
    <input type="radio"   name="conversion_type" id="to_fahrenheit"  />From Celcius to Fahrenheit<br />
	
	
	
	
    <br />
     
    <label>Degrees Fahrenheit:</label>
    <input type="text" id="degrees_fahrenheit" name="cat"  class="disabled"  /><br />
    <label>Degrees Celcius:</label>
    <input type="text" id="degrees_celcius" name="poo"   class="disabled" /><br />
    <br />

    <input type="button" id="convert" value="Convert" /><br />
    <br />        
  </div>
   </form>  
</body>

irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on.

There are 3 different classes per hour.

i thought doing this using javascript, but i'm absolutely lost.

Can you please give me a hint on how to do this?

Thanks!!

this is the part of the form that has the checkboxes.

<form method="post" action="process.php"></form>
<input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br>
<input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br>
<input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br>
<input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br>
<input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br>
<input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br>
<input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br>
<input type="checkbox" value="122" name="convention8"> 12 am: Open table<br>
<input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br>
<input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br>
<input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br>
<input type="checkbox" value="141" name="convention12"> 2 pm<br>
<input type="checkbox" value="142" name="convention13"> 2 pm<br>
<input type="checkbox" value="143" name="convention14"> 2 pm<br>
<input type="checkbox" value="151" name="convention15"> 3 pm<br>
<input type="checkbox" value="152" name="convention16"> 3 pm<br>
<input type="checkbox" value="153" name="convention17"> 3 pm<br>
<input type="submit"></input>
</form>

Ok I just gota ask... I read this originally and nearly killed my self laughing... then my brain got the best of me and my curiosity took over...

is it possible to write a javascript code that makes your web browser disable javascript?

is it even possible for Javascript to access a web browser in that sort of fashion? Like can a script have that much control? ... or rather lack of control and self suicidal... but anyways

Is it possible?

I need to disable some keys from their default behaviour in Google Chrome on Windows with javascript.
The script below works for most keys but not for F10, left Windows key, right Windows key, NumLock and left Alt. (which are the keys I need to disable)

Code:

<script type="text/javascript">
addEventListener("keydown", function (event) {
if(KeyID == 121 KeyID == 91 || KeyID == 92 || KeyID == 144|| KeyID == 18 ){
    event.preventDefault();
}
}, true);
</script>

I have also without luck tried event.stopPropagation () - event.cancelBubble = true - return false og void().

I would like to know if their is a solution or it simply isn't possible to disable the mentioned keys.

What have I done wrong here?


<INPUT id="purchase" onclick="document.getElementById("purchase").disabled = true;" type="submit" value="PURCHASE">

Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31.

For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked.

As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again.

Here is my code:
Code:

var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010'];
 
	function nationalDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

	//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
				
	for (i = 0; i < disabledDays.length; i++) {
		if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
			//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
			return [false];
		}
	}
		//console.log('good:  ' + (m+1) + '-' + d + '-' + y);
		return [true];
	}
		
	function noWeekendsOrHolidays(date) {
		return nationalDays(date);
	}
 
	function ArrayIndexOf(array,item,from){
	var len = array.length;

	for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
		if (array[i] === item) return i;
	}
		return -1;
	}
			
	function ArrayContains(array,item,from){
		return ArrayIndexOf(array,item,from) != -1;
	}

Any help would be great!

David