adrienpoly / Rails_stimulus_flatpickr
Advanced datepicking example app with Stimulus + Flatpickr + Turbolinks
Stars: ✭ 48
Programming Languages
ruby
36898 projects - #4 most used programming language
Projects that are alternatives of or similar to Rails stimulus flatpickr
Tracks
Tracks is a GTD™ web application, built with Ruby on Rails
Stars: ✭ 991 (+1964.58%)
Mutual labels: rails
Chatwoot
Open-source customer engagement suite, an alternative to Intercom, Zendesk, Salesforce Service Cloud etc. 🔥💬
Stars: ✭ 11,554 (+23970.83%)
Mutual labels: rails
Graphql Rails Generators
Graphql Rails Scaffold™. Automatically generate GraphQL types from your rails models.
Stars: ✭ 47 (-2.08%)
Mutual labels: rails
Nerdnews
A free and open source social news website focusing on computer science and FOSS news for Persian community
Stars: ✭ 41 (-14.58%)
Mutual labels: rails
Super
A simple, powerful, single dependency Rails admin framework
Stars: ✭ 43 (-10.42%)
Mutual labels: rails
Creds
Encrypted & plain text credentials for multiple environments
Stars: ✭ 38 (-20.83%)
Mutual labels: rails
Wheelmap
♿️ Source code of classic wheelmap.org (deprecated)
Stars: ✭ 47 (-2.08%)
Mutual labels: rails
Ml competition platform
Kaggle-like machine learning competition platform
Stars: ✭ 42 (-12.5%)
Mutual labels: rails
Furatto Rails Start Kit
A rails app with Furatto, Devise, and Facebook Authentication perfect for hackathons!
Stars: ✭ 46 (-4.17%)
Mutual labels: rails
Ar Uuid
Override migration methods to support UUID columns without having to be explicit about it.
Stars: ✭ 41 (-14.58%)
Mutual labels: rails
Niklick
Rails Versioned API solution template for hipsters! (Ruby, Ruby on Rails, REST API, GraphQL, Docker, RSpec, Devise, Postgress DB)
Stars: ✭ 39 (-18.75%)
Mutual labels: rails
Modern Datatables
They are many ways to build reactive web interfaces but do we really need to add the complexity of JavaScript frameworks like Vue.js or React?
Stars: ✭ 48 (+0%)
Mutual labels: rails
Rapporteur
A Rails Engine which provides a customizable status page on your application.
Stars: ✭ 47 (-2.08%)
Mutual labels: rails
Drag and drop active storage
A demo drag and drop image upldate Ruby on Rails app using Stimulus.js, DropZone.js, and ActiveStorage
Stars: ✭ 46 (-4.17%)
Mutual labels: rails
Rails Showcase of Stimulus-Flatpickr wrapper
This project is in support of the article I published on dev.to https://dev.to/adrienpoly/introducing-stimulus-flatpickr-wrapper--5c23
This example shows how to use stimulus-flatpickr wrapper in a Rails app to have an advanced date picking solution with:
- localization of the datepicker 🌍
- localization of the date formats 🌍
- availabilities in the date picker 📅
- Fully boosted with Turbolinks 🚀
What does it takes to make this app
The date picker field
<%= form_with model: appointment do |f| %>
<%= f.text_field :start_at,
placeholder: t(".select"),
data: {
controller: "flatpickr",
flatpickr_alt_format: t("date.formats.long"),
flatpickr_alt_input: true,
flatpickr_default_date: appointment.start_at,
flatpickr_locale: locale,
flatpickr_show_months: 2,
flatpickr_min_date: Time.zone.now,
flatpickr_max_date: Time.zone.now + 60.days,
flatpickr_disable: Appointment.up_comings(60).pluck(:start_at) - [appointment.start_at],
} %>
<% end %>
and the stimulus controller
import Flatpickr from "stimulus-flatpickr";
import Rails from "rails-ujs";
// import a theme (could be in your main CSS entry too...)
import "flatpickr/dist/themes/dark.css";
// import the translation files and create a translation mapping
import { French } from "flatpickr/dist/l10n/fr.js";
import { english } from "flatpickr/dist/l10n/default.js";
// create a new Stimulus controller by extending stimulus-flatpickr wrapper controller
export default class extends Flatpickr {
locales = {
fr: French,
en: english
};
connect() {
//define locale and global flatpickr settings for all datepickers
this.config = {
locale: this.locale,
altInput: true,
showMonths: 2
};
super.connect();
}
// automatically submit form when a date is selected
change(selectedDates, dateStr, instance) {
const form = this.element.closest("form");
Rails.fire(form, "submit");
}
get locale() {
if (this.locales && this.data.has("locale")) {
return this.locales[this.data.get("locale")];
} else {
return "";
}
}
}
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].