jQuery datepicker field value not showing - javascript

I have a field on which I have implemented jQuery Datepicker but if I assign a value on that field its shows in the chrome's developer tool...
But its not showing on the front end.
I know we can set a default date like this with the datepicker option setDate:
$( ".datepicker" ).datepicker("setDate", '29-10-2016');
But the date is coming from database and I cannot hard code it... So is there any way I can add a value and it will show up on front end unless user changes and set another date?
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">

This problem happen because javascript require date input in format "yyyy-MM-dd", regardless format you use to display the value.
So your code should be like this :
<input type="text" name="date" id="date" class="datepicker" value="2016-10-25">
or
<input type="text" name="date" id="date" class="datepicker" value="<?php echo date_format($date,"Y-m-d"); ?>">

I found a way but still doesn't feel its the correct way, but for now this will do the trick for me.
I'm posting this answer to help other and will wait and see anyone else come up with the best and efficient solution for this question.
Since I'm using PHP so I just put this on my page to set the date for that field. I can add more lines if I have more date fields in my page...
<script>
$(function(){
$('#date').datepicker('setDate', '<?php echo $date; ?>');
});
</script>

If you are not getting value from $('#date').val() then there is problem in back end , date is not coming from back-end. If there is value in input field like
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Then you can use below code .
$(function(){
$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"} );
$( ".datepicker" ).datepicker("setDate",$('#date').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">

Mine situation was my date input didn't show the date value I picked after submit, but the date value can be seen in Chrome Developer tool, so I solved this problem by getting the input value before setting datepicker, then adding the value after.
$( function() {
var ddate = document.getElementById("date").value?document.getElementById("date").value:'';
$("#date").datepicker();
$("#date").datepicker("option", "dateFormat", "yy/mm/dd");
$("#date").val(ddate);
} );

Related

convert datepicker format into input field

I do have a form with a simple input field, using the jquery datepicker.
<input class="date" id="mydate" name="mydate" value="<?php echo $_GET['mydate']; ?>" />
When I send the form, the date format of my parameter have to be: YYYY-MM-DD.
www.mydomain.com/?mydate=2018-06-10
My javascript does look like this:
$(document).ready(function() {
$("#mydate").datepicker({
format: "yyyy-mm-dd"
})
Now, if I use the datepicker to select a date, the date format inside my input field is also YYYY-MM-DD. But for the vistor,the date format should look like this: DD.MM.YYYY.
Is there a way to convert the output of the date into another format? Thank you!
jQuery datepicker provide altField option for this purpose:
$("#displayDate").datepicker({
dateFormat: "dd.mm.yy",
altField: "#mydate",
altFormat: "yy-mm-dd"
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"
integrity="sha256-UezNdLBLZaG/YoRcr48I68gr8pb5gyTBM+di5P8p6t8="
crossorigin="anonymous"></script>
<input class="date" id="displayDate" value="20.12.2017" />
<input type="hidden" class="date" id="mydate" name="mydate" value="2017-12-20" />
Read documentation for more detail.

HTML Datepicker - Opened by default

I'm using an input of the type date. I would like to know if there is a way to make the datepicker selection panel opened by default when the user enters in the page.
The element look like this:
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true">
Did you try adding autofocus
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true" autofocus="autofocus">
By using following funtion date picker will open bydefault after screen load.
$(function() {
$( "#starting_date" ).datepicker();
$( "#starting_date" ).datepicker("show");
});
You can display it embedded in a webpage by calling it on div instead of input, as per official documentation.

How fill up the datepicker form with string date?

From database I get data in format like (let's suppose it's a string)
1974-07-05
How I need to pass the date in form with datepicker and make the date active there, so how can I do it?
<td>
<script src="javascript/datepicker.js"></script>
<input id="datepicker" type="text" name="dob" value="${person.bdate}">
</td>
and ${person.bdate} is a string date
This is not an answer, just an observation.
You have requested a pure javascript solution, but you are using a plugin. Why not use jQuery and jQueryUI's datepicker plugin. Look how easy the code would be:
jsFiddle Demo
HTML:
<input id="datepicker" type="text" name="dob" value="">
jQuery:
var dd = '1974-07-05';
$('#datepicker').val(dd);
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
Sources:
http://jqueryui.com/datepicker/#date-formats

How to change the date format in datepicker? [duplicate]

This question already has answers here:
jQuery UI DatePicker - Change Date Format
(29 answers)
Closed 8 years ago.
I have a simple html form that asks for two dates to select, and on the next page they are used in a MySQL query. Problem is, datepicker uses mm/dd/yyyy as the format, and I need yyyy-mm-dd for MySQL.
Is there a simple way to do this? I don't care if the datepicker's format is changed, or if I have to add a middle step to convert it, but whenever I search for examples they all look way overly complicated and include stuff I'm not even using.
I don't think the code is really important since it's so simple, but here's what I have in the header;
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).datepicker();
});
</script>
And here's what's in the body;
<form method="post" action="stat_report.php">
<h1>Report Summary</h1>
Format: YYYY-MM-DD<br>
Start Date: <input type="text" name="startDate" id = "datepicker"><br>
End Date: <input type="text" name="endDate" id = "datepicker2"><br>
<input type="submit" value="Submit">
</form>
Like so: $('#someId').datepicker({ dateFormat: 'yy-mm-dd' });
This could solve your Problem: http://api.jqueryui.com/datepicker/#option-dateFormat

Javascript duplicate form input

I have a form and I need two fields to be the same. I am trying to use javascript to make the second one the same as the first, after the first is set.
Here is the javascript (above my tag)
<script type="text/javascript" charset="utf-8">
function updateDate(){
startDate = document.getElementById("startdate").value;
document.getElementById("enddate").value = startDate;
} </script>
and the HTML is as follows:
<span class="em-events-search-dates em-date-range">
<input type="text" id="startdate" class="em-date-input-loc em-date-start" onchange="updateDate();" />
<input type="hidden" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
<input type="text" id="enddate" class="em-date-input-loc em-date-end" />
<input type="hidden" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />
</span>
The issue I'm having is that when you click the form field, it opens a date selector. I'm pretty sure it uses this exact plugin http://jqueryui.com/demos/datepicker/
Unfortunately, this means that you never actually click the form field after the date is selected, and you never type anything.
I tried onmouseout on the second field (the hidden one with class em-date-input)
I tried onchange on the first element with id startdate
There are a few that work, only if you go back and click the visible field with the date selected. The problem is, a user will never do this.
I even tried putting onsubmit="updateDate();" on the submit button, hoping that when you clicked it it would change the second date before submitting the form.. No luck. Any suggestions?
EDIT: Added alerts to see what was working and what wasn't
<input type="text" onchange="alert('first');" id="startdate" class="em-date-input-loc em-date-start" />
<input type="hidden" onchange="alert('second');" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
<input type="text" onchange="alert('third');" id="enddate" class="em-date-input-loc em-date-end" />
<input type="hidden" onchange="alert('fourth');" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />
When I change the date on the second box (id="enddate") it fires the third alert. No other alerts fire, even when I change the date in the first box multiple times, or by typing.
use form before submit event:
onsubmit="return YOUR_FUNCTION_HERE()"
Just add it your submit button.
and then set the values inside that func:
var YOUR_FUNCTION_HERE = function(){
//set your hidden inputs
}
If I understood your question then you may want this (confused a little about your question)
$(function(){
$('#startdate, #enddate').datepicker();
$('#startdate').on('change', function(e){
$('#enddate').val($('#startdate').val());
});
});​
Demo or This One.
You need to hook up an onchange event to the textbox, then copy your data after it fires. It should fire once the datepicker updates the value.

Categories