This is my code.
import Datepicker from 'vuejs-datepicker'
if(this.DOB > this.dateOfJoin){
alert("DOB should not be greater than Date of Join.asd.!")
this.$refs.dob.focus();
}<div class="form-group">
<label class="col-sm-3 control-label">Date of Birth</label>
<datepicker v-model="DOB" name="DOB" ref="dob" class="required"></datepicker>
</div>I am using the vuejs-datepicker component, but I cannot set focus on the datepicker.
After reading through the docs, I recommend a different approach. The datepicker has a disabled property. This allows you to specify a from property that the date cannot be greater than and a to property that the date cannot be earlier than. So if you do not want users to select a date of birth greater than the date they joined, set the from property to the date joined.
In data properties
data:{
dobDisabled:{ from: <date joined> }
}
And on the datepicker,
<datepicker :disabled="dobDisabled"></datepicker>
That will prevent users from picking an invalid date.
Here is an example.
Original
It looks like the datepicker you are using renders a readonly input element, which I expect cannot get focus. In any case, the component which wraps the input does not support a focus method.
<input
:type="inline ? 'hidden' : 'text'"
:class="[ inputClass, { 'form-control' : bootstrapStyling } ]"
:name="name"
:id="id"
@click="showCalendar"
:value="formattedValue"
:placeholder="placeholder"
:clear-button="clearButton"
:disabled="disabledPicker"
:required="required"
readonly>
Instead you might try showing the calendar.
this.$refs.dob.showCalendar()
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments