javascript - Working hours selection? - Stack Overflow

admin管理员组

文章数量:1316675

A reference to another question saw in the stack overflow.

I checked for a solution like this but haven't succeeded yet.

 <div class="form-group">
   <label>Working Hours :</label>
   <div v-for="value in day" class="checkboxFour"<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
     <p>FROM</p>
     <label for="need" style=" width: 20%!important;">{{value.name}}</label>
     <input id="value.from" type="time" v-model="value.from" name="value.from" style="width: 30%!important;">
     <p>TO</p>
     <input id="value.to" type="time" v-model="value.to" name="value.to" style="width: 30%!important;">
     <br>
   </div>
 </div>

My vue js code for the same is

work = new Vue({
  el: "#work",
  data: {
    data: [],
    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}
    ],
    string:'',
  },

  methods: {
    wrkSubmit: function(e){
      var arr = [];
      this.day.map(function(v,i) {
        console.log(v.selected == true);
        if(v.selected == true){
          arr.push(v.val+'&'+v.from+'&'+v.to);
        }
      });

      this.string = arr.join(',');
      var vm = this;
      data = {};
      data['wrk_list'] = this.string;

      $.ajax({
        url: 'http://127.0.0.1:8000/add/workhour/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if(e.status){
            alert("Success")
          } else {
            alert(" Failed") 
          }
        }
      });

      return false;
    },
  } 

If I try this code. I need to select working hours separately for each day I am selecting. Rather I need to choose a time first and hence use that working hour for all the days I am choosing. Also, give an edit option if the user needs to change time. A solution to this problem has given there, but it is not based on the code given above.

Is it possible to have a solution as such? Select a working hour at first and then use it for all the days selecting ie. checkbox, and change values if needed.

Just for experimenting purpose. If it is possible please help me.

A reference to another question saw in the stack overflow.

I checked for a solution like this but haven't succeeded yet.

 <div class="form-group">
   <label>Working Hours :</label>
   <div v-for="value in day" class="checkboxFour"<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
     <p>FROM</p>
     <label for="need" style=" width: 20%!important;">{{value.name}}</label>
     <input id="value.from" type="time" v-model="value.from" name="value.from" style="width: 30%!important;">
     <p>TO</p>
     <input id="value.to" type="time" v-model="value.to" name="value.to" style="width: 30%!important;">
     <br>
   </div>
 </div>

My vue js code for the same is

work = new Vue({
  el: "#work",
  data: {
    data: [],
    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}
    ],
    string:'',
  },

  methods: {
    wrkSubmit: function(e){
      var arr = [];
      this.day.map(function(v,i) {
        console.log(v.selected == true);
        if(v.selected == true){
          arr.push(v.val+'&'+v.from+'&'+v.to);
        }
      });

      this.string = arr.join(',');
      var vm = this;
      data = {};
      data['wrk_list'] = this.string;

      $.ajax({
        url: 'http://127.0.0.1:8000/add/workhour/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if(e.status){
            alert("Success")
          } else {
            alert(" Failed") 
          }
        }
      });

      return false;
    },
  } 

If I try this code. I need to select working hours separately for each day I am selecting. Rather I need to choose a time first and hence use that working hour for all the days I am choosing. Also, give an edit option if the user needs to change time. A solution to this problem has given there, but it is not based on the code given above.

Is it possible to have a solution as such? Select a working hour at first and then use it for all the days selecting ie. checkbox, and change values if needed.

Just for experimenting purpose. If it is possible please help me.

• javascript
• html
• vue.js
• vue-ponent
• vue-router

Share Improve this question Follow edited Mar 2, 2018 at 23:23 Uddhav P. Gautam 7,63633 gold badges5151 silver badges6767 bronze badges asked Feb 22, 2018 at 6:57 codercoder 64233 gold badges1414 silver badges3333 bronze badges 5

• Please re-format your question. – Bhojendra Rauniyar Commented Feb 26, 2018 at 15:29
• means??? I don't understand – coder Commented Feb 27, 2018 at 4:09
• I din't understand your question properly. Please re-format. – Bhojendra Rauniyar Commented Feb 27, 2018 at 5:30
• Select a working hours at first and then use it for all the days I am ticking in check box – coder Commented Feb 27, 2018 at 5:36
• just out of curriosity, why is the Day: paired with a name and value {name:"Sunday",val:1}, Surely day[x].name and day[x].val would be equivalent to day[x].name and var val = x + 1 – DataCure Commented Mar 2, 2018 at 18:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

