Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi, I have a form where i would like to use 2 datepicker. datepicker itself works fine, but when i would like to append a clear button to the input fields it appends to 2 buttons to both fields. Is there any way to append only 1 clear button to each field which clears the input field where it has been append to?
Her is my app.js:
require('./bootstrap');
import 'fontawesome-pro/js/all.min.js';
window.Vue = require('vue');
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
Vue.use(flatPickr);
class Errors {
constructor() {
this.errors = {};
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
this.errors = errors;
}
clear(field) {
delete this.errors[field];
}
}
new Vue({
el: '#regapp',
data: {
username: '',
email: '',
password: '',
password_confirmation: '',
image: '',
image2: '',
errors: new Errors(),
date: null,
date2: null,
config: {
enableTime: true,
dateFormat: "d.m.Y H:i",
minuteIncrement: 60,
onReady: function ( dateObj, dateStr, instance ) {
const $close = $( ' <button class="btn btn-danger" type="button"><i class="far fa-window-close"></i></button>' )
.on( 'click', () => {
instance.clear();
instance.close();
} )
.appendTo( $( '.close' ) );
}
}
},
methods: {
// form submit -------------------
onSubmit(){
axios.post('register', this.$data )
.then(response => alert('Success'))
.catch(error => this.errors.record(error.response.data.errors));
},
// logo upload ---------------------------
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function (e) {
this.image = '';
},
// Imagae upload ----------------------------
onFileChange2(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage2(files[0]);
},
createImage2(file) {
var image2 = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image2 = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage2: function (e) {
this.image2 = '';
},
}
});
});
Here is my form
<div id="regapp">
<form method="POST" action="{{ route('register') }}" aria-label="{{ __('Register') }}" id="posta" enctype="multipart/form-data" @submit.prevent="onSubmit" @keydown="errors.clear($event.target.name)">
@csrf
<h4 style="margin-bottom:-15px;margin-left:8px;"> <span> <strong> Acoount details</strong> <small class="text-warning">all field required </small> </span> </h4>
<div class="formkeret mb-4">
{{--username--}}
<label for="username" class="form-label mt-3"><strong><span class="text-warning">* </span>User Name </strong></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-user"></i></div>
</div>
<input id="username" placeholder="Username" type="text" class="form-control" name="username" v-model="username">
<div class="invalid-feedback" v-text="errors.get('username')">
</div>
</div>
{{--email--}}
<label for="email" class="mt-3 form-label"><strong><span class="text-warning">* </span> E-mail Address </strong></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-envelope"></i></div>
</div>
<input id="email" placeholder="e-mail address" type="email" class="form-control" name="email" v-model="email">
<div class="invalid-feedback" v-text="errors.get('email')">
</div>
</div>
{{--password--}}
<label for="password" class="col-input-label mt-3"><strong><span class="text-warning">* </span> Password <small>Minimum 6 characters and must contain at least one uppercase/lowercase letters and one number. </small></strong></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-unlock"></i></div>
</div>
<input id="password" placeholder="Password" type="password" class="form-control" name="password" v-model="password" >
<div class="invalid-feedback" v-text="errors.get('password')">
</div>
</div>
{{--passwordconfirmation--}}
<label for="password-confirm" class="label mt-3"><strong><span class="text-warning">* </span> Confirm Password </strong></label>
<div class="input-group mb-5">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-unlock"></i></div>
</div>
<input id="password-confirm" placeholder="Confirm Password" type="password" class="form-control" name="password_confirmation" v-model="password_confirmation">
<div class="invalid-feedback" v-text="errors.get('password')">
</div>
</div>
<div class="form-group mt-3">
<label for="fileUpload"><strong>Please Upload a logo - <small>For best quality logo size 1 by 1 (100px X 100px - 900px X 900px)</small> *</strong></label>
<input type="file" class="form-control {{ $errors->has('logoupload') ? ' is-invalid' : '' }}" value="{{ old('logoupload') }}" @change="onFileChange" name="logoupload" id="logo">
@if ($errors->has('logoupload'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('logoupload') }}</strong>
</span>
@endif
</div>
<div class="">
<div class="preview">
<div v-if="image">
<img :src="image" />
</div>
</div>
<div v-if="image">
<button type="reset" class="btn btn-danger mt-2" onclick="event.preventDefault();document.getElementById('logo').value='';" @click="removeImage">Remove logo</button>
</div>
</div>
<div class="form-group mt-3">
<label for="logoUpload"><strong>Please Upload an image - <small>For best quality image size 3 by 2 (300px X 200px - 3000px X 2000px)</small> *</strong></label>
<input type="file" class="form-control {{ $errors->has('imageupload') ? ' is-invalid' : '' }}" value="{{ old('imageupload') }}" @change="onFileChange2" name="imageupload" id="image">
@if ($errors->has('imageupload'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('imageupload') }}</strong>
</span>
@endif
</div>
<div class="" style="width:306px!important;">
<div class="preview2">
<div v-if="image2">
<img :src="image2" />
</div>
</div>
<div v-if="image2">
<button type="reset" class="btn btn-danger btn-block mt-2" onclick="event.preventDefault();document.getElementById('image').value='';" @click="removeImage2">Remove image</button>
</div>
</div>
</div>
{{--Dates--}}
<h4 style="margin-left:8px;"> <span> <strong> Dates </strong> <small class="text-warning">please select </small> </span> </h4>
<label class="label is-small"><strong><span class="text-warning">* </span> Start Date</strong></label>
<div class="input-group mb-3">
<flat-pickr class="form-control {{ $errors->has('prestartdate') ? ' is-invalid' : '' }}" v-model="date" value="{{ old('prestartdate')}}" :config="config" placeholder="Select a date" name="prestartdate" > </flat-pickr>
<div class="input-group-append close">
</div>
</div>
<label class="label is-small"><strong><span class="text-warning">* </span> End Date</strong></label>
<div class="input-group mb-3">
<flat-pickr class="form-control {{ $errors->has('preenddate') ? ' is-invalid' : '' }}" v-model="date2" value="{{ old('preenddate')}}" :config="config" placeholder="Select a date" name="preenddate" ></flat-pickr>
<div class="input-group-append close">
</div>
</div>
{{--submit btn--}}
<div class="input-group mb-3 mt-5">
</div>
<div class="">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
It seems that it's currently not possible! You have two options here
Create a new issue on the github page and explain what you try to achieve. Maybe someone can help you out in there ;)
Fork the repository, build the functionality and then send in a PR.
well it tund out that if i appndto the instance container the it works as is expected
new Vue({
el: '#regapp',
data: {
username: '',
email: '',
password: '',
password_confirmation: '',
image: '',
image2: '',
errors: new Errors(),
date: null,
date2: null,
config: {
enableTime: true,
dateFormat: "d.m.Y H:i",
minuteIncrement: 60,
onReady: function ( dateObj, dateStr, instance ) {
const $close = $( ' <button class="btn btn-danger" type="button"><i class="far fa-window-close"></i></button>' )
.on( 'click', () => {
instance.clear();
instance.close();
} )
.appendTo( $( instance.calendarContainer ) );
}
}
},
Please or to participate in this conversation.