Develop Reference

JQuery Datepicker Returning Empty on One Form But Not Others

Having a problem with the datepicker: when I click on a date, the datepicker works as it should but the form field empties itself of even any current content and remains empty until reloaded or a new entry is selected.
Before this stopped working and only on this one form, all the work I had been doing was elsewhere on the site and in PHP rather than Javascript so I don't even know where to begin and nothing shows in the Apache logs either. There is no other Javascript on this page so what I need to know is how to check for conflicts when there are no errors.
Just to be sure that the code itself looks okay, here it is:
The Javascript that is in an external js file:
$(document).ready(function(){
$( "#StartDate" ).datepicker({
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate ) {
$( "#StartDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#EndDate" ).datepicker({
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate ) {
$( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
}
});
$( "#datepicker" ).datepicker({
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate ) {
$( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
The form field itself:
<input type="text" name="EventDate" value="Fri Jan 11, 2019" size="15" id="datepicker">
. . .and the form is having issues with the one called datepicker. The other two are working prefectly on another form which has two datepickers.

Somehow the problem in my original question was something in the OnLoad bits and with it removed from the last section that wasn't working, it worked but then the other two did not so removing all of them it worked fine. There must be some syntax error or other in it.
In any event, it is now fixed properly. Once I realized what #ArtisticPhoenix meant by class I was able to implement it to simplify the code considerably and to make it work with any form no matter how many datepickers they may have. I now have this:
$(function() {
$('input').filter('.datepicker').datepicker({
altFormat: 'yy-mm-dd',
dateFormat: 'yy-mm-dd',
firstDay: 1
});
});
The form itself in this case is semi-dynamic, meaning that it's created from an array of values found in a definition function so simply changing the definition was all that was needed to make it work properly throughout several sites. Now the id is simply the field name and class is always datepicker. Seems to work perfectly so far!
<input type="text" name="EventDate" value="2019-01-11" size="15" id="EventDate" class="datepicker">

Keep Input Date Jquery

I am choosing a date with submit. What I want to do is keeping this date on the form when I am redirected to another web page.
https://jsfiddle.net/92gd7v26/
I tried this but it's not working:
$name7=$_SESSION['date'];
$name8=$_SESSION['date2'];
$name9=$_SESSION['date3'];
<script>// <![CDATA[
$( function() { $( "#datepicker" ).datepicker(); $( "#datepicker2" ).datepicker(); $( "#datepicker3" ).datepicker();
$('#datepicker').datepicker({
inline: true,
showOtherMonths: true,
})
$("#datepicker").datepicker("setDate", $name7);
$("#datepicker2").datepicker("setDate", $name8);
$("#datepicker3").datepicker("setDate", $name9);
} );
// ]]></script>
I don't know what's wrong. I am able to get the "date" values from $name7,$name8 and $name9. But when I try to put them on .datepicker("setDate") I am not getting the values I sent..

advice on how to create this code more clearly

$( function() {
$( "#datepicker" ).datepicker();
} );
-> datepickerload
$( document ).ready(function() {
$( "#datepicker" ).datepicker( "setDate", new Date());
$( "#datepicker" ).change(function () {
socket.send($( "#datepicker" ).val())
})
});
->datepicker default value setting , datepicker on changed some event
To create the three work more succinctly, overlooking the advice to integrate into one

jquery datepicker events not working properly

when i click in jquery calendar it display value first time and then when i click another time another value it doesn't work .
<script>
$(function(){
$( "#datepicker" ).datepicker();
$( ".ui-state-default" ).on('click',function(event){
alert(event.toElement.outerText);
})
});
</script>
check demo here http://jsfiddle.net/epHNZ/592

Just try this,
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on('click', '.ui-state-default', function(e){
alert(e.toElement.outerText);
});
});
DEMO
or
May be above example unsupported in some browsers, in that case use this
$(function(){
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var date =$(this).datepicker('getDate');
alert(date.getDate());
}
})
});
DEMO

JQuery Mobile UI DatePicker Change Date Format

I am trying to change the date format in the JQM UI Datepicker.
It's got an input which display's the dates as you change them.
I need it to display in dd/mm/yyyy format.
Can anyone help please?
UPDATE:
I'm trying this, but nothing's changing:
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script language="javascript">
$(document).ready(function() {
$.datepicker.formatDate('dd/mm/yyyy'); //ADDED HERE
$("input[type='submit']").click(function(e) {
e.preventDefault();
});
});
</script>

Try this $.datepicker.formatDate('dd/mm/yyyy');
More reference here

Change the "jquery.ui.datepicker.mobile.js" file
add date format: dateFormat: "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});