I'm trying to trigger a method when a date is changed in my HTML. When I change the date it is updating the model selectedDate on the screen but its like my watch method just isn't seeing the change at all.
<div class="col-md-8">
<h3>Daily Summary - {{ selectedDate }}</h3>
</div>
<div class="col-md-4">
<p>Change date</p>
<input type="date" name="date" v-model="selectedDate">
</div>
My watch code:
data() {
return{
selectedDate: null
}
},
watch: {
selectedDate: function(){
console.log('date changed');
}
},
Edit: To give more context to the question, I'm running this code inside a template using export like so:
<template>
<div>
<div class="col-md-8">
<h3 v-on:click="testEvent(event)">Daily Summary - <span v-if="data.nxt_summary">{{ selectedDate }}</span></h3>
</div>
<div class="col-md-4">
<p>Change date</p>
<input type="date" name="date" v-model="selectedDate">
</div>
</div>
</template>
<script>
export default {
data() {
return{
selectedDate: null
}
},
watch: {
selectedDate: function(){
console.log('date changed');
}
},
}
</script>
It doesn't look like type="date" fires an input event till there's a whole date in the input. If you use the picker it'll fire, but if you update each piece separately it won't fire till the month, day AND year is filled in. https://jsfiddle.net/tg2s4kkq/1/
What I'd do it set selectedDate to a default value and mark the field required so the user can't empty it.
https://jsfiddle.net/tg2s4kkq/3/
Related
So I'm working on an Angular app and I have these two date input fields:
<div class="col-lg-3">
<div> {{ dataInizioLabel }} </div>
<input required type="datetime-local" name="dataInizio" id="dateInput"
[ngModel]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"
(ngModelChange)="manageDateChange($event, dataInizio)" #dataInizio="ngModel">
<small class="text-danger" *ngIf="dataInizio.errors">Campo obbligatorio</small>
</div>
<div class="col-lg-3">
<div> {{ dataFineLabel }} </div>
<input required type="datetime-local" name="dataFine" [ngModel]="serverEvent.dataFine | date:'yyyy-MM-ddTHH:mm'" id="dataFine"
(ngModelChange)="manageDateChange($event, dataFine)" #dataFine="ngModel">
<small class="text-danger" *ngIf="dataFine.errors">Campo obbligatorio</small>
</div>
manageDateChange() JS (incomplete):
manageDateChange(date, inputField) {
if (date) {
this.serverEvent[inputField.name] = new Date(date);
}
let inizio = new Date(date.val())
console.log(inizio)
}
I can't find a way to make so the dataInizioLabel uptades the dataFineLabel field with his same date when it gets changed. For example, if dataInizioLaber gets set to 24/04/2022, I'd need dataFineLabel to self update to the same date.
Also, console says date.val() can't work and gives an error, so I don't think that's the right way to get the date value from the input field.
You might want to try to use a two-way binding on your ngModel like this:
[(ngModel)]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"
Jquery date picker showing strange behavior inside the v-for loop in my vue.js component. Outside of the loop, it is working fine and date picker is showing. But, inside my v-for loop, it is not picking date picker as expected.
Here is my working code of date picker. (Working Case)
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
Date picker not working in this case (Non-working case)
<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
</div>
Here is my Jquery code of datepicker.
$(".datepickere").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
display("Change event");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
Although I have given a class instead of an id, still problem is the same. What is going wrong?
seems to be a typo in your code. Change datepickere to datepicker and it should work. Also, if I was you, I would use a vue compatible datepicker such as https://www.npmjs.com/package/vuejs-datepicker.
I have a problem with storing value to formcontrol using datepicker. Here is the example:
<div class="col-12 scol-sm-6 col-md-3 col-xl-3">
<div class="form-group">
<label>Эхлэх огноо</label>
<input
id="salaryTransferStartDate"
class="form-control daterange-basic"
#salaryTransferStartDate
/>
</div>
</div>
In my ts file:
$("#salaryTransferStartDate").daterangepicker({
singleDatePicker: true,
startDate: moment().format("YYYY-MM-DD"),
locale: {
format: "YYYY-MM-DD"
},
onClose: dateText => {
this.configurationForm
.get("salaryTransferStartDate")
.setValue(dateText);
}
});
But my formControl value = null. What am i doing wrong ? I am using angular 7.
It is always better to avoid use of Javascript in angular.
In this case on select of datepicker usually change not reflected in Model as you are not typing values using keyboard.
can you try:-
$('#salaryTransferStartDate').datepicker({
format: "dd/mm/yyyy",
autoclose: true
})
.on('changeDate', function(e){
e.target.dispatchEvent(new Event('input'));
e.target.dispatchEvent(new Event('change'));
});;
<input type="text" size="5" maxlength="100" id="yuyuy"
[ngModel]="fromDate" class="form-control cal_date"
placeholder="Enter {{displayName}}">
The answer is for template driven. you can also test in reactive and let me know. I also got stuck in similar situation and trigger input work for me. If have issues let me know
I am using vuelidate to validate input field, the input field is dynamic i.e the value in input field is filled dynamically with jsonData using v-model
What I am trying to do is
On blur I want to show error if there is any, but here when I type anything inside my input field it shows nothing
what I am doing:- my input field
<div v-for="data in displayProfileData" :key="data.email" >
<p>{{data}}</p>
<div class="row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="phoneNo">Name</label>
<input v-model="data.businessname"
#blur="$v.form.name.$touch()"
type="text"
class="form-control" name="name"
id="name">
<div v-if="$v.form.name.$error" class="form-error">
<span v-if="!$v.form.name.required" class="text-danger">nameis required</span>
</div>
</div>
<p>{{$v}}</p>
</div>
</div>
I am displaying $v on UI to check but when I type in input field no changes is been detected
My script code :-
<script>
import { required,minLength } from 'vuelidate/lib/validators'
import axios from '../../services/base-api'
export default {
data (){
return{
form :{
name:''
},
displayProfileData:[]
}
},
validations: {
form: {
name:{required},
}
},
created(){
this.userId = localStorage.getItem('user-Id')
axios().post('/api/v1/Profile/getProfileData',this.userId)
.then(res=>{
console.log(res.data)
this.displayProfileData=res.data
})
.catch(err=>{
this.$toasted.error(err,{duration:2000})
})
}
}
</script>
My data from server is in format like this { "businessid": "8126815643", "businessname": "manish",}
Issue
Initially when page loads in input field it shows manish so when I change it to something else and focus out it shows error that name is required I don't what is going wrong
2:Dynamic Form- Check Here
please check this
According to vuelidate's documentation, you should make the following changes:
<div v-for="data in $v.displayProfileData.$each.$iter" :key="data.email">
...
<input v-model="data.businessname.$model"
#blur="data.businessname.$touch()"
type="text"
class="form-control"
name="name"
id="name"
>
<div v-if="data.businessname.$error" class="form-error">
<span v-if="!data.businessname.required" class="text-danger">name is required</span>
</div>
...
</div>
validations: {
displayProfileData: {
//required,
//minLength: minLength(1),
$each: {
businessname: { required }
}
}
}
Attach my codesandbox example link
How can i let Vue know that the datepicker changed the date?
new Vue({
el: '#app',
data: {
termin: ''
},
computed: {
},
methods: {
}
})
Just an input field:
<div id="app">
<div class="uk-form-icon"><i class="uk-icon-calendar"></i>
<input name="termin" v-model="termin" value="" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required">
</div>
<p>
Date: {{termin}}
</p>
</div>
If you chage the input field by hand Vue gets it, but not after triggering the picker.
https://jsfiddle.net/Honkoman/dfohvcpk/
The quickest way to do this would be to add a handler for the hide event from the datepicker in your Vue.
mounted(){
$(this.$el).on('hide.uk.datepicker', e => this.termin = this.$refs.date.value)
}
Here is your fiddle updated to do that.
However, traditionally, you should wrap jQuery interaction in a wrapper component.
Vue.component("datepicker",{
props:["value"],
template:`
<input ref="date" name="termin" :value="value" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required">
`,
mounted(){
$(this.$el).on('hide.uk.datepicker', e => this.$emit('input', this.$refs.date.value))
}
})
And your template would become
<div class="uk-form-icon"><i class="uk-icon-calendar"></i>
<datepicker v-model="termin"></datepicker>
</div>
And here is your fiddle updated to work with that.
UiKit events + Vue.set :
FIDDLE
$('input[name="termin"]').on('hide.uk.datepicker', function(){
Vue.set(vm, 'termin', document.querySelector('input[name="termin"]').value)
});