0

So basically, as soon as my page loads I need to have a pre-loaded date to my drop-down boxes and in my textfields that came from my database as you will see if you go over my code. My drop-down boxes are auto-filled with the months-days-years because of my javascript. As I load the page, it gets my chosen date but it also adds an additional month, day and year at the top most part f the selection. Can anyone tell me what's wrong?

<html>
<meta content= "text/html; charset= utf-8" http-equiv="Content-Type"/>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<link rel="stylesheet" href="jquery.datepick.css" type="text/css" />
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="fbDateTime.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {

// Prevent selection of invalid dates through the select controls
function checkLinkedDays() {
 var daysInMonth = $.datepick.daysInMonth(
$('#selectedYear').val(), $('#selectedMonth').val());
 $('#selectedDay option:gt(27)').attr('disabled', '');
 $('#selectedDay option:gt(' + (daysInMonth - 1) +')').attr('disabled', 'disabled');
if ($('#selectedDay').val() > daysInMonth) {
 $('#selectedDay').val(daysInMonth);
}
} 

function updateSelected(dates) { 
    $('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
    $('#selectedDay').val(dates.length ? dates[0].getDate() : '');
    $('#selectedYear').val(dates.length ? dates[0].getFullYear() : '');
	checkLinkedDays();
}
 
$('#selectedPicker').datepick({
    yearRange: '1980:2010',
    alignment: 'bottomRight', onSelect: updateSelected, altField: '#setDate', 
    showTrigger: '#calImg'});

// Update datepicker from three select controls
$('#selectedMonth,#selectedDay,#selectedYear').change(function() {
    $('#selectedPicker').datepick('setDate', new Date(
        $('#selectedYear').val(), $('#selectedMonth').val() - 1,
        $('#selectedDay').val()));
});

$('#selectedDay,#selectedMonth,#selectedYear').change(function() { 
        var date = $.datepick.day( 
            $.datepick.month( 
                $.datepick.year( 
                    $.datepick.today(), $('#selectedYear').val()), 
                $('#selectedMonth').val()), 
            $('#selectedDay').val()); 
        $('#setDate').val($.datepick.formatDate(date)); 
    }); 
   // change();

 $().fbDateTime({
		 date:'#selectedDay',
		 month:'#selectedMonth',
		 year:'#selectedYear',
		 yearStart:1980
});
});
</script>
</head>

<body>
<?php
$username="root";
$password="";
$database="getdates";

mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die("Unable to select database");

$query = "SELECT aadate FROM `date` WHERE id = '1'"; 
$result = mysql_query($query) or die(mysql_error());
$row = mysql_fetch_array($result);
$temp_mydate = explode("-",$row['aadate']);

$year = $temp_mydate["0"];
$month = $temp_mydate["1"];
$day = $temp_mydate["2"];


if($temp_mydate[1]==01)
{
$month="january";
}
if($temp_mydate[1]==02)
{
$month="february";
}
if($temp_mydate[1]==03)
{
$month="march";
}
if($temp_mydate[1]==04)
{
$month="april";
}
if($temp_mydate[1]==05)
{
$month="may";
}
if($temp_mydate[1]==06)
{
$month="june";
}
if($temp_mydate[1]==07)
{
$month="july";
}
if($temp_mydate[1]==08)
{
$month="august";
}
if($temp_mydate[1]==09)
{
$month="september";
}
if($temp_mydate[1]==10)
{
$month="october";
}
if($temp_mydate[1]==11)
{
$month="november";
}
if($temp_mydate[1]==12)
{
$month="december";
}
?>
<form id = "list" action="" method="post">
    <select id = 'selectedMonth' name = 'selectedMonth' onchange="showSelected();" >
	 <option><?php echo $month ?></option>
    </select>
    <select id = 'selectedDay' name = 'selectedDay' >
	 <option><?php echo $day ?></option>
    </select>
    <select id = 'selectedYear' name = 'selectedYear' >
	 <option><?php echo $year ?></option>
    </select>
     <input size="10" id = "selectedPicker" value="<?php echo $row['aadate']; ?>" type="text" />
    <div style="display:none"><img src="makemycalendar.png" width="16" height="15" alt="Popup" id = "calImg"/></div>
	<input  type="text" size="10" id = "setDate" readonly="" value="<?php echo $row['aadate']; ?>"/>
