Develop Reference

Datepicker onchange submit with default value

I'm trying to assign default value to Gijgo Datepicker but it submit the form each time I click on it, means that I cannot change the value.
var today, datepicker;
today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
datepicker = $('#datepicker').datepicker({
header: true,
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd',
minDate: '2020-01-01',
value: '2020-02-01', //add this and it broke
showRightIcon: true,
iconsLibrary: 'fontawesome',
maxDate: today,
change: function (e) { $('form').submit();}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<form action="" method="get" autocomplete="off">
<input id="datepicker" class="" width="276" name="date" />
</form>
It worked but when I don't assign the value, what I need is to show a current month so user don't have to choose the month again. Anything I tried just broke the input.
Thanks in advance.

It's your change: function (e) { $('form').submit()}; doing this - seems it's submitting the form as soon as you change the input: see below code for solution.
EDIT: Op is asking for a way to listen to submit the form when the user clicks a specific date.
You can do this by leveraging bootstrap datepicker events
$('.datepicker').datepicker()
.on('changeDate', function(e) {
// `e` here contains the extra attributes
if(e.date === yourDate)
$('form').submit()
});
var today, datepicker;
today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
datepicker = $('#datepicker').datepicker({
header: true,
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd',
minDate: '2020-01-01',
showRightIcon: true,
iconsLibrary: 'fontawesome',
maxDate: today
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<form action="" method="get" autocomplete="off">
<input value="2020-02-01" id="datepicker" class="" width="276" name="date" />
</form>

Jquery datepicker : Selecting the value for second datepicker based on first date picker

First date picker
<div class="input-group date " data-provide="datepicker">
<input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
</div>
Second datepicker
<div class="input-group date" data-provide="datepicker">
<input type="text" name="date2" class="form-control datepicker2" placeholder="Select delivery date">
</div>
There are two date pickers. The value of the second date picker is based on the first one. If the user chooses today's date on first date picker then the date picker 2 will only allow choosing date starting from tomorrow.
$(document).ready(function(){
$('.datepicker1').datepicker( {
format: 'dd-mm-yyyy',
startDate:'+0d',
autoclose: true,
onSelect: function(date){
var date1 = $('.datepicker1').datepicker('getDate');
var date = new Date( Date.parse( date1 ) );
date.setDate( date.getDate() + 1 );
var newDate = date.toDateString();
newDate = new Date( Date.parse( newDate ) );
$('.datepicker2').datepicker("option","minDate",newDate);
}
});
$('.datepicker2').datepicker( {
format: 'dd-mm-yyyy',
autoclose: true,
minDate:0,
});
});
if the user chooses 10-04-2019 in the first date picker then the user should only able to choose from 11-04-2019 in the second date picker.
this is the requirement

Just set minDate option for the second datepicker input, so that user can't select that date or set date backwards.
Check my updated snippet of your code below:
$(document).ready(function(){
// Init first datepicker
$('.datepicker1').datepicker( {
format: 'dd-mm-yyyy',
startDate:'+0d',
autoclose: true,
onSelect: function(date){
// Select next day
var nextDay = new Date(date);
nextDay.setDate(nextDay.getDate() + 1);
$(".datepicker2").datepicker("option","minDate", nextDay);
}
});
// Init second datepicker
$('.datepicker2').datepicker( {
format: 'dd-mm-yyyy',
startDate:'+0d',
autoclose: true,
onSelect: function(date){
//validate date here
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicke</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
first date picker
<div class="input-group date " data-provide="datepicker">
<input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
</div>
second datepicker
<div class="input-group date" data-provide="datepicker">
<input type="text" name="date2" class="form-control datepicker2" placeholder="Select delivery date">
</div>
</body>
</html>

jquery datepicker not accepting dateformat

I have the following code in my view:
<input type="text" class="form-control" id="date-from" name="date-from" value="" placeholder="Van" data-class="datepicker" />
I would like to retrieve the value of this field via AJAX for filtering.
The default format for input is mm/dd/yyyy (which i can't change either...)
So I tried getting the results in the format yyyy-mm-dd as i want them.
The following are my lines in javascript, they all return the exact input (mm/dd/yyyy)
alert($('#date-from').datepicker({ format: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ format: 'yyyy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yyyy-mm-dd' }).val());

Here is an example of a datepicker that outputs in yyyy-mm-dd Does that help?
$(function() {
$('#datepicker').datepicker({
onSelect: function(date) {
alert(date);
},
dateFormat: 'yyyy-mm-dd',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="datepicker"></div>

Yo can use alt-format http://api.jqueryui.com/datepicker/#option-altFormat
. And then in your ajax call you can read value form hidden field that have date value in your desired format.
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#altdate',
altFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Field : <input id="datepicker" type="text" /><br />
Alt Hidden Field : <input id="altdate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />
Or you can use manually do that by splitting string on the basis of "-" and the reverse it
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
});
$("#datepicker").change(function () {
var currentDate = $("#datepicker").val();
console.log("Desired format : ",currentDate.split("-").reverse().join('-'));
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" type="text">

Custom Text in jQuery Datepicker

I have to display date in input box after picking from datepicker using jQuery.
I have used following code:
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM' });
$.datepicker.formatDate('yy-mm-dd');
});
And I am able to get date in this format: "Fri 09 August".
However my requirement is: Fri 09 August (Today)
Here's a JS Fiddle to work upon: http://jsfiddle.net/4cgPe/
Any idea how I could achieve this?

I couldn't find much about adding custom text to jQuery, so I came up with my own JavaScript.
I built upon your DatePicker code.
(What I understood was, if the selected date is of today, then add " (Today)", OR, add " (Tomorrow)" if selected date is of tomorrow OR, add nothing for other dates.
<html><head><link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy' });
$.datepicker.formatDate('yy-mm-dd');
});
function updateDate(){
var inputDate=document.getElementById('datepicker').value;
var selectedDate=new Date(inputDate);
var today=new Date();
var tomorrow=new Date();
tomorrow.setDate(today.getDate()+1);
selectedDate.setHours(0,0,0,0);
today.setHours(0,0,0,0);
tomorrow.setHours(0,0,0,0);
var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
if(selectedDate.getTime() == today.getTime()){
document.getElementById('datepicker').value=finalDate+" (Today)";
}
else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
else {document.getElementById('datepicker').value=finalDate;}
}
</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" /></form>
</body></html>
EDIT:
Additional Functionality: There may be a requirement to use Full Days/Months name or Short Days/Months, so you can use the array accordingly.
DaysFull: Sunday, Monday, etc.
DaysHalf: Sun, Mon, etc.
MonthsFull: January, February, etc.
MonthsHalf: Jan, Feb, etc.
Hope this helps. Let me know if this is not enough. :)

Full Source Code as below for different types of format :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30" /></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
More about format refer This link

jQuery Datepicker resets date when using different date format

I have found a possible bug: datepicker resets initial date when using different date format like "mm yy" or "yy". So, if a select a date, the second time a do this the date is not saved and today's date is preselected.
Sample code:
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "mm yy" });
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
See fiddle example.
It only happens if your format does not contain a "dd" or similar for day values.
Any idea of how to avoid it?

You should keep all the necessary element of date in your date picker's format.
format: 'dd-mm-yy',

I just got this from this answer to another question; it will solve your problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Reference from:
http://jsfiddle.net/bopperben/DBpJe/