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

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

Use valueAsNumber.

var myDate = new Date(input.valueAsNumber);