Cannot set properties of null (setting '0') when trying to pass data into datetime field

Cphml444 0
Viewed 20

I am working on a housing application that currently uses a datetime field for move in date and move in time. I don't really like how the datetime format looks on the frontend, but I want to keep it in my SQL database, so my idea on how to execute this was:

1: When page is loaded, split the datetime field into seperate date and time fields. 2: If the user make changes to the date or time and clicks "update", then the fields will be merged back into the datetime field.

I thought it would be simple, but when I try to do this, I get the error "Cannot set properties of null (setting '0')"

Here is a simplified version of my code. I am using Vue Bootstrap for this application.

<template>
        <b-form-row>
          <b-col lg="6">
            <b-form-group :label="$t('Date and time')">
              <date-time-picker
                v-model="tenancy.moveInDate"
                :format="format"
                :show-second="false"
                type="datetime"
              />
            </b-form-group>
          </b-col>
        </b-form-row>

        <b-form-row>
          <b-col lg="6">
            <b-form-group :label="$t('Move in date')">
              <b-date-picker  v-model="tenancy.date"/>
            </b-form-group>
          </b-col>
        </b-form-row>

        <b-form-row>
          <b-col lg="6">
            <b-form-group  :label="$t('Move in time')">
              <b-time-picker  v-model="tenancy.time"  />
            </b-form-group>
          </b-col>
        </b-form-row>
        
 </template>
 
 export default {
     data() {
      return {
        tenancy: {
          moveInDate: moment('DD/MM/YYYY HH:mm'),
          date: moment('DD/MM/YYYY'),
          time: moment('HH:mm'),

        }
      }
    },
    computed: {
      format() {
        return localeOptions[this.$i18n.locale].datepicker.format + ' LT';
      }
    },
    methods: {
      update(){
        this.tenancy.moveInDate[0] = this.tenancy.date;
        this.tenancy.moveInDate[1] = this.tenancy.time;
       }
    },
   created() {
      this.tenancy.date = tenancy.moveInDate.split('')[0]
      this.tenancy.time = tenancy.moveInDate.split('')[1]
    }
 }

datetime vuejs2 vue.js
1 Answers

Dates are never going to be simple, sorry. You're off to a bad start attacking them with string methods. Moment is deprecated, and you should be able to do without it. This is doesn't directly fix your problem, but I really recomend you set yourself some rules for date handling. Mine would be: dates should be date objects in your model, formatted at the last moment for display. On the wire, they should be ISO UTC date strings. In the database, they should be UTC datetimes. If you then need to split a datetime into date and time, the date object has all the methods you need: toLocaleTimeString(), toLocaleString(), toLocaleDateString() etc.

bbsimonbb0
Related