0

I have a Nuxtjs/Vuejs application that contains the input field of type datetime-local. For this field, I would like to add the current DateTime as the default value. I have done similar things in AngularJS but for some reason, it is not working in Vuejs.

Following is the field:

<input v-model="formData.eventtimeSpecific" type="datetime-local" class="form-control" title="Set Specific Event Time">

Following is the JS function for it:

export default {
 data(){
  return {
   formData:{
    eventtimeSpecific: new Date(),
   }
  }
 },
  mounted () {
    const today = new Date()
    this.formData.eventtimeSpecific.setHours(today.getHours(), today.getMinutes(), 0, 0)
  },
}

Similar approach when I tried in Angularjs it was working:

$scope.formdata.eventtimeSpecific = new Date();
var h = $scope.formdata.eventtimeSpecific.getHours();
var m = $scope.formdata.eventtimeSpecific.getMinutes();
$scope.formdata.eventtimeSpecific.setHours(h,m,0,0);

Can someone please assist me in how to set the current DateTime value as the default value for datetime-local type input field?

Current behavior:

enter image description here

Expected behavior:

enter image description here

kissu
  • 40,416
  • 14
  • 65
  • 133
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
  • What do you mean by deafault value? You mean input place holder? – Atzuki Aug 25 '21 at 11:20
  • no no, I want to make sure that when I open the web page the field should be filled with the current date and time. As of now it is empty. – BATMAN_2008 Aug 25 '21 at 11:26
  • @RobinGrundel I have modified the question a bit with expected and current behavior. Can you please have a look and suggest something? – BATMAN_2008 Aug 25 '21 at 11:40
  • Tried to answer, if you have any questions just ask me, if it answered the question, could you accept the answer? – Atzuki Aug 25 '21 at 11:46

1 Answers1

2

The problem is that the this.formData.eventtimeSpecific.setHours(today.getHours(), today.getMinutes(), 0, 0) returns time in this format Wed Aug 25 2021 13:35:49 GMT+0200 but, type="datetime-local" accepts only this format 2021-08-25T13:36

So you have to format it:

    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var localDatetime =
      year +
      '-' +
      (month < 10 ? '0' + month.toString() : month) +
      '-' +
      (day < 10 ? '0' + day.toString() : day) +
      'T' +
      (hour < 10 ? '0' + hour.toString() : hour) +
      ':' +
      (minute < 10 ? '0' + minute.toString() : minute);
    this.formData.eventtimeSpecific = localDatetime;

Hope It helped!

EDIT!

Here is easier way to do it

this.formData.eventtimeSpecific.setMinutes(
      this.formData.eventtimeSpecific.getMinutes() - this.formData.eventtimeSpecific.getTimezoneOffset()
);
this.formData.eventtimeSpecific = this.formData.eventtimeSpecific.toISOString().slice(0, -8);

The slice -8 is there for not including the seconds.

Atzuki
  • 627
  • 1
  • 5
  • 16
  • Thanks a lot for the answer. This is working as expected. Just wanted to confirm if there is any way to shorten it a bit? Because Angular worked with few lines of code so was wondering if there is something similar here as well. Apart from that it's working fine. – BATMAN_2008 Aug 25 '21 at 11:59
  • Actaully there is, give me some time i will edit the answer – Atzuki Aug 25 '21 at 12:03
  • The first snippet of code is really ugly and I'd be totally opposed to suggest it to anybody. Rather use a `date-fns` library or alike. The second one looks better, just hope that it handles all the possible cases. – kissu Aug 25 '21 at 12:13
  • Thanks for the modification. Seems like its working as of now :) – BATMAN_2008 Aug 25 '21 at 12:16
  • I hope it supports all cases, but you should better testing before some production – Atzuki Aug 25 '21 at 12:17