When i set my input field without datepicker like that:
<input type="text" name="date" value="<?php echo $date; ?>" class="textbox" />
I can see my value which i get from database. The format is: 1965-02-05
When I set this code:
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
}
);
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#datepicker" ).datepicker( "option", "yearRange", '1900:2011' );
});
</script>
<input type="text" id="datepicker" name="date" value="<?php echo $date; ?>" class="textbox" />
nothing shown in text input area, but i can see datepicker without any problem when i click inside of the text input area.
What is the problem?
I'am formatting like that:
http://docs.jquery.com/UI/Datepicker/formatDate
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: '1900:2011',
constrainInput: false
});
See working example: http://jsfiddle.net/eATRv/
Try this. Now you should also be able to see if it is the correct format :)
Related
basically I have a large form created on my WordPress site using Gravity Forms. One section of my forms has a bunch of items listed with a 'Start Date' followed by an 'End Date' -- Example:
Item | Start Date | End Date
Item#1 | 05/01/2015 | 05/25/2015
What I am after is making it so I can disallow the 'End Date' from being before the selected 'Start Date'. It would be best if the user was unable to even select the date from the date picker drop down, but if it has to be an error that pops up on submission, that is fine to. I have been researching this for hours and I am just too noob to know exactly what to do. Thanks for any and all help!
Try something like this, which uses jQuery's datepicker functions:
<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="https://jqueryui.com/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>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
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"/>
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've been trying for the last days to get this thing to work.
Have two datepickers much like start and end date demo but cannot have them to work. This code works on the body of a page, but not on the header where I would like to have a search bar.
<script type="text/javascript">
$(function() {
$( "#from" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
<input type="hidden" name="a" value="dosearch"/>
<input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
<input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
<input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
<input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
Can anyone help me please?
Move the setup outside of the function() you're using for some reason the date picker doesn't like that/doesn't hook to the boxes correctly.
Here's how I do it and it works fine.
Start : <input type="text" name="startdate" id="startdate" value="<?php echo $startdate;?>" />
End : <input type="text" name="enddate" id="enddate" value="<?php echo $enddate;?>" />
<script>
//date popup instigation
$( "#startdate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#startdate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#startdate" ).datepicker( "option", "showAnim", "blind" );
$( "#enddate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#enddate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#enddate" ).datepicker( "option", "showAnim", "blind" );
</script>
may be your header has a different php page. So in your header page include .js files and the code for datepicker. Hope it will work for you.
I would use classes instead of id's, I would also place the Javascript and the end of the document, this should fix your issue.
<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
<input type="hidden" name="a" value="dosearch"/>
<input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
<input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
<input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
<input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
<script type="text/javascript">
$(document).ready({
$( ".from" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
can't find solution to this issue. So i have datepicker input field, it works fine, i can choose date and save it to database. But when i want to edit this saved value in edit_profile.php this field is empty, i need to see the user specified date. How to do it?
Datepicker function:
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
}).val('<?php echo $age;?>');
});
Input:
<input name="datepicker" type="text" id="datepicker" class="date_picker" value="" />
what to do ?
Can't you just do this:-
<input name="datepicker" type="text" id="datepicker" class="date_picker" value="<?php echo $age;?>" >
I think you should use defaultDate option, for example
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, defaultDate: yourDate });
You can use SetDate or Defaultdate option of datepicker:
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );