date_edit.vue

<template>
  <div class="datetime-edit">
    <input type="text" class="date" name="date"
           v-on:change="changed" placeholder="01.01.2017" v-model="dateStr">
    <input type="text" class="time" name="date"
           v-on:change="changed" placeholder="13:30" v-model="timeStr">
  </div>
</template>

<script>

function fmt(str, n) {
  if (str.length < n)
    return fmt(str+"0", n)
  else
    return str
}

export default {
  props: ["value"],
  data() {
    return {
      "dateStr": "",
      "timeStr": "",
    };
  },
  watch: {
    "value": function(oldVal, newVal) {
      const matcher = /(\d\d\d\d)-(\d\d)-(\d\d)T(\d\d:\d\d):\d\d/
      let match = matcher.exec(this.value)
      if (match) {
        this.dateStr = `${match[3]}.${match[2]}.${match[1]}`
        this.timeStr = match[4]
      }
    }
  },
  computed: {},
  mounted() { },
  filters: { },
  attached () { },
  methods: {
    changed: function(e) {
      const dateMatcher = /(\d+).(\d+).(\d\d(\d\d)?)/
      const timeMatcher = /(\d\d):(\d\d)/
      let dm = dateMatcher.exec(this.dateStr)
      let tm = timeMatcher.exec(this.timeStr)
      if (dm && tm) {
        let new_val = `${fmt(dm[3],4)}-${fmt(dm[2],2)}-${fmt(dm[1],2)}T${fmt(tm[1],2)}:${fmt(tm[2],2)}:00`
        this.$emit('input', new_val)
      }
    }
  },
  components: {}
}
</script>


<style lang="scss">
  .datetime-edit {
    display: block;

    .date {
      width: 90px;
    }

    .time {
      width: 60px;
    }
  }
</style>