Flatpickr
Flatpickr Datepicker integration, compatible with Bootstrap's design schema. In order to limit the scope of the
matestack-ui-bootstrap gem, Flatpickr is not part of this gem.The below shown example should enable you to easily integrate Flatpickr (or any other Datepicker library) according to your needs!
Ruby component
app/matestack/components/form/flatpickr.rb1
class Components::Form::Flatpickr < Matestack::Ui::Bootstrap::Form::Input
2
3
optional :enable_time
4
5
vue_name "form-flatpickr-component"
6
7
def vue_props
8
{
9
init_value: init_value,
10
enable_time: enable_time
11
}
12
end
13
14
def response
15
# exactly one root element is required since this is a Vue.js component template
16
div class: "form-flatpickr-component" do
17
label input_label, for: attr_key, class: "form-label" if input_label
18
input input_attributes.merge(bootstrap_flatpickr_input_attributes)
19
render_errors
20
render_form_text
21
end
22
end
23
24
def bootstrap_flatpickr_input_attributes
25
bootstrap_input_attributes.merge({
26
type: :text,
27
class: (options[:class] || "") << (" form-control flatpickr"),
28
disabled: disabled
29
})
30
end
31
32
end
Copied!
Vue.js component
Do not forget to require flatpickr in your package.json Do not forget to import the following file into you application pack
app/matestack/components/form/flatpickr.js1
import flatpickr from "flatpickr";
2
import MatestackUiVueJs from 'matestack-ui-vuejs'
3
4
const flatpickrComponent = {
5
mixins: [MatestackUiVueJs.componentMixin, MatestackUiVueJs.formInputMixin],
6
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
7
8
data() {
9
return {};
10
},
11
mounted: function(){
12
flatpickr(this.getElement().querySelector('.flatpickr'), {
13
defaultDate: this.props["init_value"],
14
enableTime: (this.props["enable_time"] == true)
15
});
16
//all kind of configuration possible for flatpickr may be implemented here according to your needs
17
}
18
}
19
20
export default flatpickrComponent
Copied!
and then in your application.js file:
1
import flatpickrComponent from '../../matestack/components/form/flatpickr.js'// import component definition from source
2
3
const appInstance = createApp({})
4
5
appInstance.component('form-flatpickr-component', flatpickrComponent) // register at appInstance
6
7
MatestackUiBootstrap.registerComponents(appInstance)
8
9
document.addEventListener('DOMContentLoaded', () => {
10
MatestackUiVueJs.mount(appInstance)
11
})
Copied!
Usage
Example 1: Usage in form (e.g. mapped to an Active Record model) with enabled time picker
1
matestack_form some_form_config do
2
3
div class: "mb-3" do
4
Components::Form::Flatpickr.call(key: :shipped_at, label: "Shipped at", enable_time: true, type: :text)
5
end
6
7
div class: "mb-3" do
8
bs_form_submit button_variant: :primary, spinner_variant: :light, text: "Submit"
9
end
10
11
end
Copied!
Last modified 3mo ago