</form>
</body>
</html>
/*
*=============================================================
*	fbDate is datetime picker jquery plugin
*	..........................................................
*	License : http://creativecommons.org/licenses/by/3.0/
*	Website : http://www.eantz.co.cc/
*	Author	: Destiya Dian Kusuma Wijayanto
*
*
*=============================================================
*
*/

jQuery.fn.fbDateTime = function(option) {
	var dates = new Date();
	var defaults = jQuery.extend({
		date : '#date',
		month : '#month',
		year : '#year',
		hour : '#hour',
		minute : '#minute',
		second : '#second',
		yearStart : 1980,
		yearEnd : dates.getFullYear()
	}, option);
	
	var d = defaults.date;
	var m = defaults.month;
	var y = defaults.year;
	var h = defaults.hour;
	var mi = defaults.minute;
	var s = defaults.second;
	
	d = $.find(d);
	m = $.find(m);
	y = $.find(y);
	h = $.find(h);
	mi = $.find(mi);
	s = $.find(s);
	
	var moName = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
	
	
	
	var setEnvironment = function() {
		for(t=1;t<=31;t++) {
			$(d).append('<option value="' + t + '">' + t + '</option>');
		};
		
		for(t=0;t<=11;t++) {
			var mo = t+1;
			$(m).append('<option value="' + mo + '">' + moName[t] + '</option>');	
		}
		
		for(t=defaults.yearStart;t<=defaults.yearEnd;t++) {
			$(y).append('<option value="' + t + '">' + t + '</option>');	
		}
		
		for(t=1;t<=24;t++) {
			$(h).append('<option value="' + t + '">' + t + '</option>');	
		}
		
		for(t=0;t<=59;t++) {
			if(t == 0) {
				$(mi).append('<option value="' + t + '">00</option>');	
				$(s).append('<option value="' + t + '">00</option>');	
			} else {
				$(mi).append('<option value="' + t + '">' + t + '</option>');
				$(s).append('<option value="' + t + '">' + t + '</option>');
			}
		}
		
	};
	
	$(m).bind('change', function() {
		var c = $.getFbDate($(this).val(), $(y).val());
		var date = parseInt($(d).val());
		
		$.setFbDate(c, d);
		
		if(date < c) {
			$(d).val(date);
		} else {
			$(d).val(0);
		};
	});
	
	$(y).change(function() {
		var c = $.getFbDate($(m).val(), $(this).val());
		var date = parseInt($(d).val());
		
		$.setFbDate(c, d);
		
		if(date < c) {
			$(d).val(date);
		} else {
			$(d).val(0);
		};			 
	});
	
	$.setFbDate = function(c, obj) {
		$(obj).html('');
		for(t=1;t<=c;t++) {
			$(obj).append('<option value="' + t + '">' + t + '</option>');
		};
	};
	
	$.getFbDate = function(month, year) {
		var c = 0;
		month = parseFloat(month);
		year = parseFloat(year);
		switch(month) {
			case 1:
				c = 31;
				break;
			case 2:
				if((year % 4) == 0) {
					if((year%100) != 0) {
						c = 29;
					} else {
						if((year%400) == 0) {
							c = 29;
						} else {
							c = 28;
						}
					}
				} else {
					c = 28;
				};
				break;
			case 3:
				c = 31;
				break;
			case 4:
				c = 30;
				break;
			case 5:
				c = 31;
				break;
			case 6:
				c = 30;
				break;
			case 7:
				c = 31;
				break;
			case 8:
				c = 31;
				break;
			case 9:
				c = 30;
				break;
			case 10:
				c = 31;
				break;
			case 11:
				c = 30;
				break;
			case 12:
				c = 31;
				break;
			default :
				c= 31;
		};
		
		return c;	
	};
	
	setEnvironment();
	
	return $(this);
};
2
Contributors
9
Replies
10
Views
7 Years
Discussion Span
Last Post by vibhaJ
0

In below code i have just make drop down selected as 'July'.
You can set accordingly.
Let me know for further help.

