Stack Overflow
Stack Overflow

Questions tagged [flatpickr]

A lightweight Javascript date-time picker with no external dependencies.

The last datetime picker you'll ever need.

  • Lightweight, with no dependencies (like jQuery)
  • Native Android+iOS datetime widget support
  • Works with IE9 and up
  • Range calendar
  • Smart, sensible defaults
  • Comes with 8 themes, 37 locales, and SVG icons

See: https://flatpickr.js.org/

312 questions
20
votes
9 answers

Convert date format in Javascript using VueJS

I have a date format of 19 Oct 2017 and want to convert it to this format 20171019 Is there a quick way of doing this? I am using FlatPickr in VueJs. Please find my code below if its any help. import flatPickr from 'vue-flatpickr-component'; import…
user6189981
14
votes
1 answer

Calendar is not displaying correctly using flatpickr

I installed flatpickr by npm install flatpickr. Calender is displaying like when click on input control var React = require('React'); var ReactDOM = require('ReactDOM'); var Flatpickr = require('flatpickr'); var Calender = React.createClass({ …
user2194838
  • 337
  • 2
  • 8
  • 24
9
votes
1 answer

How can I change flatpickr default timezone

I am using flatpickr in order to set a date, onChange: function(selectedDates, dateStr, instance) { var myDate = selectedDates[0]; First I am tracing selecteDate[0] and gives me a string Thu Dec 20 2018 00:00:00 GMT-0500 (GMT-05:00) Then I am…
Petran
  • 7,677
  • 22
  • 65
  • 104
9
votes
8 answers

Make flatpickr input required

I'm using the amazing flatpickr on a project and need the calendar date to be mandatory. I'm trying to have all the validation in native HTML, so I was naively trying with just adding the required attribute to the input tag, but that doesn't appear…
stassinari
  • 543
  • 2
  • 5
  • 8
9
votes
1 answer

How to add vanilla .js to a custom Vue component

I'm trying to add a simple date-picker to a custom vue component. I'm not using webpack so I want to avoid ready made .vue components and I rather understand how to add simple javascript to vue. I'm following this official vue tutorial I've also…
Costantin
  • 2,486
  • 6
  • 31
  • 48
7
votes
1 answer

How to make flatpickr datepicker reactive in livewire / alpinejs app?

In my laravel 7 /livewire 1.3 / alpinejs 2 project I added flatpickr datepicker from https://flatpickr.js.org datepicker works ok, but reactive does not work. In the code below $current_operation_date - public var in the component and is is modified…
mstdmstd
  • 2,195
  • 17
  • 63
  • 140
7
votes
6 answers

Flatpickr Clear Button

I'm loading flatpickr using this: