Renuo_Full_Lockup Rails Bootstrap Ui
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="mt-3 col-md-6">
  <form action="#" accept-charset="UTF-8" method="get">
    <div class="my-3">
      <p class="my-1">Default HTML date input</p>
      <input type="date" name="appointment[normal_date]" id="appointment_normal_date" />
    </div>
    <div class="my-3">
      <p class="my-1">Default Flatpickr date input</p>
      <input data-controller="flatpickr" type="date" name="appointment[flatpickr_date]" id="appointment_flatpickr_date" />
    </div>
    <div class="my-3">
      <p class="my-1">Custom Flatpickr date input</p>
      <input data-controller="flatpickr" data-flatpickr-type-value="custom" placeholder="Select appointment date" type="date" name="appointment[custom_flatpickr_date]" id="appointment_custom_flatpickr_date" />
    </div>
    <div class="my-3">
      <p class="my-1">Multiple select Flatpickr date input</p>
      <input data-controller="flatpickr" data-flatpickr-type-value="multiple" placeholder="Select multiple dates" type="date" name="appointment[multiple_flatpickr_date]" id="appointment_multiple_flatpickr_date" />
    </div>
    <div class="my-3">
      <p class="my-1">Range Flatpickr date input</p>
      <input data-controller="flatpickr" data-flatpickr-type-value="range" placeholder="Select a range of dates" type="date" name="appointment[range_flatpickr_date]" id="appointment_range_flatpickr_date" />
    </div>
    <div class="my-3">
      <input type="submit" name="commit" value="Submit" data-disable-with="Submit" />
    </div>
  </form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="mt-3 col-md-6">
  <%= form_for :appointment, url: '#', method: 'get' do |form| %>
    <div class="my-3">
      <p class="my-1">Default HTML date input</p>
      <%= form.date_field :normal_date %>
    </div>
    <div class="my-3">
      <p class="my-1">Default Flatpickr date input</p>
      <%= form.date_field :flatpickr_date,
                          data: {
                            controller: 'flatpickr'
                          } %>
    </div>
    <div class="my-3">
      <p class="my-1">Custom Flatpickr date input</p>
      <%= form.date_field :custom_flatpickr_date,
                          data: {
                            controller: 'flatpickr',
                            flatpickr_type_value: 'custom'
                          },
                          placeholder: 'Select appointment date' %>
    </div>
    <div class="my-3">
      <p class="my-1">Multiple select Flatpickr date input</p>
      <%= form.date_field :multiple_flatpickr_date,
                          data: {
                            controller: 'flatpickr',
                            flatpickr_type_value: 'multiple'
                          },
                          placeholder: 'Select multiple dates' %>
    </div>
    <div class="my-3">
      <p class="my-1">Range Flatpickr date input</p>
      <%= form.date_field :range_flatpickr_date,
                          data: {
                            controller: 'flatpickr',
                            flatpickr_type_value: 'range'
                          },
                          placeholder: 'Select a range of dates' %>
    </div>
    <div class="my-3">
      <%= form.submit 'Submit' %>
    </div>
  <% end %>
</div>

Add the following to your application.html.erb head:

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

No params configured.

_flatpickr.scss

1
2
3
4
// See notes - you need to add the library and stylesheet via the CDN
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

flatpickr_controller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { Controller } from '@hotwired/stimulus';
export default class FlatpickrController extends Controller {
  static values = {
    type: String,
  };
  connect() {
    switch (this.typeValue) {
      case 'custom':
        flatpickr(this.element, {
          altInput: true, // creates a prettier input field
          enableTime: true, // add time picker
          time_24hr: true, // sets a 24 hour time picker
          minTime: '09:00',
          maxTime: '17:30',
          locale: {
            firstDayOfWeek: 1, // start week on Monday
          },
          disable: [
            function (date) {
              return date.getDay() === 0 || date.getDay() === 6; // disable weekends
            },
          ],
          minDate: 'today', // sets the minimum date
          maxDate: new Date().fp_incr(14), // sets the maximum date 2 weeks from now
        });
        break;
      case 'multiple':
        flatpickr(this.element, {
          altInput: true, // creates a prettier input field
          altFormat: 'd M Y', // overwrites date format with altInput enabled (dateFormat does not work)
          mode: 'multiple', // allows multiple dates to be selected
        });
        break;
      case 'range':
        flatpickr(this.element, {
          altInput: true, // creates a prettier input field
          mode: 'range', // allows a range of dates to be selected
          defaultDate: [new Date(), new Date().fp_incr(14)], // sets the default values
        });
        break;
      // default is 'basic'
      default:
        flatpickr(this.element, {
          // customize options here
          // see: https://flatpickr.js.org/examples/
        });
    }
  }
}