How to Show current Date into datepicker

Question

I have a datepicker which I want to show the current date whenever the page loads but when I am doing it with simple input field it is working but the datepicker input field not taking the values

$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
});


var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var month = new Array();
month[0] = "01";
month[1] = "02";
month[2] = "03";
month[3] = "04";
month[4] = "05";
month[5] = "06";
month[6] = "07";
month[7] = "08";
month[8] = "09";
month[9] = "10";
month[10] = "11";
month[11] = "12"; //January is 0!
var mm = month[today.getMonth()];
var yyyy = today.getFullYear();

today = dd + '/' + mm + '/' + yyyy;

console.log(today)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

Now I am getting todays date in variable today now I want to store that value in datepicker input field when the page loads.

What you mean exactly by _but the datepicker input field not taking the values_?? — Zakaria Acharki, Apr 01 '19 at 08:56
@ZakariaAcharki suppose i have calculated todays date and stored it in a variable now i want to populate that value inside the input field of date picker — manish thakur, Apr 01 '19 at 08:58
@manishthakur did you look at https://stackoverflow.com/questions/4915990/set-todays-date-as-default-date-in-jquery-ui-datepicker — S Raghav, Apr 01 '19 at 09:00
I pick the date using the calendar, and I see it displayed in the input field. What's the problem? — Jeremy Thille, Apr 01 '19 at 09:03
@ZakariaAcharki please chek the edit i have used `.val` but not working — manish thakur, Apr 01 '19 at 09:04

Zakaria Acharki · Accepted Answer · 2019-04-01T09:08:50.757

You could use .val() :

Set value on page load :

$(function() {

  $('#deliveryDate').datepicker({
    dateFormat: 'dd/mm/yyyy'
  });

  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var month = new Array();

  month[0] = "01";
  month[1] = "02";
  month[2] = "03";
  month[3] = "04";
  month[4] = "05";
  month[5] = "06";
  month[6] = "07";
  month[7] = "08";
  month[8] = "09";
  month[9] = "10";
  month[10] = "11";
  month[11] = "12"; //January is 0!
  var mm = month[today.getMonth()];
  var yyyy = today.getFullYear();

  today = dd + '/' + mm + '/' + yyyy;

  $('#deliveryDate').val(today);
  console.log(today);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<button id="btn">Set DATE</button>
<br>
<br>
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

Set value on click :

$(function() {

$('#deliveryDate').datepicker({
  dateFormat: 'dd/mm/yyyy'
});

$('#btn').on('click', function() {
  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var month = new Array();

  month[0] = "01";
  month[1] = "02";
  month[2] = "03";
  month[3] = "04";
  month[4] = "05";
  month[5] = "06";
  month[6] = "07";
  month[7] = "08";
  month[8] = "09";
  month[9] = "10";
  month[10] = "11";
  month[11] = "12"; //January is 0!
  var mm = month[today.getMonth()];
  var yyyy = today.getFullYear();

  today = dd + '/' + mm + '/' + yyyy;

  $('#deliveryDate').val(today);
  console.log(today);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<button id="btn">Set DATE</button>
<br>
<br>
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

i was trying the same don't know why it was not working, but now it worked — manish thakur, Apr 01 '19 at 09:08

aviya.developer · Answer 2 · 2019-04-01T09:02:31.570

0

You need to use the defaultDate property when setting up the datepicker.


$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
  defaultDate: '01/01/1970'
});

you could use a date object there as well, or 0 for today.

for today:

$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
  defaultDate: 0
});

* Api Reference Link:  http://api.jqueryui.com/datepicker/#option-defaultDate

edited Apr 01 '19 at 09:02

answered Apr 01 '19 at 08:58

aviya.developer

3,343
2
15
41

but how can i give it a dynamic date? – manish thakur Apr 01 '19 at 08:59
what do you mean by dynamic date? – aviya.developer Apr 01 '19 at 08:59
you could use 0 for today, or +7 for next week, etc. – aviya.developer Apr 01 '19 at 08:59
possible duplication with @https://stackoverflow.com/questions/9921944/set-initial-value-in-datepicker-with-jquery – Houssein Zouari Apr 01 '19 at 09:02

score 0 · Answer 3 · answered Apr 01 '19 at 09:16

$(document).ready(function() {
    var todayDate = (function(){ 
      var d = new Date();
      var day = d.getDate();
      day =  day > 9 ? day : '0' + day ;
      var month = (d.getMonth() + 1);
      month = month > 9 ? month : '0' + month;
      var _value =  day + '/' + month  + '/' + d.getFullYear(); 
      return _value; 
    })();
    $('#deliveryDate').datepicker({
      format: 'dd/mm/yyyy',
      value: todayDate
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<label for="deliveryDate" id="commonHeader"> Delivery Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" width="176" />

How to Show current Date into datepicker

3 Answers3