[Vuejs]-How can I choose a time at first and use it for all the days in vue js?

by

0👍

Make a component to represent a Day, that receives the default time values as props. As data items, it has a boolean for whether to use the default values, and values for from and to to use if it’s not using the defaults.

work = new Vue({
      el: "#work",
      data: {
        defaultWorkingHours: {
          from: null,
          to: null
        },
        day: [{
            name: "Sunday",
            val: 1
          },
          {
            name: "Monday",
            val: 2
          },
          {
            name: "Tuesday",
            val: 3
          },
          {
            name: "Wednesday",
            val: 4
          },
          {
            name: "Thursday",
            val: 5
          },
          {
            name: "Friday",
            val: 6
          },
          {
            name: "Saturday",
            val: 7
          }
        ],
        components: {
          dayComponent: {
            template: "#day-template",
            props: ['name', 'val', 'defaultFrom', 'defaultTo'],
            data() {
              return {
                useDefaultTimes: true,
                from: null,
                to: null
              };
            }
          }
        }
      });
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="work">
  <div class="form-group">
    <label>Working Hours :</label>
    <label>
      From
      <input type="time" v-model="defaultWorkingHours.from">
    </label>
    <label>
      To
      <input type="time" v-model="defaultWorkingHours.to">
    </label>
    <div v-for="d in day" class="checkboxFour">
      <day-component :name="d.name" :val="d.val" :default-from="defaultWorkingHours.from" :default-to="defaultWorkingHours.to"></day-component>
    </div>
  </div>
</div>

<template id="day-template">
  <div>
    {{name}}
    <input type="checkbox" v-model="useDefaultTimes">
    <label>
      FROM
      <template v-if="useDefaultTimes">
        <input :value="defaultFrom" name="value.from" disabled>
      </template>
<template v-else>
        <input type="time" v-model="from" name="value.from">
      </template>
</label>
<label>
      FROM
      <template v-if="useDefaultTimes">
        <input :value="defaultTo" name="value.to" disabled>
      </template>
      <template v-else>
        <input type="time" v-model="to" name="value.to">
      </template>
    </label>
</div>
</template>
👤Roy J

Leave a comment