JavaScript date object from <input type=date>

Question

I'm trying to create a javascript date object in the focus.add_days function to add some days to the given date in a element. the problem is that the javascript object doesn't expect a string "Y-m-d" so how can I create the date object without parsing the string "Y-m-d" into pieces, or is the only way?

trigger = {
fecha_ini: function(){
    $('input[name="fecha_ini"]').on('change',function(){
      console.log('hi');
      var fecha_fin = $(':input [name=fecha_fin]');
      var min = $(this).val();
      //here is where i pass the "Y-m-d" string as the date argument
      var max = fechas.add_days(min,31*4);
      fecha_fin.attr('min',min);
      fecha_fin.attr('max',max);
      fecha_fin.val('');
    })
  }
};

fechas = {
  add_days: function addDays(date, days) {
    //here is where i use the string "Y-m-d" to create the date object, but obviusly doesnt work
    var result = new Date(date);
    result.setDate(date.getDate() + days);
    return result;
}
};

trigger.fecha_ini();

have a look at moment.js

hgoebl
– hgoebl

2014-05-13 21:07:00 +00:00
Commented May 13, 2014 at 21:07 — hgoebl
– hgoebl, Commented May 13, 2014 at 21:07

acdcjunior · Accepted Answer · 2018-02-14 21:35:03Z

29

Use valueAsDate:

valueAsDate
Returns: Date

Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.

Demo:

<input type="date" id="d" value="2018-02-14">

<button onclick="console.log( document.getElementById('d').valueAsDate )">
change the date (or not) and click me
</button>

answered Feb 14, 2018 at 21:35

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

Comments

RobG · Accepted Answer · 2014-05-13 21:18:30Z

17

how can I create the date object without parsing the string "Y-m-d" into pieces, or is the only way?

While Date.parse will convert strings in y/m/d/ format to date objects, manual parsing is the only sensible way:

// s is format y-m-d
// Returns a date object for 00:00:00 local time
// on the specified date
function parseDate(s) {
  var b = s.split(/\D/);
  return new Date(b[0], --b[1], b[2]);
}

ES5 specifies a form of ISO 8601 that should be supported by all browsers, however it is not supported consistently or by all browsers in use.

answered May 13, 2014 at 21:18

RobG

148k32 gold badges180 silver badges216 bronze badges

3 Comments

chagovelez1 Over a year ago

thanks, so as i tought i will have to split the text, i just wanted to know if there was a better aproach to the problem.

cgatian Over a year ago

I can't believe this is the correct answer. Why HTML5?!

RobG Over a year ago

@cgatian—"HTML5" is a buzword, it's just HTML. ;-) An ISO 8601 format date parsed by the built–in Date constructor will be treated as UTC, so users west of Greenwich see dates for the day before. But HTML wants them treated as "local"… go figure.

Community · Accepted Answer · 2020-06-20 09:12:55Z

UTC

javascript Date object parses the raw value of <input type=date> in the UTC time zone, always!

new Date(input.value) // Date object, date interpreted as UTC but printed in the local TZ
Date.parse(input.value) // Unix time in ms, date interpreted as UTC

Local Time Zone

If the value of the <input type=date> is meant to be interpreted in the local timezone, then you can force it by adding a time like this:

new Date(input.value+"T00:00") // Date object, date interpreted and printed in the local TZ
Date.parse(input.value+"T00:00") // Unix time in ms, date interpreted as local TZ

Why?

emphasis mine

For example, "2011-10-10" (date-only form), "2011-10-10T14:48:00" (date-time form), or "2011-10-10T14:48:00.000+09:00" (date-time form with milliseconds and time zone) can be passed and will be parsed. When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.

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

omar-ali · Accepted Answer · 2014-11-23 22:53:03Z

3

With me it's working without doing anything.

I just write new Date($('#html5dateinput').val());

that's about it. I get the correct date object. I'm using Google Chrome ver 38 and I tested it on Firefox 33 under Ubuntu 14.04

answered Nov 23, 2014 at 22:53

omar-ali

5174 silver badges14 bronze badges

1 Comment

Imme Over a year ago

This has very inconsistent results. at the time tested on Chrome and new Date("2017-10-19") gives off the correct date in GMT while new Date("2017-10-9") gives the date in my own timezone.

bbsimonbb · Accepted Answer · 2017-09-14 15:31:30Z

2

Use valueAsNumber.

var myDate = new Date(input.valueAsNumber);

answered Sep 14, 2017 at 15:31

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Collectives™ on Stack Overflow

JavaScript date object from <input type=date>

5 Answers 5

Comments

3 Comments

UTC

Local Time Zone

Why?

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

UTC

Local Time Zone

Why?

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related