CODEWITHSUNDEEP
javascripthtmljquerydate
Sender
Sender

Reputation: 6858

Set date in input type date

I will set today's date in the datepicker input type date in Chrome.

$(document).ready(function() {
    let now = new Date();
    let today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    console.log(today);
    $('#datePicker').val(today);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="datePicker" type="date">

However, it is not working.

Please try the code snippet in Chrome.

Upvotes: 166

Views: 444601

Answers (14)

Oli Beatson
Oli Beatson

Reputation: 841

I'm doing this with:

date.toISOString().slice(0, 10)

Returns the same result as accepted answer.

Upvotes: 30

webstermath
webstermath

Reputation: 599

A solution in one expression:

$('#datePicker').val(
    new Date()
    .toLocaleDateString("en-US", 
    {year:"numeric",month:"2-digit",day:"2-digit"})
   .replace(/(\d+).(\d+).(\d+)/,"$3-$2-$1")
)

Upvotes: 0

Draco
Draco

Reputation: 138

2021

A great way I found to do this is using locale for the formatting. You can use it in many different ways. This works for when you aren't using the jquery datepicker, but the html datepicker.

  $("#datepickerEnd").val(new Date().toLocaleDateString('en-CA'));//YYYY-MM-dd

Or split up for manipulation or adjustments or other uses.

let theDate = new Date();
  $("#datepickerEnd").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

Manipulation example.

  theDate.setDate(theDate.getDate()-7);
  $("#datepickerStart").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

The 'en-ca' is the needed format for my datepicker. If yours is different you can look for a string format that matches. Since it turns it to a string it does not contain extra information for messing up per region. So, in this way you can use it for purely formatting.

For more information

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Upvotes: 6

Merrin K
Merrin K

Reputation: 1790

Try This,

$('#datePicker').val(moment().format('YYYY-MM-DD'));

Note : You need to add Moment.js as a dependency

Upvotes: 2

int32_t
int32_t

Reputation: 6160

document.getElementById("datePicker").valueAsDate = new Date()

should work.

Upvotes: 185

Fendy
Fendy

Reputation: 31

For me the shortest way to get locale date and in correct format for input type="date" is this :

var d = new Date(); 
var today = d.getFullYear()+"-"+("0"+(d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);

Or this :

var d = new Date().toLocaleDateString().split('/');
var today = d[2]+"-"+("0"+d[0]).slice(-2)+"-"+("0"+d[1]).slice(-2);

Then just set the date input value :

$('#datePicker').val(today);

Upvotes: 3

Muhammad Shahzad
Muhammad Shahzad

Reputation: 111

You can only use date in input type="date" as in format YYYY-MM-DD

I have implemented helper as formatDate in NODE.js express-handlebars, don't need to be worry ... just use format as described in first line.

e.g:

< input type="date" id="date" name="date" class="form-control" value="{{formatDate invoice.date 'YYYY-MM-DD'}}" />

Upvotes: 4

Gourav Makhija
Gourav Makhija

Reputation: 820

var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

Above code will work.

Upvotes: 43

Eda Jede
Eda Jede

Reputation: 81

Datetimepicker always needs input format YYYY-MM-DD, it doesn't care about display format of your model, or about you local system datetime. But the output format of datetime picker is the your wanted (your local system). There is simple example in my post.

Upvotes: 2

aashah7
aashah7

Reputation: 2195

I usually create these two helper functions when using date inputs:

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

You can then set the date input value as:

$('#datePicker').val(dateToInput(new Date()));

And retrieve the selected value like so

const dateVal = inputToDate($('#datePicker').val())

Upvotes: 5

Krutarth Vora
Krutarth Vora

Reputation: 9

Jquery version 

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

Upvotes: -6

Umair Khalid
Umair Khalid

Reputation: 2329

to me the shortest way to solve this problem is to use moment.js and solve this problem in just 2 lines.

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);

Upvotes: 19

nanobar
nanobar

Reputation: 66475

Your code would have worked if it had been in this format: YYYY-MM-DD, this is the computer standard for date formats http://en.wikipedia.org/wiki/ISO_8601

Upvotes: 7

Dhanasekar Murugesan
Dhanasekar Murugesan

Reputation: 3239

Fiddle link : http://jsfiddle.net/7LXPq/93/

Two problems in this:

  1. Date control in HTML 5 accepts in the format of Year - month - day as we use in SQL
  2. If the month is 9, it needs to be set as 09 not 9 simply. So it applies for day field also.

Please follow the fiddle link for demo:

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

$('#datePicker').val(today);

Upvotes: 229

Related Questions