Un saludo, estoy trabajando con Larevel
y gradualmente me he ido moviendo de JQuery
a VueJS
(a pesar de que tengo muy pero muy poca experiencia con Vue) sin embargo hoy descubrí que si tienes un id
en una etiqueta html que sea controlada por Vue
inactivo todo el código JQuery
, así que tenía un datepicker
que funcionaba con JQuery
y se me inhabilitó porque deseaba realizar unas validaciones en Vue
.
Ahora opté por reemplazar el datepicker
de jquery
por un datepicker
de bootstrap-vue
, ya logré que cargue la vista pero no logro que con el formulario viaje el campo de la fecha al controlador.
Lo estoy haciendo a través de WebPack
con Laravel Mix
, a continuación el código de mi formulario, podrán ver en la etiqueta <form>
que tengo un id con el que controlo las validaciones del formulario (Esto no lo hago con Laravel Mix) que se llama editSubscriberForm
y otra en el componente datepicker.
<form id="editSubscriberForm" @submit="checkForm" class="user" method="POST" action="/edit_subscriber/{{$email->subscriberemail_id}}" autocomplete="off">
@csrf
<div v-if="errors.length" class="alert alert-danger mt-4">
<b style="color: red">Please correct the following error(s):</b>
<li v-for="error in errors">@{{ error }}</li>
</div>
<div class="form-group">
<label for="email"><strong>Email</strong></label>
<input type="email" class="form-control form-control-user" id="exampleFirstName" placeholder="{{ $email->subscriber_email }}" name="email" v-model="email">
</div>
<div class="form-group">
<label for="name"><strong>Name</strong></label>
<input type="text" class="form-control form-control-user" id="exampleInputEmail" placeholder="{{ $email->subscriber_name }}" name="name" v-model="name">
</div>
<div class="form-group">
<label for="lastname"><strong>Last Name</strong></label>
<input type="text" class="form-control form-control-user" id="exampleFirstName" placeholder="{{$email->subscriber_lastname}}" name="lastname" v-model="lastname">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<label for="phone"><strong>Phone</strong></label>
<input type="text" class="form-control form-control-user" id="phone" placeholder="{{ $email->subscriber_phone }}" name="phone" v-model="phone">
</div>
<div class="col-sm-6">
<label for="whatsapp"><strong>WhatsApp</strong></label>
<input type="text" class="form-control form-control-user" id="whatsapp" placeholder="{{ $email->whatsapp_number }}" name="whatsapp" v-model="whatsapp">
</div>
</div>
<div class="form-group" id="app">
<label for="custom-field4"><strong>Birth Date</strong></label>
<datepicker-vue v-model="birthDate" name="birth_date">
</datepicker-vue>
</div>
<!--<div class="form-group">
<label for="birth-date"><strong>Birth Date</strong></label>
<input type="text" id="datepicker" placeholder="{{$email->birth_date}}"
name="birth_date" v-model="birthDate">
</div>-->
<div class="form-group">
<label for="custom-field1"><strong>Custom Field 1</strong></label>
<input type="text" class="form-control form-control-user" id="customField1" placeholder="{{$email->custom_field1}}" name="custom_field1" v-model="customField1">
</div>
<div class="form-group">
<label for="custom-field2"><strong>Custom Field 2</strong></label>
<input type="text" class="form-control form-control-user" id="customField2" placeholder="{{$email->custom_field2}}" name="custom_field2" v-model="customField2">
</div>
<div class="form-group">
<label for="custom-field3"><strong>Custom Field 3</strong></label>
<input type="text" class="form-control form-control-user" id="customField3" placeholder="{{$email->custom_field3}}" name="custom_field3" v-model="customField3">
</div>
<div class="form-group">
<label for="custom-field4"><strong>Custom Field 4</strong></label>
<input type="text" class="form-control form-control-user" id="customField4" placeholder="{{$email->custom_field4}}" name="custom_field4" v-model="customField4">
</div>
<br>
<div class="row justify-content-center">
<input type="submit" class="btn btn-success btn-user" name="submit-edituser" value="Update User">
<input type="reset" class="btn btn-warning btn-user" value="Clear Form">
</div>
</form>
Y el componente es el que me suministra por defecto Bootstrap Vue:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<b-form-datepicker
v-model="value"
:min="min"
:max="max"
locale="en"
></b-form-datepicker>
</div>
</template>
<script>
export default {
data() {
const now = new Date();
const today = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate()
);
// 15th two months prior
const minDate = new Date(today);
minDate.setMonth(minDate.getMonth() - 2);
minDate.setDate(15);
// 15th in two months
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 2);
maxDate.setDate(15);
return {
value: "",
min: minDate,
max: maxDate
};
}
};
</script>
Ahora no se si quiera si se puede hacer, pero quiero agregar el atributo name a la etiqueta <datepicker-vue></datepicker-vue>
para poder enviarlo en dicho formulario. De no poderse hacer, que solución me recomiendan para resolver el problema con datepicker.