All Projects → zokioki → flatpickr-rails

zokioki / flatpickr-rails

Licence: MIT license
This gem packages flatpickr's assets for drop-in use in Rails applications.

Programming Languages

ruby
36898 projects - #4 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to flatpickr-rails

NodaTimePicker
A Date/Time picker component library for Blazor using NodaTime
Stars: ✭ 49 (+68.97%)
Mutual labels:  timepicker, datepicker
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (+496.55%)
Mutual labels:  timepicker, datepicker
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (+303.45%)
Mutual labels:  timepicker, datepicker
Datetimepicker
📅 Date and Time Picker
Stars: ✭ 90 (+210.34%)
Mutual labels:  timepicker, datepicker
vue3-date-time-picker
Datepicker component for Vue 3
Stars: ✭ 157 (+441.38%)
Mutual labels:  timepicker, datepicker
Materialdaterangepicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker
Stars: ✭ 1,315 (+4434.48%)
Mutual labels:  timepicker, datepicker
React Datepicker
📅 React DatePicker Library (Flexible, Reusable)
Stars: ✭ 165 (+468.97%)
Mutual labels:  timepicker, datepicker
Persianrangedatepicker
Persian range date picker for android.
Stars: ✭ 48 (+65.52%)
Mutual labels:  timepicker, datepicker
Flatpickr
lightweight, powerful javascript datetimepicker with no dependencies
Stars: ✭ 14,575 (+50158.62%)
Mutual labels:  timepicker, datepicker
Material Ui Pickers
Date & Time pickers, built with ❤️ for @material-ui/core
Stars: ✭ 2,291 (+7800%)
Mutual labels:  timepicker, datepicker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+4344.83%)
Mutual labels:  timepicker, datepicker
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (+100%)
Mutual labels:  timepicker, datepicker
Circularpicker
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter.
Stars: ✭ 73 (+151.72%)
Mutual labels:  timepicker, datepicker
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (+296.55%)
Mutual labels:  timepicker, datepicker
Datetimepicker
This is a custom android holo datepicker timepicker
Stars: ✭ 56 (+93.1%)
Mutual labels:  timepicker, datepicker
Ng2 Datetime
Datetime picker plugins wrapper for Angular2+
Stars: ✭ 165 (+468.97%)
Mutual labels:  timepicker, datepicker
Vue Datetime
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.
Stars: ✭ 928 (+3100%)
Mutual labels:  timepicker, datepicker
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+27044.83%)
Mutual labels:  timepicker, datepicker
Android Pickerview
This is a picker view for android , support linkage effect, timepicker and optionspicker.(时间选择器、省市区三级联动)
Stars: ✭ 13,003 (+44737.93%)
Mutual labels:  timepicker, datepicker
nativescript-datetimepicker
Plugin with date and time picking fields
Stars: ✭ 26 (-10.34%)
Mutual labels:  timepicker, datepicker

flatpickr

Gem Version

Flatpickr is a lightweight and powerful datetimepicker with no dependencies. This gem packages flatpickr's assets for drop-in use in Rails applications.

Installation

Add this line to your application's Gemfile:

gem 'flatpickr'

And then execute:

$ bundle

In your application.css, add the following:

*= require flatpickr

/* Optionally, you can include any of the flatpickr themes by adding in their styles, like so: */
*= require flatpickr/themes/dark

And in your application.js:

//= require flatpickr

document.addEventListener('DOMContentLoaded', function() {
  flatpickr('.your-selector');
})

Using Plugins

Flatpickr provides plugins which expand the library's functionality. To include the confirmDate plugin, for example, you must require the necessary assets and specify the plugin during initialization:

In your application.css:

*= require flatpickr
*= require flatpickr/plugins/confirmDate/confirmDate

In application.js:

//= require flatpickr
//= require flatpickr/plugins/confirmDate/confirmDate

document.addEventListener('DOMContentLoaded', function() {
  flatpickr('.your-selector', {
    enableTime: true,
    plugins: [
      new confirmDatePlugin({})
    ]
  })
})

See flatpickr's official docs for more configuration and usage details.

License

The gem is available as open source under the terms of the MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].