We Keep Coding

How to set default date (in this format "dd/mm/yy") in text box which is attached with a datepicker?

I need to search depending upon a date in the textbox.But initially i want to fill that textbox with a default date(ie,today).

$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
datepicker is your date control
refer this url http://jqueryui.com/datepicker/#date-formats

Try this.
$("#my_dp").datepicker({
dateFormat: "dd/mm/yy"
});
var t = new Date();
var formattedDate = t.getDate() + "/" + (t.getMonth() + 1) + "/" + t.getFullYear();
$("#my_dp").datepicker("setDate", formattedDate);

I got another way
$("#startDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));

How to get the selected date from jquery datepicker

I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date ..
Here is the code for datepciker
<div id="datepicker"></div>
and here i am trying to get the selected code..
$(document).ready(function () {
$("#datepicker").datepicker({
onSelect: function (dateText, inst) {
var date = $(this).val();
alert(date);
}
});
});
But, I am not able to get the date ..Please help me ..Thanks..

This should do the trick
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
It's basic but here is a jsfiddle with it alerting the selected date when selected
update to change the date format
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
jsfiddle
3rd update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).val();
alert(selected);
}
});
});
I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.
4th Update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).datepicker("getDate");
alert(selected);
}
});
});
The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.
Depending on your needs select which one is appropriate.
(Added 4th method and explanation of the difference after #TimothyC.Quinn commented that the getDate being the correct method)

Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
$("#datepicker").datepicker('setDate', '10-03-2020');
// pass string of your format or Date() object
$("#datepicker").datepicker('getDate');
// returns Date() object
$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
// pass string of your format or Date() object

Try
$("#datepicker").datepicker({
onSelect:function(selectedDate)
{
alert(selectedDate);
}
});
OR
$("#datepicker").datepicker({
onSelect:function (dateText, inst)
{
alert(inst);
}
});

try this
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
})
you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.
HTML:
<div id='QA'></div>
<div id='datepicker'></div>
JS:
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
clearBtn: true,
todayHighlight: false,
multidate: true
}) .on('changeDate', function(e){
$('#QA').html(JSON.stringify(e));
});
});
/*
{
"type":"changeDate",
"date":"2015-08-08T07:00:00.000Z",
"dates":[
"2015-08-08T07:00:00.000Z"
],
"timeStamp":1438803681861,
"jQuery21409071635671425611":true,
"isTrigger":3,
"namespace":"",
"namespace_re":null,
"target":{
},
"delegateTarget":{
},
"currentTarget":{
},
"handleObj":{
"type":"changeDate",
"origType":"changeDate",
"guid":52,
"namespace":""
}
}
*/
</script>

The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)
$("#datepicker").datepicker('getDate').toISOString()
so it will get the date in ISO stander.

All code is for Bootstrap Datepicker
var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)
or
var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30
if(calendar){
alert(calendar);
} else {
alert('null');
}

If you need it in specific format like '2021/09/28':
$.datepicker.formatDate('yy/mm/dd',
$('.date-picker-2').datepicker("getDate")
);

Here is how to get Date object from datepicker in the onSelect event:
$("#datepickerid").datepicker({
onSelect: function (dateText, inst) {
var date_obj = $(this).datepicker('getDate');
}
});
I find it strange that the onSelect caller would not return the date object by default.

Converting Date Format Of JQuery Datepicker

I have a JQuery Date Picker link to a HTML Form textbox. It enters the date in mm/dd/yyyy format. What I need is to convert this format to dd-mm-yyyy.
Can I do when the date just inserted or after inserted? If one or both can how can I do that?
I already tried the belo code. But it didn't work.
//Date Picker
$(function() {
$("#to_date").datepicker({ maxDate: new Date() },);
$("#from_date").datepicker({ maxDate: new Date() });
$("div.ui-datepicker").css( { "font-size": "10px" } );
$("#to_date").datepicker({ dateformat: "dd-mm-yyyy" }).val();
$("#from_date".datepicker({ dateformat: "dd-mm-yyyy" }).val();
});
The above also contains the statements to display the last day to select as today.
So what is with my code?
Thanks & regards,
Chiranthaka

Fiddle
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
See the fiddle.. i think this would help you

The way you are using format, it won't convert your date, instead it will just set a format to be used on that control.
So, you'l have to set format using / as you want it in mm/dd/yyyy
And, using javascript you have to convert it to dd-mm-yyyy
So,
$(function() {
$("#to_date").datepicker({ dateformat: "mm/dd/yyyy" });
});
Now while accessing it, you can convert it as following code:
var dt=$("#to_date").val();
var arr=dt.split("/");
var converted= arr[1]+"-"+arr[0]+"-"+arr[2];
console.log(converted);

dateformat is probably case sensitive and should be dateFormat http://api.jqueryui.com/datepicker/#option-dateFormat
$(function() {
$("#to_date, #from_date").datepicker({
maxDate: new Date(),
dateFormat: "dd-mm-yyyy"
});
$("div.ui-datepicker").css( { "font-size": "10px" } );
});

Please use the following code. Jquery options are case sensitive. So use dateFormat instead of dateformat. The format should be dd-mm-yy instead of dd-mm-yyyy
$(function() {
$("#from_date, #to_date").datepicker({ maxDate: new Date(), dateFormat: "dd-mm-yy" });
$("div.ui-datepicker").css( { "font-size": "10px" } );
});

Limiting date range for depature date based on arrival date value [duplicate]

This question already has answers here:
jQuery datepicker- 2 inputs/textboxes and restricting range
(8 answers)
Closed 9 years ago.
I have two date pickers (arrival date and depart date) the user selects an arrival date and then, when the user selects a depart date it must disable (or grey out) all previous dates from which the arrival date has been chosen, i.e if arrival date is 4th July 2013, user can only select a depart date from 4th July 2013 and onwards.
I have used the following code to no success:
<script>
jQuery(function($){
$( "#input_2_5" ).datepicker({
onClose: function( selectedDate ) {
$( "#input_2_6" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#input_2_6" ).datepicker({
onClose: function( selectedDate ) {
$( "#input_2_5" ).datepicker( "option", "maxDate", selectedDate );
}
});
</script>

You'd normally do that like so :
$("#from_date").datepicker({
minDate : 0,
onSelect: function() {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate());
$("#to_date").datepicker( "option", "minDate", minDate);
}
});
$("#to_date").datepicker({
minDate: 0
});
FIDDLE

How to get calculate with dates in js/jQuery

I've a datepicker, using jQuery. But I want to substract 5 days from the date that is selected with jQUery datapicker. How can I do this?
--EDIT--
This solved my problem:
date = date.setDate(date.getDate() - 5);
date = new Date(date);
$('#max_unsub_date').attr('value', date.toLocaleDateString());
Thanks for helping

Assuming your datepicker has an id of datePicker:
var pickedDate = $( "#datePicker" ).datepicker( "getDate" );
if ( pickedDate != null )
{
pickedDate.setDate( pickedDate.getDate() - 5 );
}
Then if you wanted to send that back to the datepicker:
$( "#datePicker" ).datepicker( "setDate", pickedDate );

Use datejs http://www.datejs.com/.
var date = (a date object created from your datepicker result);
date.add(-5).days();