We Keep Coding

Change Datepicker format [duplicate]

This question already has answers here:
jQuery UI DatePicker - Change Date Format
(29 answers)
Closed 6 years ago.
I have this code
$(function() {
$( "#datepicker" ).datepicker();
});
And result is a date like this 23/12/16 but i need to get format 23-12-2016
How I can do this?

$(function() {
$( "#datepicker" ).datepicker({
format: 'dd-mm-yyyy'
});
});

Pass "dd-mm-yy" as dateFormat.
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" })

Here we go:
Try to reconstruct DateTime string as like this:
var dateObj = $("#datepicker").val();
var newDate = new Date(dateObj );
var formattedString = [newDate.Date(),newDate.Month()+1, newDate.getFullYear()].join("-");
alert(formattedString );

How to set the default date to two days from current date using date picker?

I went through many examples but Im not able to set the value of my date picker. The textbox value is shown as 01/01/2016 and the calendar opens to that date as well. Im trying to set the default date to two days from now in the text box as well as in the calendar that shows up on click.
I tried the following:
1.
$(".date-picker").datepicker().datepicker("setDate", new Date());
2.
$(".date-picker").datepicker().datepicker('setDate', '+2');
My HTML is:
<input type="text" class="input date-picker">
I agree this question has been repeated lots of times but I have tried most of the examples but still Im not able to make it work. Please advice.

The best way to do this is to extend the javascript date function using prototype
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Then simply call as follows:-
$(function() {
var currentDate = new Date();
var myDate = currentDate.addDays(2);
$(".date-picker").datepicker(); //initialise
$(".date-picker").datepicker('setDate', myDate); //set date
});
DONT FORGET you have to INITIALISE the datepicker - then set the date
JS Fiddle here

Initialize a datepicker with the defaultDate option specified.
$(document).ready(function () {
$(".date-picker").datepicker({
defaultDate: +2,
dateFormat: "mm/dd/yy"
});
});

http://jsfiddle.net/8ejbw8d5/
$( ".date-picker" ).datepicker({
defaultDate: +2
});
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +2 );
Read more here: http://api.jqueryui.com/datepicker/#option-defaultDate

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

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