Setting format and value in input type="date"

Question

Is there any way to set the format of <input type="date" /> ? if no then how can i set date in this field using JavaScript in the default format of type="date". how can i get what will be the format of this field?

EDIT : Actually i want to show native date-picker of mobile device that's why i picked this type of input. if is there any alternate for that field that also will b good to have.

Sorry if i said anything stupid. Please guide me

You should clarify what you wish to set as the value of the control. The format for it, in the value attribute, is fixed. Is your question about converting some date value from some format (which?) to that format? — Jukka K. Korpela
– Jukka K. Korpela, Commented May 27, 2013 at 11:22
as wachk said input type date is 'YYYY-MM-DD', initially i wanted to change that format to 'DD-MM-YYYY'. and if we can open the default calendar(date-picker) of mobile device with JS then i can skip using input type date — muneebShabbir
– muneebShabbir, Commented May 27, 2013 at 11:37

wachme · Accepted Answer · 2013-05-27 10:17:05Z

21

The format is YYYY-MM-DD. You cannot change it.

$('#myinput').val('2013-12-31'); sets value

answered May 27, 2013 at 10:17

wachme

2,33720 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

muneebShabbir Over a year ago

on all browsers will it be YYYY-MM-DD ? in case of mobile safari and android ?

Christopher King Over a year ago

the internal value may be read and written as YYYY-MM-DD but that isn't necessarily how it will be presented -- the browser will present the value how it decides to, which in the case of mobile devices will look at the user's locale settings and use that format

Dillon Burnett Over a year ago

my format is set to dd-mm-yyyy ? whats up with this?

Slava Over a year ago

The format is set according to locale of your PC. I am in canada, for me the format of this field is mm/dd/yyyy

kscius Over a year ago

yes, it change according the language and region of the computer

Sarkis Arutiunian · Accepted Answer · 2017-07-20 21:16:57Z

19

new Date().toISOString().split('T')[0];

answered Jul 20, 2017 at 21:16

Sarkis Arutiunian

1,2913 gold badges18 silver badges36 bronze badges

4 Comments

Raman Sinclair Over a year ago

For now is the most beautiful and neat solution.

Herbert Van-Vliet Over a year ago

new Date().toISOString().substring(0,10) is what I use - dunno what's faster to read.

YakovL Over a year ago

hm, this works although returns date in YYYY-MM-DD unlike the value of such input (YYYY-MM-DD).. is this a cross-browser locale-independent solution?

João Pimentel Ferreira Over a year ago

the problem with this solution is that toISOString always presents the timezone in zero UTC offset, thus be aware of that

argie cruz · Accepted Answer · 2015-06-10 05:56:03Z

6

try this :)

function getDefaultDate(){

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

    return today;
}

$(document).ready(function(){ 
    $("#dateid").val( getDefaultDate()); 
});

answered Jun 10, 2015 at 5:56

argie cruz

2233 silver badges8 bronze badges

Comments

Arun Vinoth PrecogTechnologies · Accepted Answer · 2017-10-02 17:33:36Z

3

Canadian locale happens to follow the same format, too:

new Date().toLocaleDateString('en-CA')

edited Oct 2, 2017 at 17:33

Arun Vinoth PrecogTechnologies

22.9k17 gold badges65 silver badges186 bronze badges

answered Oct 2, 2017 at 15:57

MathJ

311 bronze badge

Comments

zevero · Accepted Answer · 2017-06-09 13:12:41Z

2

Easier than the above is

var today = new Date().toISOString().substring(0,10); # "2013-12-31"

answered Jun 9, 2017 at 13:12

zevero

2,41222 silver badges12 bronze badges

Comments

c0nstruct0r · Accepted Answer · 2015-01-30 16:49:56Z

1

It's ugly, but it works. :/

var today = new Date().toLocaleString('en-GB').split(' ')[0].split('/').reverse().join('-');

answered Jan 30, 2015 at 16:49

c0nstruct0r

3022 silver badges6 bronze badges

1 Comment

WeNeigh Over a year ago

That would give you date strings like "2015,-05-01". To remove the unnecessary comma, try this new Date().toLocaleString('en-GB').split(' ')[0].split('/').reverse().join('-').replace(',','');

Community · Accepted Answer · 2017-05-23 12:02:35Z

0

Please check this https://stackoverflow.com/a/9519493/1074944 and try this way also $('input[type="date"]').datepicker().prop('type','text'); check the demo

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 27, 2013 at 10:35

Sender

6,90812 gold badges50 silver badges69 bronze badges

Comments

i.Nemiro · Accepted Answer · 2015-10-16 22:02:59Z

I think this can help

function myFormatDateFunction(date, format) {
     ...
}

jQuery('input[type="date"]')                                             
    .each(function(){                                                              
        Object.defineProperty(this,'value',{                                         
          get: function() {                                   
            return myFormatDateFunction(this.valueAsDate, 'dd.mm.yyyy');      
          },                                                                         
          configurable: true,                                                        
          enumerable : true                                                          
        });                                                                          
      });

Gustavo Morales · Accepted Answer · 2016-05-20 14:48:00Z

0

function getDefaultDate(curDate){
var dt = new Date(curDate);`enter code here`
var date = dt.getDate();
var month = dt.getMonth();
var year = dt.getFullYear();
if (month.toString().length == 1) {
    month = "0" + month
}
if (date.toString().length == 1) {
    date = "0" + date
}
return year.toString() + "-" + month.toString() + "-" + date.toString();
}

In function pass your date string.

edited May 20, 2016 at 14:48

Gustavo Morales

2,6709 gold badges34 silver badges40 bronze badges

answered May 20, 2016 at 13:32

sushant

11 bronze badge

Comments

Simon H · Accepted Answer · 2017-04-17 06:05:21Z

0

@cOnstructOr provided a great idea, but it left a comma in place

var today = new Date().toLocaleString('en-GB').split(' ')[0].slice(0,-1).split('/').reverse().join('-');

fixes that

answered Apr 17, 2017 at 6:05

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

Comments

Saviour Essien · Accepted Answer · 2019-04-29 16:09:06Z

0

What you want to do is fetch the value from the input and assign it to a new Date instance.

let date = document.getElementById('dateInput');

let formattedDate = new Date(date.value);

console.log(formattedDate);

answered Apr 29, 2019 at 16:09

Saviour Essien

12 bronze badges

Comments

maryrobicodes · Accepted Answer · 2021-03-10 10:09:21Z

0

Here is a simple answer,

Since this is a string, we can use Javascript String slice method to rearrange the characters

<input type="date" id="idate" name="tno"><br>
<button onclick="run()">Run</button>

<p id="demo"></p>

<script>
function run() {
var d = document.getElementById("idate").value;

document.getElementById("demo").innerHTML = d.slice(8, 10) + "/" + d.slice(5, 7) + "/" + d.slice(0, 4);
}
</script>

Source

https://www.w3schools.com/jsref/jsref_slice_string.asp

answered Mar 10, 2021 at 10:09

maryrobicodes

291 bronze badge

Collectives™ on Stack Overflow

Setting format and value in input type="date"

12 Answers 12

5 Comments

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related