We Keep Coding

jQuery datepicker field value not showing

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);
} );

jQuery datepicker not showing in dynamically generated input fields in html

I have two input fields, one is directly coded inside html page and other is appending through JavaScript, and I have initialized jQuery datepicker for both fields with different id's.
I'm using jQuery ui datepicker
one input field in html page
<input id="datepicker1" name="" type="text" value=""class="form-control" placeholder="dd/mm/yyyy">
other in appending through javascript code
var datepicker2 = '<div class="control-group"> <label class="control-label">Cheque Date</label><div class="controls"> <input placeholder="DD/MM/YYYY" id="datepicker2" name="" type="text" onkeyup="" class="form-control"> </div> </div>'
$("#drop1").html(datepicker2);
$( "#datepicker1" ).datepicker();
$( "#datepicker2" ).datepicker();
Problem is the datepicker is showing with static input field in html page and not showing in dynamic field while appending through JavaScript.
Is it possible to intialize datepicker for dynamically generated fields?

It seems like you never add datepicker2 to the document. If this is the case you have to call something like this
$('body').append(datepicker2);//You may replace 'body' with '#drop2' or whatever is your container
before
$( "#datepicker2" ).datepicker();
See: http://codepen.io/8odoros/pen/xOqyQm

Try the following code.
Add a common class .date_picker to input field and add the following javascript
$('body').on("click", ".date_picker", function(){
$(this).datepicker();
});​

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

Best way to remove default IOS date picker

I currently have the jQuery datepicker implemented which is working great on all browsers but when I view in mobile (iPad) the IOS default date picker comes up too. What is the best way to remove it? CSS? change input type?
This is what my input element looks like:
<input type="date" name="payment_Received" class="form-control datepicker" />
<script>
j$(document).ready(function(e) {
j$('.datepicker').datepicker({
dateFormat:'yy-mm-dd'
});
});
</script>

Just use type="text" instead of type="date"
You could also add readonly="readonly" to prevent the keyboard from appearing.

javascript - open link when user changes date in date picker

I am using a twitter bootstrap datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
What I am trying to do is use the input value (e.g. 15-02-2012 ) to load a page, when the user changes the date.
The input box uses this code...
<div class="input-append date" data-date="12-02-2012" data-date-format="dd- mm-yyyy">
<input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
<span class="add-on"><i class="icon-th"></i></span>
And the JavaScript to reload the page is this...
<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>
The problem is when the date is changed in the date picker (input id = dp3), nothing happens, the page does not reload. But when I tried attaching myFunction() to another text box, it does work, and it is able to grab the value in the datepicker (dp3).
So the problem is that JavaScript is not recognising the change in value of the datepicker (id=dp3). Does anyone know why this is the case?

I see you took the code from the example n°3 of your link, but you switched the id to the wrong tag.
Here --.
V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
If you leave the id on the input tag and keep the original JS code, the .datepicker() method will be called on the wrong element (the input): it is meant to be called on the parent div.
Then, on your jQuery, you should bind the changeDate event of your date-picker, and not the onChange of the input tag itself.
You could try something like this (using jQuery) :
$('#dp3').datepicker().on('changeDate', function() {
//Retrieve the date located on the data of your datepicker
var datevalue = $('#dp3').data("date");
//You can take the value from the input as well if you want
//The input tag doesn't really need an ID to be retrieved (see comments)
//var datevalue = $('#dp3 input').val();
window.open(datevalue,"_self");
});
Edit : here is a working fiddle with minor changes.