Jquery DatePicker Set default date

Question

I Have two date fields where I use DatePicker to pick the dates.

For the first date field, I want today's date as the default date.
For the second date field, I need today + 15 days as my default date

jQuery

$("[name=trainingStartFromDate]").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true});
$("[name=trainingStartToDate]").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true});

How do I set the default dates?

I have tried setDate: new Date() for first date but it's not working.

score 56 · Accepted Answer · answered Jan 29 '13 at 10:31

56

Today date:

$( ".selector" ).datepicker( "setDate", new Date());
// Or on the init
$( ".selector" ).datepicker({ defaultDate: new Date() });

15 days from today:

$( ".selector" ).datepicker( "setDate", 15);
// Or on the init
$( ".selector" ).datepicker({ defaultDate: 15 });

jQuery ui docs

answered Jan 29 '13 at 10:31

gdoron

147,333
58
291
367

2

I dot it same it shows in the textbox but not in calendar – Kushal Jain Jul 29 '16 at 11:16
1

@KushalJain, If you see this, it is likely because you haven't initialized the date picker. You have to run "$( ".selector" ).datepicker()" before you run "$( ".selector" ).datepicker( "setDate", new Date());" – Dave Jan 30 '18 at 20:57

score 37 · Answer 2 · answered Jan 17 '14 at 06:32

37

To create the datepicker and set the date.

$('.next_date').datepicker({ dateFormat: 'dd-mm-yy'}).datepicker("setDate", new Date());

answered Jan 17 '14 at 06:32

Ajit Singh

1,132
1
13
24

score 9 · Answer 3 · answered Dec 19 '14 at 10:01

9

For today's Date

$(document).ready(function() {
$('#textboxname').datepicker();
$('#textboxname').datepicker('setDate', 'today');});

answered Dec 19 '14 at 10:01

Meena

169
1
9

score 8 · Answer 4 · answered Jan 29 '13 at 10:31

use defaultDate()

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 [[UI/Datepicker#option-dateFormat|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.

try this

$("[name=trainingStartFromDate]").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true,defaultDate: new Date()});
$("[name=trainingStartToDate]").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true,defaultDate: +15});

score 7 · Answer 5 · edited Sep 09 '14 at 14:51

7

First you need to get the current date

var currentDate = new Date();

Then you need to place it in the arguments of datepicker like given below

$("#datepicker").datepicker("setDate", currentDate);

Check the following jsfiddle.

edited Sep 09 '14 at 14:51

Luís Cruz

14,780
16
68
100

answered Sep 09 '14 at 14:30

Haisum Usman

518
5
13

jayesh dhameliya · Answer 6 · 2015-08-10T13:50:18.903

5

<script  type="text/javascript">
    $(document).ready(function () {
        $("#txtDate").datepicker({ dateFormat: 'yy/mm/dd' }).datepicker("setDate", "0");
        $("#txtDate2").datepicker({ dateFormat: 'yy/mm/dd',  }).datepicker("setDate", new Date().getDay+15); });                       </script>

edited Aug 10 '15 at 13:50

answered Aug 10 '15 at 13:19

jayesh dhameliya

101
2
8

score 0 · Answer 7 · answered Dec 08 '16 at 09:57

Code to display current date in element input or datepicker with ID="mydate"

Don't forget add reference to jquery-ui-*.js

    $(document).ready(function () {
        var dateNewFormat, onlyDate, today = new Date();

        dateNewFormat = today.getFullYear() + '-' + (today.getMonth() + 1);

        onlyDate = today.getDate();

        if (onlyDate.toString().length == 2) {
            dateNewFormat += '-' + onlyDate;
        }
        else {
            dateNewFormat += '-0' + onlyDate;
        }
        $('#mydate').val(dateNewFormat);
    });

Jquery DatePicker Set default date

7 Answers7

Linked