How do I get the date from a jquery UI datepicker like the month and save the value of it in a variable in php?
I've seen a lot of things like this <div id="calendar"></div> and I don't understand.
Thanks.
Here's my code
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
var day1 = $(this).datepicker('getDate').getDate();
var month1 = $(this).datepicker('getDate').getMonth();
var year1 = $(this).datepicker('getDate').getYear();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
var day2 = $(this).datepicker('getDate').getDate();
var month2 = $(this).datepicker('getDate').getMonth();
var year2 = $(this).datepicker('getDate').getYear();
}
});
});
</script>
</head>
<body>
<label for="from"> FROM </label>
<input type="text" id="from" name="from">
<label for="to"> TO </label>
<input type="text" name="username" id="to" name="to">
<input type="submit" name="boton" value=" Submit ">
</body>
</html>
HTML
<input type="text" name="datepicker" value="26-10-15" />
PHP
if it has isset submit denotes that the submit the form
<?php if($_REQUEST['datepicker'])){
echo $_POST['datepicker'];
} ?>
You have to apply datepicker to input field like
<input type="text" value="<?php echo date("Y-m-d"); ?>" name="selectedDate"/>
Than in PHP just check value from $_GET or $_POST:
$selectedDate = isset($_REQUEST['selectedDate']) ? $_REQUEST['selectedDate'] : null;
You have HTML:
<input type="text" name="username" id="to" name="to">
For that you call datepicker:
$( "#to" ).datepicker({/* ... */});
Now all you need to do is:
Wrap your input fields with <form action="mySubmitScript.php" method="post"></form> add additionally <input type="submit" value="submit">
In PHP you do:
if (isset($_POST['to'])) {
$to = $_POST['to'];
}
You can submit form without reloading page using $.ajax() jQuery method.
Related
I am using jQueryUI datepicker and here is the code.
<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() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<form action="{LINKTO_EXPORT}" method="post">
<h1>{EXPORT_CSV}</h1>
<label for="from">from</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<input type="submit" value="{EXPORT_TEXT}">
</form>
When I "post" the "from" and "to",
$fromstr = $_POST["from"];
$tostr = $_POST["to"];
$from = date('Y-m-d H:i:s',strtotime($fromstr." 02:00:00"));
$to = date('Y-m-d H:i:s',strtotime($tostr." 02:00:00"));
the to has been converted properly, i.e., 2015-06-13 02:00:00 but the from has not. It returned 6/1/2015 2:00 instead. To make sure I am fetching the correct values, I echoed the $fromstr and $tostr.
$fromstr returned 6/1/2015
$tostr returned 06/13/2015
Why was the from returned m/d/yyyy while to did mm/dd/yyyy? How do I convert a m/d/yyyy string to timestamp then? Please help, thank you!
Try this..
Download following js
<link rel="stylesheet" type="text/css" href="http://xdsoft.net/scripts/jquery.datetimepicker.css"/>
<script src="http://xdsoft.net/scripts/jquery.datetimepicker.js"></script>
You cant use directly ,so download js and css.
<script>
$(function() {
$('#datetimepicker8').datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date')
.toggleClass('xdsoft_disabled');
},
minDate:'-1970/01/2',
maxDate:'+1970/01/2',
timepicker:false
});
$('#datetimepicker9').datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date')
.toggleClass('xdsoft_disabled');
},
minDate:'-1970/01/2',
maxDate:'+1970/01/2',
timepicker:false
});
});
</script>
<input type="text" id="datetimepicker8"/>
<input type="text" id="datetimepicker9"/>
Below is the code for a dropdown list. The second dropdown results populate based on the first dropdown selection. Everything is working fine using this code.
But the issue is that it shows hospital_id on the second dropdown as text and also as value. I want to keep the value as hospital_id, but how to change the text to hospital_name (this is another column in table mfb_hospital).
My Code:
<?php
$db = new mysqli('localhost','root','redhat','echodeve_mfb_temp');//set your database handler
$query = "SELECT bp_id,bp_name FROM mfb_billing";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$categories[] = array("bp_id" => $row['bp_id'], "val" => $row['bp_name']);
}
$query = "SELECT bp_id, hospital_id, hospital_name FROM mfb_hospital";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$subcats[$row['bp_id']][] = array("bp_id" => $row['bp_id'], "val" => $row['hospital_id']);
}
$jsonCats = json_encode($categories);
$jsonSubCats = json_encode($subcats);
?>
<!docytpe html>
<html>
<head>
<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 type='text/javascript'>
<?php
echo "var categories = $jsonCats; \n";
echo "var subcats = $jsonSubCats; \n";
?>
function loadCategories(){
var select = document.getElementById("categoriesSelect");
select.onchange = updateSubCats;
for(var i = 1; i < categories.length; i++){
select.options[i] = new Option(categories[i].val,categories[i].bp_id);
}
}
function updateSubCats(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("subcatsSelect");
subcatSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < subcats[catid].length; i++){
subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].hosp);
}
}
</script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body onload='loadCategories()'>
<form id="reportvalue" action="backend.php" method="post">
<select id='categoriesSelect'>
<option value="1">Select Billing Provider</option>
</select>
<select name='hospitalname[]' id='subcatsSelect' multiple='multiple'>
<option value="all">Select Billing Provider</option>
</select>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<?php
//$a = $_REQUEST['hospitalname[]'];
//echo $a;
?>
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>
I'm suggesting id you use .append function a simple example is coded below:
$.each(json, function(){
$('#subcatsSelect').append("<option value='"+json.id+"'>"+json.name+"</option>");
});
note that :
$.each(json, function()
is just a sample for your action to populate the second select options.
When i submitted form than if error occurred than value is not set in datepicker which is selected before. Datepicker field empty . how this possible ??
<html>
<head>
<script type="text/javascript" >.
$(function() {
$( "#dob" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
$( "#dob" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
});
</script>
</head>
<body>
<form>
<input type="text" name="dob" id="dob" value="<?php if(isset($_SESSION['dob'])) echo $_SESSION['dob']; ?>" placeholder="Please enter date of birth" required/>
</form>
<body>
</html>
There can be many reasons for this issue.
Either the dob variable is null/empty/undefined.
The dob value is not in the correct format.
You have not used defaultDate in the datepicker.
For 1st part, you can only log and debug what is wrong.
For 2nd part, you can format the value in correct format. Search on SO for formatting a string to Date.
For the 3rd part:
$(function () {
$("#dob").datepicker({
defaultDate: $(this).val(), //Add this
dateFormat: 'dd-mm-yy', // And this too
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
});
I don't see the echo results in the HTML part of this code where I try to echo $_POST variables. I fill out my form. Click submit but nothing appears under the form, but it should show two strings.
It's a one page form that will extract XML data from a URL that I build in this code based on values provided in the form fields.
<!DOCTYPE html>
<?php
if(isset($_GET['company']) and isset($_GET['from']) and isset($_GET['to']) and isset($_GET['submit'])){
$parameters = array(
'company' => $_GET['company'],
'from' => $_GET['from'],
'to' => $_GET['to']
);
// create condition
$condition = "date_entered > '" . $parameters['from'] . "' && date_entered < '" . $parameters['to'] . "' && company_name = '" . $parameters['company'] . "'";
$url = "www.abc.com/c=" . $condition;
echo '<p>'.$condition.'</p>';
echo '<p>'.$url.'</p>';
$_GET['condition'] = $condition;
$_GET['url'] = $url;
}
?>
<html>
<head>
<title>Reports v. 0.0.0.1</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<form autocomplete="on" method="GET">
Company: <input id="company" name="company" type="text" value="" /><br />
<fieldset width="0px">
<legend>Date Range</legend>
<label for="from">From</label>
<input type="text" id="from" name="from"><br />
<label for="to">To</label>
<input type="text" id="to" name="to"><br />
</fieldset>
<input type="submit" />
</form>
<?php
if(isset($_GET['condition']) and isset($_GET['url'])){
echo $_GET['condition'];
echo '<br />';
echo $_GET['url'];
}
?>
</body>
</html>
Dump the global $_GET, compare it to what you are checking. That should help.
I have a jquery ui datepicker and the picked date is passing to a php page using post method. The full code of my php file is given below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Datepicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#startDate" ).datepicker({
defaultDate: (new Date(2013, 1 - 1, 26)),
changeMonth: true,
<!-- numberOfMonths: 1, -->
onClose: function( selectedDate ) {
$( "#endDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#endDate" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
<!-- numberOfMonths: 1, -->
onClose: function( selectedDate ) {
$( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<form action="date.php" method="post">
<label for="startDate">startDate</label>
<input type="text" id="startDate" name="startDate" />
<label for="endDate">endDate</label>
<input type="text" id="endDate" name="endDate" />
<input type="submit" name="submit" value="Submit" />
</form>
<?php
$startdate = isset($_POST['startDate']) ? $_POST['startDate'] : '';
echo $startdate;
?>
</body>
</html>
In the above code, the value of the picked date is passed to php only after submitting the form using submit button. How can I pass the value on select of the date picker using ajax? So that, the php echo function will display date dynamically on selecting the datepicker.