This question already has answers here:
Set initial value in datepicker with jquery?
(7 answers)
Closed 2 years ago.
I am using jquery-ui.js and its datepicker component, as follows
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
However, instead of today date, I want to set an initial value for the datepicker. (I plan to retrieve a date from a mysql db thru php). How can I do it ?
The simplest way is (to put a php date value $initialdate as your initial date value in datepicker):
Amending you codes from
$( function() {
$( "#datepicker" ).datepicker();
} );
to
$( function() {
$( "#datepicker" ).datepicker();
} );
$( "#datepicker" ).datepicker( "setDate", '<?php echo $initialdate; ?>');
Make sure that the format of your datepicker is the same as that of your DB.
For example, if you db's date is YYYY-MM-DD, then I suggest you to use the following (before the setdate line) as well (otherwise the initial date cannot be correctly set):
$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
Related
I'm trying to do something that seems like it should be simple, but somehow won't tie up properly.
The user selects a date from a jquery datepicker, where I have showWeek enabled.
$(".datepicker").datepicker({
showWeek: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
But, when the resulting date string is fed into a php datetime, the week does not correspond, and is 1 week further into the future.
$start_date = isset($_POST['startdate']) ? $_POST['startdate'] : "";
$start = new DateTime($start_date);
echo $start->format("W");
IE, 2018-10-02 shows as week 39 in my datepicker, but the echo above from reading that date back into a datetime and formatting for week returns week 40.
So, as far as I can tell, the jquery datepicker and php datetime class do not agree on which weeks are which by default.
Is there a way to reconcile this?
The PHP date says it conforms to ISO-8601, Checking online confirms for me that php has it right, so how do I fix the datepicker to display correctly?
Ok here is the solution: according to jquery ui you need to specify the first day and in your code you are missing it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Show week of the year</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
Just add firstDay: 1, and everything works as you expect.
I have a html file below, that I want to enter a date (eg. 25-07-1979). The input is readonly. I am wondering if I can include some javascript in the phpunit file that will make the field writable so I can enter a date.
Any help would be appreciated
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/datepicker/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" readonly="readonly"></p>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I need some help with this datepickerthat i'll be using in my school project.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" name='cout' id="datepicker"></p>
</body>
</html>
I want to create another datepicker since my project is a hotel reservation. Check in and Check out dates. But in check out this happens.
You could use a class instead of an id to define the date inputs :
i.e. :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" name='cout' class="datepicker" id="start_date"></p>
<p>Date: <input type="text" name='cout' class="datepicker" id="end_date"></p>
</body>
</html>
Hope it helps.
Try this :
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
<script>
$( function() {
$( "#datepicker1,#datepicker2" ).datepicker();
} );
</script>
I agree with Adrien Leber that a class could be easier once you have multiple datepickers. I think you need to use .each() though.
$(function() {
$(".datepicker").each(function(i, val) {
$(this).datepicker();
});
});
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.
I have this code for one slider and the structure appears correctly but when i move the slide , don't show the value of the answer inside of the input box "amount", appears "undifined" and i don't know why because when you inspect you can see that the div slider have a value in the tag name . I tryed with the html tag "value" too and didn't works too. What can i do ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> Questionnaire </title>
<meta name="Description" content="Questionnaire on business model" />
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="jquery-ui-1.9.2.js"></script>
<script src="factaris.js"></script>
<link rel="stylesheet" href="STYLE.css" type="text/css" media="screen" />
<script>
jQuery(document).ready(function(){
///SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!!
$( "#slider" ).slider({
slide: function( event, ui ) {
//$( "#amount" ).val( "$" + ui.value ); // show range 0-100 without ini values !!!!!
// $( "#amount" ).val( "$" + this.value ); //show undefined
// $( "#amount" ).val( "$" + 8); // show 8 all time
$( "#amount" ).val( "$" + ui.name );
}
});
});
</script>
</head>
<body>
<div id="sizer">
<form id= "formID" name="formID" class="formular" method="post" action= "<?= $url = "QUESTIONAREFINISHING.php"; ?>" accept-charset="utf-8">
<div id="questionare" >
<!--SLIDER-->
<?php if($row_questionset['Constructor']=="Slider"){?>
<div>
<label class="desc" value= "<?php $row_questionset['QuestionIDFKPK'];?>">
<?php echo $row_questionset['QuestionValue']; ?>
</label>
</div>
<?php while ($row_Answer=mysql_fetch_array($AnswersValue)){ ?>
<p>
<label for="amount"><?php echo $row_questionset['QuestionValue']; ?></label>
<input type="text" id="amount" name="amount" />
</p>
<div id="slider" name="<?php echo $row_Answer['AnswerValue']; ?>" ></div>
<?php } // End while loop ?>
<?php } //End slider row ?>
<!--/SLIDER-->
</div>
</form>
</div>
</body>
</html>
To read the value of a jQuery UI Slider, you need to call the slider method on the element in question with the 'value' as the parameter, like so:
$( "#slider" ).slider( "value" );
with the value slider argument, if you want read the value on change the slider or/and on slide use the event methods of the slider:
function outputValue(sliderDom) {
alert($(sliderDom).slider('value'));
};
$( "#slider" ).slider({
//... your init
slide: function(){
outputValue(this);
},
change: function(){
outputValue(this);
}
});
edit
to fix you value problem try this
$('#slider').slider({
//..
min: 0,
max: 100000 //or more
});
If you'd like mto set an initial value, you need to set it when you call the slider method (with JS - not HTML).
$("#slider).slider({
max: slideMax,
min: slideMin,
value: slideInit,
// To set the value to the `#amount` element, use the following `slide` event
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});