Vue js datepicker, getting only formatted date portion

Question

I have a working instance of Vue Datepicker, which is functional to the point of picking a date and logging it on select within the console.

The problem is that it logs as Fri Oct 18 2019 15:01:00 GMT-0400 but I need to send the formatted date portion of this like 2019-10-18 only.

This is vuejs-datepicker library and I can't seem to get anything to work with this:

customFormatter(date) {
  return moment(date).format('MMMM Do YYYY, h:mm:ss a');
}

What exactly am I doing wrong here?



date(){
  return {
    date: '',
    ...

CallDateFunction(date){
  console.log(date);
}

user_906113 · Answer

vuejs-datepicker's selected callback is called with either a date object or null.

You can use the following example code to get a string representation of the date only:

CallDateFunction(date){
  if (date) {
    const dateString = date.toISOString().substring(0, 10);
    console.log(dateString);
  } else {
    console.log('null date');
  }
}

user_6080017 · Answer

You can format your date with Date.prototype.toISOString() method and set it to your data:

callDateFunction(rawDate){
  if (rawDate)
    this.formattedDate = rawDate.toISOString().split('T')[0]
}

See also: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

user_10974611 · Answer

You can use the javascript function

jsref_toisostring

.

Documentation

Its pretty forward:

var d = new Date();
var n = d.toISOString();

Vue js datepicker, getting only formatted date portion

3 Answers