CODEWITHSUNDEEP
javascriptvue.js
Geoff_S
Geoff_S

Reputation: 5105

Vue js datepicker, getting only formatted date portion

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?

<datepicker :value="date" @selected="CallDateFunction"></datepicker>

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

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

Upvotes: 4

Views: 5427

Answers (4)

Sham Fiorin
Sham Fiorin

Reputation: 539

The VueDatePicker have a Props to disable TimePicker that is true by default. As :enableTimePicker="false"

Solution:

    <Datepicker v-model="date" :enableTimePicker="false"></Datepicker>

Source: https://vue3datepicker.com/api/props/#enabletimepicker

Upvotes: 2

Basler182
Basler182

Reputation: 7

You can use the javascript function

jsref_toisostring

.

Documentation

Its pretty forward:

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

Upvotes: -1

Simon Thiel
Simon Thiel

Reputation: 3285

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

Upvotes: 0

str
str

Reputation: 45019

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

Upvotes: 4

Related Questions