The answer above covers pretty much the problem, the issues is that if you change your default hour, the selected days will not update unless you uncheck it and check it again, but here are Watchers to the rescue, watch (doh) when the default values changes, then update the selected days.

(open the snippet in full page if you can't see it)

new Vue({
  el: '#app',
  data: function() {
    return {
      day:[
        {name:"Sunday",val:1},
        {name:"Monday",val:2},
      ],
      defaultFrom: '',
      defaultTo: '',
    }
  },
  methods: {
    selectDay: function (item) {
      item.from = this.defaultFrom;
      item.to = this.defaultTo;
    },
    updateSelecteds: function(from, to) {
      for(var i = 0; i < this.day.length; i++) {
        var day = this.day[i];

        if(day.selected) {
            if(from)
            day.from = from;    
          if(to)
            day.to = to;
        }
      }
    }
  },
  watch: {
    defaultFrom: function(newVal, oldVald) {
        this.updateSelecteds(newVal, null)
    },
    defaultTo: function(newVal, oldVald) {
        this.updateSelecteds(null, newVal)
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <div>
    <h3>Working Hours (Default)</h3>
    <p>From: <input type="time" v-model="defaultFrom"/></p>
    <p>To: <input type="time" v-model="defaultTo"/></p>
  </div>

 <div>
   <h3>Days</h3>
  <div v-for="d in day">
    <input type="checkbox" value="d.val" v-model="d.selected" @click="selectDay(d)">
    <label for="need" style=" width: 20%!important;">{{d.name}}</label>
    <span v-if="d.selected">
      <span>From</span>
      <input type="time" v-model="d.from" name="d.from">
      <span>To</span>
      <input type="time" v-model="d.to" name="d.to">
    </span>
  </div>
 </div>
</div>

You need to assign value of your data array when change event of your checkbox is clicked,

Below is working code,

HTML & JS

var Main = {
	data () {
  	return {
      day: [
          {name:"Sunday",val:1, selected:false, from: '02.15', to: '06.01'},
          {name:"Monday",val:2, selected:false, from: '00.00', to: '00.00'},
          {name:"Tuesday",val:3, selected:false, from: '00.00', to: '00.00'},
          {name:"Wednesday",val:4,  selected:false, from: '00.00', to: '00.00'},
          {name:"Thursday",val:5, selected:false, from: '00.00', to: '00.00'},
          {name:"Friday",val:6, selected:false, from: '00.00', to: '00.00'},
          {name:"Saturday",val:7, selected:false, from: '00.00', to: '00.00'}
      ],
      string:'',
      dfrom: '00.00',
      dto: '00.00'
    }
  },
  methods: {
    getData() {
      this.string = ''
      let arr = []
      for (let item of this.day) {
        if (item.selected) {
          arr.push(item.val+'&'+item.from+'&'+item.to)         
        }
      }
      this.string = arr.join(',')
    },
    changeUpdate() {
        
    	for (let item of this.day) {
        if (item.selected) {
          item.from = this.dfrom
          item.to = this.dto
        }
      }
    }
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')

<script src="//unpkg./vue/dist/vue.js"></script>
<script src="//unpkg./iview/dist/iview.min.js"></script>
<div id="app" style="padding:20px">
  <label>Set Default:</label>
  From: <input type="time" v-model="dfrom"/>
  To: <input type="time" v-model="dto"/>

  <br/><hr/>
  <label>Working Hours :</label>
  <div v-for="item in day">
    <input type="checkbox" value="item.val" v-model="item.selected" @change="changeUpdate">
    <label for="need" style=" width: 20%!important;">{{item.name}}</label>
    <span v-if="item.selected">
      <span>FROM</span>
      <input id="value.from" type="time" v-model="item.from" name="item.from">({{item.from}})
      &nbsp;&nbsp; --> &nbsp;&nbsp;
      <span>TO</span>
      <input id="item.to" type="time" v-model="item.to" name="item.to">({{item.to}})
    </span>
  </div>
  <button @click="getData">Save</button>
  <hr><hr>
  Saved data : {{string}}
</div>

Hope this helps. :)

本文标签： javascriptWorking hours selectionStack Overflow