admin管理员组文章数量:1316523
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.
Share Improve this question edited Mar 2, 2018 at 23:23 Uddhav P. Gautam 7,6363 gold badges51 silver badges67 bronze badges asked Feb 22, 2018 at 6:57 codercoder 6423 gold badges14 silver badges33 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
2 Answers
Reset to default 7 +50The 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}})
-->
<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
版权声明:本文标题:javascript - Working hours selection? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742006902a2412141.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论