Refer to this image:
In my company table, I have 3 fields:
- ID (int auto_increment)
- start_date (date)
- end date (date)
Here is my code:
<html>
<head>
<script type="text/javascript">
$(function(){
$("#datepicker1").datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(selected){
$("#datepicker2").datepicker("option","minDate",selected);
}
});
$("#datepicker2").datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(selected){
$("#datepikcer1").datepicker("option","maxDate",selected);
}
});
});
</script>
</head>
<body>
<?php
//db connection
$q = "select * from company where ID = '".$_GET['ID']."'";
$r = mysqli_query($dbc, $q);
$row = mysqli_fetch_array($r, MYSQLI_ASSOC);
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<tr>
<td>Start Date : </td>
<td><input type="text" name="exhstartdate" id="datepicker1" value="<?php if($row['start_date'] == NULL) echo ''; else echo date('d-m-Y', strtotime($row['start_date'])); ?>" /></td>
</tr>
<tr>
<td>End Date : </td>
<td><input type="text" name="exhenddate" id="datepicker2" value="<?php if($row['end_date'] == NULL) echo ''; else echo date('d-m-Y', strtotime($row['end_date'])); ?>" /></td>
</tr>
</form>
</body>
</html>
My requirement is end date cannot greater than start date.
How should I disable the end date value when the end date value is greater than the start date value from the database?
<script>
$(document).ready(function(){
setEndDatePicker(); //set end date picker based on start date
});
var startDate = $("#datepicker1").val(); //get start date value and split to year, month and day
var sDate = startDate.split("-");
var day = sDate[0];
var month = parseInt(sDate[1]) - 1;
var year = sDate[2];
$("#datepicker1").datepicker({
dateFormat: 'dd-mm-yy'
});
// set again the minDate for end datepicker when start date changes
$("#datepicker1").change(function(){
startDate = $("#datepicker1").val(); //get new start date value
sDate = startDate.split("-");
day = sDate[0];
month = parseInt(sDate[1]) - 1;
year = sDate[2];
setEndDatePicker(); //reset the minDate for end datepicker
});
function setEndDatePicker(){
$("#datepicker2").datepicker({
minDate: new Date(year, month, day), //use dynamically initialized minDate
dateFormat: 'dd-mm-yy'
});
}
</script>
Related
Hello I have a datepicker calendar and what I want is that we I select the two dates then I want to click on a button it displays me all the data which are between those dates.
Here is my code...
<?php
include_once 'header.php';
$con = mysqli_connect('localhost','root','smogi','project');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$view = ($_GET['view']);
$username2 =$_SESSION['username'];
$sql="SELECT typeValue,unit,sensorValue,time FROM sensors WHERE username='$view' AND time BETWEEN $firstdate AND $lastdate ORDER BY time DESC";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr> <b>Type: </b>";
echo stripslashes($row['typeValue']) . "<br/><b>Unit: </b>";
echo stripslashes($row['unit']) . "<br/><b>Value: </b>";
echo stripslashes($row['sensorValue']) . "<br/><b>Date & Time: </b>";
echo stripslashes($row['time']) . "<br/>";
echo "--------------------------------------------------------------------------------------------------------------";
echo "<br/></tr>";
}
echo "</table>";
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var firstdate = $('#firstdatepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
//$( "#firstdatepicker" ).datepicker();
});
</script>
<script>
$(function() {
var lastdate = $('#lastdatepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
//$( "#lastdatepicker" ).datepicker();
});
</script>
</head>
<body>
<form method="post" action="graph.php">
<p>First Date: <input type="text" id="firstdatepicker"></p>
<p>Last Date: <input type="text" id="lastdatepicker"></p>
<input type="submit" value="Get Data" name="data"/>
</form>
</body>
</html>
But it doesn't work as I want. Can you help me please to make it work ???
Thank you for your time .
PS: in the image below we can see how my database table look like
Firstly, you never define $firstdate $lastdate. You should like this:
$firstdate = $_POST['firstdatepicker'];
$lastdate = $_POST['lastdatepicker'];
If it's as you have it in your "time" column, they need to be quoted.
BETWEEN '$firstdate' AND '$lastdate'
using error checking on your query would have thrown a syntax error
http://php.net/manual/en/mysqli.error.php
I.e.: $result = mysqli_query($con,$sql) or die(mysqli_error($con));
MySQL reads datetime as YYYY-mm-dd
https://dev.mysql.com/doc/refman/5.0/en/datetime.html
You're using dateFormat: 'yy-mm-dd'
Plus, give your inputs name attributes:
<input type="text" id = "firstdatepicker" name = "firstdatepicker">
<input type="text" id = "lastdatepicker" name = "lastdatepicker">
and adding
$firstdate = $_POST['firstdatepicker'];
$lastdate = $_POST['lastdatepicker'];
as stated above.
you forgot to add the name="firstdatepicker" and name="lastdatepicker" in your form and you need to fill your variables from $_POST superglobal array (and I desperately hope you don't use register_globals=on).
Updated HTML part:
<script type="text/javascript">
$(function() {
$('#firstdatepicker, #lastdatepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<form method="post" action="graph.php">
<p>First Date: <input type="text" name="firstdatepicker" id="firstdatepicker"></p>
<p>Last Date: <input type="text" name="lastdatepicker" id="lastdatepicker"></p>
<input type="submit" value="Get Data" name="data"/>
</form>
On the PHP side:
if (isset($_POST['firstdatepicker'])) {
$firstDate= $_POST['firstdatepicker'];
$lastDate= $_POST['lastdatepicker'];
// forgot the single quotes around the dates ...
$sql="SELECT typeValue,unit,sensorValue,time FROM sensors WHERE username='$username2' AND time BETWEEN '$firstdate' AND '$lastdate' ORDER BY time DESC";
}
I'm using datepicker with the following script:
<?php print "$test_date" ?> --> returns 2014,10,25
<script>
$(function() {
$("#mydate").datepicker({
onSelect: function(dateText, inst) {
var dateAsString = dateText;
var date = $('#mydate').val();
var datex = date.replace(/[/]/g,"-"); // 01-01-2013 01:21
$('#mydatex').val(datex);
}
})
.datepicker("setDate",new Date());
//.datepicker("setDate","<?php echo $test_date; ?>"; --> this doen't work
// returns blank date
});
</script>
the default date is set to the current date. Is there a way to dynamically set the default date with a variable passed into my form from php? i.e When I render the form I pass into it $test_date which = "2014,12,25"
and here's the top of the form:
<form name="myForm" action="createevent.php" onsubmit="return validateForm()" method="get">
<h1 style="color:blue;">Skipper Input Page</h1>
<div class="skipperinput"">
<input type="text" id="mydate" name="mydate" value= ""/><br>
<label>Date</label>
<input type="hidden" id="mydatex" name="mydatex"/>
.datepicker("setDate", new Date("<?php echo $new_default_date; ?>"));
I have successfully integrate jQuery DatePicker on my site and wondering how can I set the following:
Don't allow selection of start date from current date plus 2 days. example if today's date is 7/20/12 then the visitor can select only date starting 7/22/12.
End date must start based on Start Date plus one. If start date is 7/23/12 then the end date should be 7/24/12.
BTW, I am making a hotel reservation calendar.
Here's my code based from sample:
<script>
$(function() {
$( "#sd" ).datepicker();
});
$(function() {
$( "#ed" ).datepicker();
});
</script>
<tr>
<td>Check In</td>
<td>:</td>
<td><input name="sd" type="text" id="sd" value="<?php echo $_SESSION['checkin'] ?>" size="10"" maxlength="8" /></td>
</tr>
<tr>
<td>Check Out</td>
<td>:</td>
<td><input name="ed" type="text" id="ed" value="<?php echo $_SESSION['checkout'] ?>" size="10" maxlength="10" /></td>
</tr>
You can do it inside your datepicker events.
$(function() {
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
// sets "theDate" 2 days ahead of today
theDate.setDate(theDate.getDate() + 2);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
$( "#ed" ).datepicker();
});
please check Jquery: DatePicker: start/end date for answer.
Long story short :
<script type="text/javascript">
$(document).ready(function () {
$('#endDate').datepicker({ showOn: 'button',
buttonImage: '../images/Calendar.png',
buttonImageOnly: true, onSelect: function () { },
onClose: function () { $(this).focus(); }
});
$('#startDate').datepicker({ showOn: 'button',
buttonImage: '../images/Calendar.png',
buttonImageOnly: true, onSelect:
function (dateText, inst) {
$('#endDate').datepicker("option", 'minDate', new Date(dateText));
}
,
onClose: function () { $(this).focus(); }
});
});
I have a mypage.php and it contains the below code
And i have added the
<link style="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet">
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/scripts/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/scripts/ui/jquery.ui.datepicker.js"></script>
<form name="test_date" method="post">
<input type="text" id="datepicker1" name="date1">
<input type="submit" name="insert" value="Insert and show">
</form>
And In jquery.ui.datepicker.js i have change the date format to dateFormat: 'dd/mm/yy' from dateFormat: 'mm/dd/yy'
and below is the jquery for selecting the date when click on textbox
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
And when i click on submit button i have inserted into mysql database database
<?php
if($_POST['insert']) {
echo "Date : ";
$d = $_POST['date1'];
require('con_open.php');
$t = date('Y-m-j H:i:s', strtotime($d));
mysql_query("insert into date_table (date_field1) values ('$t')");
echo "Converted to Date at Runtime :" . $t;
echo "<br>";
$query = mysql_query("select date_field1 from date_table");
while($r = mysql_fetch_row($query))
{
got_date_db = $r[0];
}
echo "Displaying date from Database : " . got_date_db;
require('con_close.php');
}
?>
Output :
Converted to Date at Runtime : 2011-12-28 14:32:16
Displaying date from Database : 0000-00-00 00:00:00
date_field1 (DATETIME) fromat on mysql
Even i have tried out checking with dateformat of mysql and php date function manuals online and over stackoverflow... but i could not get any solution to this one.
Try:
mysql_query("
insert into date_table (date_field1)
values (FROM_UNIXTIME(". (int)strtotime($_POST['date1']) ."))
");
I think its generally a good idea to pass a date as a timestamp to the database. Then you don't have to worry about formatting it the right way.
I have a page in which there are multiple input fields that is fromdate and todate. I have created dynamic ids and name. I have used jquery date picker.
Code:
<?php
$i=1;
foreach($locations as $location)
{
?>
<tr>
<td><?php echo $location['name'];?></td>
<td>
<input type="text" name="txtFromDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtFromDate_<?php echo $i;?>"/>
</td>
<td>
<input type="text" name="txtToDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtToDate_<?php echo $i;?>"/>
</td>
<td>
<input type="text" name="txtFromTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;" />
</td>
<td>
<input type="text" name="txtToTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;"/>
</td>
</tr>
<?php
$i++;
}
?>
Jquery code For Date Picker:
(document).ready(function(){
var count=0;
count=<?php echo count($locations);?>;
for(i=1;i<=count;i++)
{
var dates = $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({
defaultDate: new Date(),
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onSelect: function(selectedDate) {
var option = this.id == "txtFromDate_"+i ? "maxDate" : "minDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
}
Jquery Date Picker is displayed for fromdate and to date fields. In the above code i have applied the from date to date validation i.e. to date should be greater than from date.
The problem with above code is that this validation is applied on the last row only.
I want that this validation should be applied to all the rows.
You redeclare the dates variable at every iteration of the loop. So when the loop is done, the dates variable that you're using in the onSelect handler is equal to last item that was set in the loop.
Update Try this code:
Update2 One more thing is the issue of variable i. Its current value is available while in the loop, so later on, when the onSelect handler is used, the i has a value as in last iteration. To overcome this, you have to put i in a context of another function, that's why I have wrapped code in the body of the loop in another function to which I'm passing i variable.
Update3 And one more thing - the logic for picking the option (minDate or maxDate) had to be reversed.
$(document).ready(function(){
var count=0;
count=<?php echo count($locations);?>;
for(i=1;i<=count;i++)
{
(function(i) {
$('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({
defaultDate: new Date(),
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onSelect: function(selectedDate) {
var option, otherPicker;
if (this.id == "txtFromDate_"+i) {
otherPicker = $("#txtToDate_"+i);
option = "minDate";
} else {
otherPicker = $("#txtFromDate_"+i);
option = "maxDate";
}
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
otherPicker.datepicker("option", option, date);
}
};
})(i);
}
});