<html>
<meta content= "text/html; charset= utf-8" http-equiv="Content-Type"/>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<link rel="stylesheet" href="jquery.datepick.css" type="text/css" />
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="fbDateTime.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {

// Prevent selection of invalid dates through the select controls
function checkLinkedDays() {
 var daysInMonth = $.datepick.daysInMonth(
$('#selectedYear').val(), $('#selectedMonth').val());
 $('#selectedDay option:gt(27)').attr('disabled', '');
 $('#selectedDay option:gt(' + (daysInMonth - 1) +')').attr('disabled', 'disabled');
if ($('#selectedDay').val() > daysInMonth) {
 $('#selectedDay').val(daysInMonth);
}
} 

function updateSelected(dates) { 
    $('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
    $('#selectedDay').val(dates.length ? dates[0].getDate() : '');
    $('#selectedYear').val(dates.length ? dates[0].getFullYear() : '');
	checkLinkedDays();
}
 
$('#selectedPicker').datepick({
    yearRange: '1980:2010',
    alignment: 'bottomRight', onSelect: updateSelected, altField: '#setDate', 
    showTrigger: '#calImg'});

// Update datepicker from three select controls
$('#selectedMonth,#selectedDay,#selectedYear').change(function() {
    $('#selectedPicker').datepick('setDate', new Date(
        $('#selectedYear').val(), $('#selectedMonth').val() - 1,
        $('#selectedDay').val()));
});

$('#selectedDay,#selectedMonth,#selectedYear').change(function() { 
        var date = $.datepick.day( 
            $.datepick.month( 
                $.datepick.year( 
                    $.datepick.today(), $('#selectedYear').val()), 
                $('#selectedMonth').val()), 
            $('#selectedDay').val()); 
        $('#setDate').val($.datepick.formatDate(date)); 
    }); 
   // change();

 $().fbDateTime({
		 date:'#selectedDay',
		 month:'#selectedMonth',
		 year:'#selectedYear',
		 yearStart:1980
});
});
</script>
</head>

<body>
<?php 

$row['aadate'] = '2010-07-10';
$temp_mydate = explode("-",$row['aadate']);

$year = $temp_mydate["0"];
$month = round($temp_mydate["1"]);
$day = $temp_mydate["2"];

?>
<form id = "list" action="" method="post">
    <select id = 'selectedMonth' name = 'selectedMonth' onchange="showSelected();" >	
    </select>
    <select id = 'selectedDay' name = 'selectedDay' >
	 <option><?php echo $day ?></option>
    </select>
    <select id = 'selectedYear' name = 'selectedYear' >
	 <option><?php echo $year ?></option>
    </select>
     <input size="10" id = "selectedPicker" value="<?php echo $row['aadate']; ?>" type="text" />
    <div style="display:none"><img src="makemycalendar.png" width="16" height="15" alt="Popup" id = "calImg"/></div>
	<input  type="text" size="10" id = "setDate" readonly="" value="<?php echo $row['aadate']; ?>"/>
</form>
<script language="javascript">
$(document).ready(function() {
	// set drop down  selected
	document.getElementById('selectedMonth').value = <?=$month?>;
});
</script>
</body>
</html>
0

vibhadevit,

I am accessing a stored date in my database so basically what I posted at the top was working but you did manually select a date, so is there any possible to access a date that came from my database and as soon as my page loads, it will display the date from my drop-downs and to a textfield. Thank you.

0

experts anyone? for help... I'm retrieving a date from my database (I'm using MySQL)and upon the loading of my page it will already select (show) in my dropdown boxes the date that I retrieved from my database.

MySQL date being retrieved is: 2010-07-10 (for example)

As I load my page...

([July] [10] [2010]) <- these are my dropdowns [datepicker.jpg] etc etc etc...

at least can you help me debug my code so that I can get it to work the right way of retrieving and showing it. oh, btw my dropdown boxes are auto-populated by my js thanks.

0

or maybe can someone direct me to a site where there is an example of dropdown boxes that are auto-populated as to retrieving (date) it will correspond to the dropboxes as the pages loads

0

vibhadevit,

