Breaking News: Grepper is joining You.com. Read the official announcement!

How to use flatpickr library for picking dates and times using Vue 3 & Laravel

@CodeGrepperManu answered on April 14, 2023 Popularity 7/10 Helpfulness 2/10

answer How to use flatpickr library for picking dates and times using Vue 3 & Laravel

How to use flatpickr library for picking dates and times using Vue 3 & Laravel

Comment

npm install flatpickr --save

<script setup>  
	import flatpickr from "flatpickr";
	import 'flatpickr/dist/themes/light.css';
	
	//onMounted Hook
    onMounted(() => {
        flatpickr('.flatpickr', {
            enableTime: true,
            dateFormat: 'Y-m-d h:i K',
            defaultHour: 10,
        });
    });
</script>

<div class="row">
   <div class="col-md-6">
      <div class="form-group">
         <label for="date">Start Time</label>
         <input v-model="form.start_time" type="date" class="form-control flatpickr"
            :class="{ 'is-invalid': errors.start_time }" id="date">
         <span class="invalid-feedback">
         {{ errors.start_time }}
         </span>
      </div>
   </div>
   <div class="col-md-6">
      <div class="form-group">
         <label for="time">End Time</label>
         <input v-model="form.end_time" type="time" class="form-control flatpickr"
            :class="{ 'is-invalid': errors.end_time }" id="time">
         <span class="invalid-feedback">
         {{ errors.end_time }}
         </span>
      </div>
   </div>
</div>

Popularity 7/10 Helpfulness 2/10 Language php

Source: Grepper

Tags: flatpickr laravel php picking using

Link to this answer
Share Copy Link

Contributed on Apr 14 2023

@CodeGrepperManu

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

How to use flatpickr library for picking dates and times using Vue 3 & Laravel

Contents

More Related Answers

How to use flatpickr library for picking dates and times using Vue 3 & Laravel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.