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">

JQuery Datepicker erases already filled date field

could anyone please help?
I am using jquery datepicker for several fields and in an update form in php and it updates dates in database. All seems to work great except the fact that if some of the date fields are already populated in DB, the datepicker does not display them and upon update it erases the value in DB too.
the php sample:
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd");
} );
</script>
...
<td><input type="text" id="datepicker" name="IM_request" value="'.$row["IM_request"].'"/></td>
So the variable $row["IM_request"] does not display if datepicker is enabled. if i disable it, it works fine, but a lot of manual work.
Any idea how to make the datepicker-enabled input field to display the value from DB?

<input type="text" id="txtSelectedDate" value="20-01-01" />
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
dateFormat: 'dd-mm-yy',
});
JSFiddle example : http://jsfiddle.net/LgTZt/211/

I finally found the solution. Instead of:
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd");
} );
I should have used:
$( function() {
$( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
} );

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