I am accessing a stored date in my database so basically what I posted at the top was working but you did manually select a date, so is there any possible to access a date that came from my database and as soon as my page loads, it will display the date from my drop-downs and to a textfield. Thank you.

If you are using jquery you have to write js code to let dropdown selected.
Its nothing wrong to write js code.
I posted is just for month remain selected.You can write it for textbox,day,year same way.

0

If you are using jquery you have to write js code to let dropdown selected.
Its nothing wrong to write js code.
I posted is just for month remain selected.You can write it for textbox,day,year same way.

I just can't seem to work things out can you at least make some changes from the one you coded coz' when I changed my work, and pasted yours it didn't work thanks for the help

0

This is complete date code.
Try with this.and let me know output.

<html>
<meta content= "text/html; charset= utf-8" http-equiv="Content-Type"/>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<link rel="stylesheet" href="jquery.datepick.css" type="text/css" />
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="fbDateTime.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {

// Prevent selection of invalid dates through the select controls
function checkLinkedDays() {
 var daysInMonth = $.datepick.daysInMonth(
$('#selectedYear').val(), $('#selectedMonth').val());
 $('#selectedDay option:gt(27)').attr('disabled', '');
 $('#selectedDay option:gt(' + (daysInMonth - 1) +')').attr('disabled', 'disabled');
if ($('#selectedDay').val() > daysInMonth) {
 $('#selectedDay').val(daysInMonth);
}
} 

function updateSelected(dates) { 
    $('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
    $('#selectedDay').val(dates.length ? dates[0].getDate() : '');
    $('#selectedYear').val(dates.length ? dates[0].getFullYear() : '');
	checkLinkedDays();
}
 
$('#selectedPicker').datepick({
    yearRange: '1980:2010',
    alignment: 'bottomRight', onSelect: updateSelected, altField: '#setDate', 
    showTrigger: '#calImg'});

// Update datepicker from three select controls
$('#selectedMonth,#selectedDay,#selectedYear').change(function() {
    $('#selectedPicker').datepick('setDate', new Date(
        $('#selectedYear').val(), $('#selectedMonth').val() - 1,
        $('#selectedDay').val()));
});

$('#selectedDay,#selectedMonth,#selectedYear').change(function() { 
        var date = $.datepick.day( 
            $.datepick.month( 
                $.datepick.year( 
                    $.datepick.today(), $('#selectedYear').val()), 
                $('#selectedMonth').val()), 
            $('#selectedDay').val()); 
        $('#setDate').val($.datepick.formatDate(date)); 
    }); 
   // change();

 $().fbDateTime({
		 date:'#selectedDay',
		 month:'#selectedMonth',
		 year:'#selectedYear',
		 yearStart:1980
});
});
</script>
</head>

<body>
<?php
$username="root";
$password="";
$database="getdates";

mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die("Unable to select database");

$query = "SELECT aadate FROM `date` WHERE id = '1'"; 
$result = mysql_query($query) or die(mysql_error());
$row = mysql_fetch_array($result);

$temp_mydate = explode("-",$row['aadate']);

$year = $temp_mydate["0"];
$month = round($temp_mydate["1"]);
$day = round($temp_mydate["2"]);

?>
<form id = "list" action="" method="post">
    <select id = 'selectedMonth' name = 'selectedMonth' onchange="showSelected();" >	
    </select>
    <select id = 'selectedDay' name = 'selectedDay' >	
    </select>
    <select id = 'selectedYear' name = 'selectedYear' >	 
    </select>
     <input size="10" id = "selectedPicker" value="<?php echo $row['aadate']; ?>" type="text" />
    <div style="display:none"><img src="makemycalendar.png" width="16" height="15" alt="Popup" id = "calImg"/></div>
	<input  type="text" size="10" id = "setDate" readonly="" value="<?php echo $row['aadate']; ?>"/>
</form>
<script language="javascript">
$(document).ready(function() {
	// set drop down  selected
	document.getElementById('selectedMonth').value = <?=$month?>;
	document.getElementById('selectedDay').value = <?=$day?>;
	document.getElementById('selectedYear').value = <?=$year?>;
});
</script>
</body>
</html>

Edited by vibhaJ: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.