Css Zero Showcase

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Default -->
<input type="text" name="default_datepicker" id="default_datepicker" placeholder="Pick a date" class="input" data-controller="datepicker" />
<!-- Datetime -->
<input type="text" name="datetime_datepicker" id="datetime_datepicker" placeholder="Pick a date" class="input" data-controller="datepicker" data-datepicker-type-value="datetime" />
<!-- Disabled Dates -->
<input type="text" name="disabled_dates_datepicker" id="disabled_dates_datepicker" value="2028-01-01" placeholder="Pick a date" class="input" data-controller="datepicker" data-datepicker-disable-value="["2028-01-10","2028-01-11","2028-01-12"]" />
<!-- Multiple -->
<input type="text" name="multiple_datepicker" id="multiple_datepicker" placeholder="Pick dates" class="input" data-controller="datepicker" data-datepicker-mode-value="multiple" />
<!-- Range -->
<input type="text" name="range_datepicker" id="range_datepicker" placeholder="Pick dates" class="input" data-controller="datepicker" data-datepicker-mode-value="range" data-datepicker-show-months-value="2" />
<!-- Time -->
<input type="text" name="time_datepicker" id="time_datepicker" placeholder="Pick a time" class="input" data-controller="datepicker" data-datepicker-type-value="time" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%# Default %>
<%= text_field_tag "default_datepicker", nil, placeholder: "Pick a date", class: "input", data: { controller: "datepicker" } %>
<%# Datetime %>
<%= text_field_tag "datetime_datepicker", nil, placeholder: "Pick a date", class: "input", data: { controller: "datepicker", datepicker_type_value: "datetime" } %>
<%# Disabled Dates %>
<%= text_field_tag "disabled_dates_datepicker", "2028-01-01", placeholder: "Pick a date", class: "input", data: { controller: "datepicker", datepicker_disable_value: ["2028-01-10", "2028-01-11", "2028-01-12"] } %>
<%# Multiple %>
<%= text_field_tag "multiple_datepicker", nil, placeholder: "Pick dates", class: "input", data: { controller: "datepicker", datepicker_mode_value: "multiple" } %>
<%# Range %>
<%= text_field_tag "range_datepicker", nil, placeholder: "Pick dates", class: "input", data: { controller: "datepicker", datepicker_mode_value: "range", datepicker_show_months_value: 2 } %>
<%# Time %>
<%= text_field_tag "time_datepicker", nil, placeholder: "Pick a time", class: "input", data: { controller: "datepicker", datepicker_type_value: "time" } %>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
@import url("https://esm.sh/flatpickr@4.6.13/dist/flatpickr.min.css");
.flatpickr-calendar {
  --calendar-size: 250px;
  --container-size: 220px;
  --day-size: var(--size-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  inline-size: var(--calendar-size);
  .flatpickr-innerContainer {
    justify-content: center;
    padding-block-end: var(--size-3);
  }
  .flatpickr-days {
    inline-size: var(--container-size);
  }
  .dayContainer {
    inline-size: var(--container-size);
    min-inline-size: var(--container-size);
    max-inline-size: var(--container-size);
  }
  .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 var(--color-border);
  }
  .flatpickr-months {
    .flatpickr-month {
      color: var(--color-text);
    }
    span.cur-month {
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
    }
    svg {
      fill: var(--color-border-dark);
    }
    .flatpickr-prev-month:hover svg {
      fill: var(--color-text);
    }
    .flatpickr-next-month:hover svg {
      fill: var(--color-text);
    }
  }
  .flatpickr-monthDropdown-months {
    appearance: none;
    border-radius: var(--rounded-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    padding: 0;
    text-align: center;
    &:hover {
      background: var(--color-border-light);
    }
  }
  .numInputWrapper {
    input {
      border-radius: var(--rounded-md);
      color: var(--color-text);
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      line-height: var(--leading-normal);
      padding: 0;
      text-align: center;
    }
    span {
      border-color: var(--color-border);
    }
    span:hover {
      background: transparent;
    }
    span.arrowUp::after {
      border-bottom-color: var(--color-text);
    }
    span.arrowDown::after {
      border-top-color: var(--color-text);
    }
    &:hover {
      background: transparent;
    }
  }
  .flatpickr-weekday {
    color: var(--color-text-subtle);
    font-weight: var(--font-normal);
  }
  .flatpickr-time {
    .hasTime & {
      border-top-color: var(--color-border);
    }
    .hasTime.noCalendar & {
      border: 0;
    }
    .numInput {
      background: transparent;
      color: var(--color-text);
    }
    .flatpickr-time-separator {
      color: var(--color-text);
    }
    .flatpickr-am-pm {
      background: transparent;
      color: var(--color-text);
    }
  }
  .flatpickr-day {
    border-radius: var(--rounded-md);
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-text);
    height: var(--day-size);
    line-height: var(--day-size);
    margin-block-start: var(--size-2);
    max-width: var(--day-size);
    &:is(.inRange) {
      border-radius: 0;
    }
    &:is(.today, .inRange, :hover, :focus) {
      background: var(--color-border-light);
      color: var(--color-text);
    }
    &:is(
      .flatpickr-disabled,
      .flatpickr-disabled:hover,
      .prevMonthDay,
      .nextMonthDay,
      .notAllowed,
      .notAllowed.prevMonthDay,
      .notAllowed.nextMonthDay
    ) {
      color: var(--color-text-subtle);
    }
    &:is(
      .selected,
      .startRange,
      .endRange,
      .selected.inRange,
      .startRange.inRange,
      .endRange.inRange,
      .selected:focus,
      .startRange:focus,
      .endRange:focus,
      .selected:hover,
      .startRange:hover,
      .endRange:hover,
      .selected.prevMonthDay,
      .startRange.prevMonthDay,
      .endRange.prevMonthDay,
      .selected.nextMonthDay,
      .startRange.nextMonthDay,
      .endRange.nextMonthDay
    ) {
      background: var(--color-primary);
      color: var(--color-text-reversed);
    }
  }
  &::before, &::after {
    display: none;
  }
}
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
import { Controller } from "@hotwired/stimulus"
import flatpickr from "https://esm.sh/flatpickr@4.6.13?standalone"
export default class extends Controller {
  static values  = {
    type: String, disable: Array,
    mode: { type: String, default: "single" },
    showMonths: { type: Number, default: 1 },
    dateFormat: { type: String, default: "F d, Y" },
    dateTimeFormat: { type: String, default: "F d, Y H:i" }
  }
  connect() {
    if (this.typeValue == "time") {
      this.flatpickr = flatpickr(this.element, this.#timeOptions)
    } else if (this.typeValue == "datetime") {
      this.flatpickr = flatpickr(this.element, this.#dateTimeOptions)
    } else {
      this.flatpickr = flatpickr(this.element, this.#basicOptions)
    }
  }
  disconnect() {
    this.flatpickr.destroy()
  }
  get #timeOptions() {
    return { dateFormat: "H:i", enableTime: true, noCalendar: true }
  }
  get #dateTimeOptions() {
    return { ...this.#baseOptions, altFormat: this.dateTimeFormatValue, dateFormat: "Y-m-d H:i", enableTime: true }
  }
  get #basicOptions() {
    return { ...this.#baseOptions, altFormat: this.dateFormatValue, dateFormat: "Y-m-d" }
  }
  get #baseOptions() {
    return { altInput: true, disable: this.disableValue, mode: this.modeValue, showMonths: this.showMonthsValue }
  }
}

Dependencies