parts of a date linked to select lists

Question

ekseks -2 Junior Poster in Training

14 Years Ago

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);
};

php

2 Contributors
9 Replies
230 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by vibhaJ

vibhaJ 126 Master Poster

14 Years Ago

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>

vibhaJ 126 Master Poster

14 Years Ago

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.

vibhaJ 126 Master Poster

14 Years Ago

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 14 Years Ago by vibhaJ because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ekseks -2 Junior Poster in Training · Answer 1 · 2010-08-04T12:19:42+00:00

ekseks -2 Junior Poster in Training

14 Years Ago

anyone? experts?

ekseks -2 Junior Poster in Training · Answer 2 · 2010-08-05T12:52:32+00:00

Hi vibhadevit,

Thank you for the code. I'll try it for now.

ekseks -2 Junior Poster in Training · Answer 3 · 2010-08-05T13:22:02+00:00

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.

ekseks -2 Junior Poster in Training · Answer 4 · 2010-08-06T08:58:46+00:00

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.

ekseks -2 Junior Poster in Training · Answer 5 · 2010-08-06T10:04:41+00:00

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

ekseks -2 Junior Poster in Training · Answer 6 · 2010-08-06T13:39:01+00:00

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