This question already has answers here:
Initialize JQuery Datepicker with a blank value
(2 answers)
Closed 7 years ago.
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'
});
});
$(document).ready(function(){
$('#reset').click(function(){
$('#datepicker2').datepicker("option", "minDate", null);
});
});
</script>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table>
<tr>
<td>Start Date : </td>
<td><input type="text" name="startdate" id="datepicker1" /></td>
</tr>
<tr>
<td>End Date : </td>
<td><input type="text" name="enddate" id="datepicker2" /></td>
</tr>
<tr>
<td>
<input type="submit" id="submit" name="submit" value="Add" />
<input type="reset" id="reset" name="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
From above code, refer to below image:
First, I am going to choose start date is 7 Dec 2015 and end date is 8 Dec 2015, after that I choose the start date is 9 Dec 2015. I want the end date value is blank when I choose the start date is 9 Dec 2015. Is it possible to do it in Jquery? Can someone help me?
Change you script to this:
$(document).ready(function(){
$("#datepicker1").datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(selected){
$("#datepicker2").datepicker("option", "minDate", selected);
}
});
$("#datepicker2").datepicker({
dateFormat: 'dd-mm-yy'
});
$("#datepicker1").focusout(function(){
$('#datepicker2').val('');
});
$('#reset').click(function(){
$('#datepicker2').datepicker("option", "minDate", null);
});
});
jsfiddle
Related
below is the code for selectbox validation but it is not working..can anybody help please..
<?php include('../config.php'); ?>
<style>
#errorMessage {
color:red;
font-size:12px;
margin-left:10px;
}
</style>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"> </script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#agentlist" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
<div id="distanceform" style="width:100%; height:auto;border:0.1em solid #CCC;float:left;">
<div id="distanceformtitle" style="border-bottom:0.1em solid #CCC;width:98%;height:25px;text-align:left;font-size:13px;padding-left:2%;padding-top:11px;background-color:#FAFAFA;color:#1D89CE;">Distance Report</div>
<div id="errorMessage"></div>
<span>
<select name="agentlist" id="agentlist" class="selectclass">
<option value="">--Select Agent--</option>
<?php
$x=mysqli_query($con,"select * from accounts where gid='0' and companyid='".$_SESSION['newforcecid']."' and publishstatus='1'");
while($data=mysqli_fetch_assoc($x)){
?>
<option value="<?php echo($data['imeino']); ?>">
<?php echo($data['firstname']); ?></option><?php
}
?>
</select>
</span>
<span><input type="text" class="textclass" name="fromdate" id="fromdate" placeholder="From Date" value="<?php echo(date('d-m-Y')); ?>"></span>
<span><input type="text" class="textclass" name="todate" id="todate" placeholder="To Date" value="<?php echo(date('d-m-Y')); ?>"></span>
<input type="button" id="search" name="search" value="Search" class="btnclass">
</div>
<br>
<div id="distanceresult" >
</div>
validation is not working..when i click on submit data is not gettng displayed and at same time error msg is also not gettng displayed
Just you need to add the dateFormat: 'dd-mm-yy', after number of months
Check Demo here
<script>
$(function () {
$("#txtFrom").datepicker({
numberOfMonths: 1,
dateFormat: 'dd-mm-yy',
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
numberOfMonths: 1,
dateFormat: 'dd-mm-yy',
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
});
</script>
You can use dateFormat:"dd-mm-yy" in the options. Please do check out all the possible dateFormats Here
Assuming that you are using jQuery-ui:
var date=$.datepicker.formatDate( "dd-mm-yy", new Date( 2015, 2 - 1, 25 ) );
Value of date will be: 2015-02-25
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.
I am trying to develop a calendar input variable which also allows for a datepicker for the input boxes.
HTML
<select id="select">
<option value="Type">Type</option>
<option value="Range">Range</option>
<option value="Individual">Individual</option>
</select>
<div id="range" style="display:none;">
<input type="text" name="job_from" id="job_from" placeholder="From" class="datepicker" />
<input type="text" name="job_to" id="job_to" placeholder="To" class="datepicker" />
</div>
<div id="ind" style="display:none;">
<button type="button" id="add2" class="submit">Add Another Date</button>
<div id="item2">
<div><input type="text" class="datepicker" name="jobdates[]" /></div>
</div>
</div>
SCRIPT
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
Here is the jsfiddle
when I take away the datepicker jquery function the hide/show functionality works, when i put the datepicker script in nothing works. Can someone explain why I cannot get both to work
Your code is fine, I believe you just weren't including the core jQueryUI files that the DatePicker needs in order to run.
Add this to the head of your page:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
EXAMPLE 1
To address the issue where datepicker is not being initialized due to the new elements being written to the DOM after the jQuery has initialized the datepicker, you simply must call the datepicker when the user creates a new DOM element.
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
// This is where you need to add the datepicker jQuery again <<<<<<<<<
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
EXAMPLE 2
I think its not possible.
Make a second input (for datepicker) and show hide it if checked box...
The rest is js and css
EDIT:
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]"/><button class="delete submit" type="button">Delete</button></div>');
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
I like to insert a date of birth field in the php form? The range of values to be entered must be in between two years(ex:1988-12-20 to 1992-1-1). I am just a starter in php.<input type="date" name="dob">
You can do this between two years(ex:1988-12-20 to 1992-1-1)
<input type="date" name="bday" min="1988-12-20" max="1992-01-01" />
You can achieve this with html5 easily
<input type="date" name="bday" min="1990-01-02" max="2010-01-02" />
An alternative way is to use the Jquery Datepicker.
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
minDate: '1988-12-20',
maxDate: '1992-1-1'
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I'm creating a PHP site for property. I'm new to jQuery and jQuery UI but can't seem to find the answer anywhere else.
Please see this screen shot (full size):
For for every "received" and "expiry" box I want a jQuery datePicker box to appear and format as shown.
To test this I tried to create an example.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
$( "#datepicker2" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<style>
.ui-datepicker {
font-size: 80%;
}
</style>
<p>Date: <input id="datepicker" type="text" /></p>
<p>Date2: <input id="datepicker2" type="text" /></p>
Which works fine, but how do I get a date picker to come up for ANY textbox without having to repeat the JS so many times.
For say, 50 properties, there may be 200 input boxes on the page with a date needing to be filled in.
Here is some example code from the screen shot.
<tr>
<td>Property ID</td>
<td>House Number</td>
<td>Address Line 1</td>
<td>Gas Expiry</td>
<td>Gas Received</td>
<td>Electric Expiry</td>
<td>Electric Received</td>
<td>Property Active</td>
<td>Update</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>East Street</td>
<td><input name="gas_expiry[4]" type="text" id="gas_expiry[4]" value="2011-08-03" /></td>
<td><input name="gas_received[4]" type="text" id="gas_received[4]" value="" /></td>
<td><input name="electric_expiry[4]" type="text" id="electric_expiry[4]" value="" /></td>
<td><input name="electric_received[4]" type="text" id="electric_received[4]" value="" /></td>
<td>
<select name="active[4]" id="active[4]">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select>
</td>
<td><input name="edit[]" type="checkbox" id="edit[]" value="4" /></td>
</tr>
Probably something really simple, I appreciate any help.
What I do is create a calendar CSS class and have the behavior attached to each member of that CSS class like so:
$( ".calendar" ).datepicker({ dateFormat: 'yy-mm-dd' });
You should set up class attribute for each text box
<input class="datepicker" type="text" />
and then
$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
Or if you have only dates textboxes, you can attach datepicker for all textboxes by
$( 'input[type="text"]' ).datepicker({ dateFormat: 'yy-mm-dd' });
Another method, just for your reference, would be
$("#datepicker, #datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });
For ANY textbox on the page:
$('input[type="text"]').datepicker({ dateFormat: 'yy-mm-dd' });
to get functional datepickers on different input boxes on the same page of a custom post with the least hassle and without messing with the jquery-ui.css and jquery-ui.theme.css or any other code of the jQuery ui library:
<input class="datepicker" name="first_intake" id="first_intake" value="" size="30" type="date">
<input class="datepicker" name="second_intake" id="first_intake" value="" size="30" type="date">
In the footer I initiate the datepicker in a function as I use wordpress and this page is in the admin backend, but you can just use the javascript snippet, if you do not use wordpress:
<?php
function my_admin_footer() { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#first_intake.datepicker').datepicker({
dateFormat : 'd M, yy'
});
jQuery('#second_intake.datepicker').datepicker({
dateFormat : 'd M, yy'
});
});
</script>
<?php
}
add_action('admin_footer', 'my_admin_footer');
?>
Here's what worked for me...
PHP + jquery
$(function() {
for(let i = 1; i<= <?php echo count($rows) ?>; i++)
{
$( "#datepicker-popup"+i ).datepicker({ dateFormat: 'yy-mm-dd' });
}
});