Using Vue.js datepicker to retrieve only the formatted date component

Question

Using Vue.js datepicker to retrieve only the formatted date component

Currently, my Vue Datepicker is functional in that it allows the selection of date and logs it within the console. However, the issue I am facing is that it logs the date as

Fri Oct 18 2019 15:01:00 GMT-0400

, whereas I specifically need only the formatted date portion like 2019-10-18.

I have been trying to use the customFormatter function in the vuejs-datepicker library but so far, nothing seems to be working:

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

What could possibly be going wrong with my approach?

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

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

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

javascript vue.js

Answer 1

Answer №1

vuejs-datepicker has a callback function called selected that is triggered with either a date object or null.

If you want to retrieve the date in string format only, you can utilize the code snippet below:

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

Answer 2

vuejs-datepicker has a callback function called selected that is triggered with either a date object or null.

If you want to retrieve the date in string format only, you can utilize the code snippet below:

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

Answer 3

Answer №2

The VueDatePicker comes with a feature to disable the TimePicker, which is set to true by default. This can be done using

:enableTimePicker="false"

How to resolve this:

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

Reference:

Answer 4

The VueDatePicker comes with a feature to disable the TimePicker, which is set to true by default. This can be done using

:enableTimePicker="false"

How to resolve this:

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

Reference:

Answer 5

Answer №3

To customize the format of your date, you can utilize the Date.prototype.toISOString() method and assign it to your data:

formatDate(value){
  if (value)
    this.customDate = value.toISOString().split('T')[0]
}

For more information, check out: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

Answer 6

To customize the format of your date, you can utilize the Date.prototype.toISOString() method and assign it to your data:

formatDate(value){
  if (value)
    this.customDate = value.toISOString().split('T')[0]
}

For more information, check out: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

Answer 7

Answer №4

If you need to work with dates in JavaScript, there is a handy function you can use.

The function is called

jsref_toisostring

.

You can learn more about this function by visiting the following documentation

This function is pretty straightforward to use:

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

Answer 8

If you need to work with dates in JavaScript, there is a handy function you can use.

The function is called

jsref_toisostring

.

You can learn more about this function by visiting the following documentation

This function is pretty straightforward to use:

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

Using Vue.js datepicker to retrieve only the formatted date component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I would greatly appreciate any recommendations on how to troubleshoot and

What could be causing the <img src= ' '/> tag to malfunction in Express?

Condition-based React state counter starts updating

How to obtain the full path of a file downloaded using a Chrome extension

Is it possible for me to adjust the size of the Facebook login button on my website?

Retrieving information and employing the state hook

Is there a way to determine when the callback function has been called for the final time?

Problem with Angular: ng-show not constantly re-evaluating expression

Issue with Express.js res.append function: Headers cannot be set after they have already been sent

Using two variables for iteration in Vue.js v-for loop

Designing templates for websites and applications using node.js

Adjust the hue of the three.line when a button in three.js is clicked

Show off a font-awesome icon overlapping another image

Unable to send an array through ajax call

What is the best way to define a type for a variable within a function, depending on the type of an argument passed to that function in Typescript?

Development of an Angular 4 application utilizing a bespoke HTML theme

React Navigation ran into an issue with the specified location

Transcluding an element into an ng-repeat template in AngularJS: How can it be done?

Position the previous and next buttons next to the thumbnail images

Best practices for updating the token in an Angular 2/5 application - tips on how, where, and when to refresh