I'm trying to set an initial value in my jquery ui datepicker. I've tried several different ways, but nothing seems to display the date, it's empty.
var idag = new Date();
$("#txtFrom").datepicker("setDate", idag - 2);
$("#txtTom").datepicker("setDate", idag);
$("#txtFrom").datepicker("refresh");
$("#txtTom").datepicker("refresh");
This question is related to
javascript
jquery
jquery-ui
datepicker
This simple example works for me...
HTML
<input type="text" id="datepicker">
JavaScript
var $datepicker = $('#datepicker');
$datepicker.datepicker();
$datepicker.datepicker('setDate', new Date());
I was able to create this by simply looking @ the manual and reading the explanation of setDate
:
.datepicker( "setDate" , date )
Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.
You can set the value in the HTML and then init datepicker to start/highlight the actual date
<input name="datefrom" type="text" class="datepicker" value="20-1-2011">
<input name="dateto" type="text" class="datepicker" value="01-01-2012">
<input name="dateto2" type="text" class="datepicker" >
$(".datepicker").each(function() {
$(this).datepicker('setDate', $(this).val());
});
The above even works with danish date formats
Use this code it will help you.
<script>
InitializeDate();
</script>
<input type="text" id="txtFromDate" class="datepicker calendar-icon" placeholder="From Date" style="width: 100px; margin-right: 10px; padding: 0px 0px 0px 7px;">
<input type="text" id="txtToDate" class="datepicker calendar-icon" placeholder="To Date" style="width: 100px; margin-right: 10px; padding: 0px 0px 0px 7px;">
function InitializeDate() {
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
var ToDate = mm + '/' + dd + '/' + yyyy;
var FromDate = mm + '/01/' + yyyy;
$('#txtToDate').datepicker('setDate', ToDate);
$('#txtFromDate').datepicker('setDate', FromDate);
}
Use setDate
.datepicker( "setDate" , date )
Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.
Use it after initialization code to get current date (in datepicker format):
$(".ui-datepicker-today").trigger("click");
I'm not entirely sure if I understood your question, but it seems that you're trying to set value for an input type Date.
If you want to set a value for an input type 'Date', then it has to be formatted as "yyyy-MM-dd" (Note: capital MM for Month, lower case mm for minutes). Otherwise, it will clear the value and leave the datepicker empty.
Let's say you have a button called "DateChanger" and you want to set your datepicker to "22 Dec 2012" when you click it.
<script>
$(document).ready(function () {
$('#DateChanger').click(function() {
$('#dtFrom').val("2012-12-22");
});
});
</script>
<input type="date" id="dtFrom" name="dtFrom" />
<button id="DateChanger">Click</button>
Remember to include JQuery reference.
From jQuery:
Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
Code examples
Initialize a datepicker with the defaultDate option specified.
$(".selector").datepicker({ defaultDate: +7 });
Get or set the defaultDate option, after init.
//getter
var defaultDate = $(".selector").datepicker("option", "defaultDate");
//setter
$(".selector").datepicker("option", "defaultDate", +7);
After the datepicker is intialized you should also be able to set the date with:
$(/*selector*/).datepicker("setDate" , date)
Source: Stackoverflow.com