Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Default -->
<input type="text" name="defaut_input" id="defaut_input" class="input" inputmode="numeric" data-controller="inputmask" data-inputmask-mask-value="(999) 999-9999" />
<!-- Integer -->
<input type="text" name="integer_input" id="integer_input" class="input" inputmode="numeric" data-controller="inputmask" data-inputmask-alias-value="numeric" data-inputmask-digits-value="0" />
<!-- Decimal -->
<input type="text" name="decimal_input" id="decimal_input" class="input" data-controller="inputmask" data-inputmask-alias-value="numeric" />
<!-- Currency -->
<input type="text" name="currency_input" id="currency_input" class="input" data-controller="inputmask" data-inputmask-alias-value="numeric" data-inputmask-group-separator-value="," data-inputmask-digits-value="2" data-inputmask-digits-optional-value="false" />
<!-- Date -->
<input type="text" name="date_input" id="date_input" class="input" data-controller="inputmask" data-inputmask-alias-value="datetime" data-inputmask-input-format-value="mm/dd/yyyy" data-inputmask-output-format-value="yyyy-mm-dd" />
<!-- Datetime -->
<input type="text" name="datetime_input" id="datetime_input" class="input" data-controller="inputmask" data-inputmask-alias-value="datetime" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%# Default %>
<%= text_field_tag "defaut_input", nil, class: "input", inputmode: "numeric", data: { controller: "inputmask", inputmask_mask_value: "(999) 999-9999" } %>
<%# Integer %>
<%= text_field_tag "integer_input", nil, class: "input", inputmode: "numeric", data: { controller: "inputmask", inputmask_alias_value: "numeric", inputmask_digits_value: 0 } %>
<%# Decimal %>
<%= text_field_tag "decimal_input", nil, class: "input", data: { controller: "inputmask", inputmask_alias_value: "numeric" } %>
<%# Currency %>
<%= text_field_tag "currency_input", nil, class: "input", data: { controller: "inputmask", inputmask_alias_value: "numeric", inputmask_group_separator_value: ",", inputmask_digits_value: 2, inputmask_digits_optional_value: false } %>
<%# Date %>
<%= text_field_tag "date_input", nil, class: "input", data: { controller: "inputmask", inputmask_alias_value: "datetime", inputmask_input_format_value: "mm/dd/yyyy", inputmask_output_format_value: "yyyy-mm-dd" } %>
<%# Datetime %>
<%= text_field_tag "datetime_input", nil, class: "input", data: { controller: "inputmask", inputmask_alias_value: "datetime" } %>
CSS is not required or multiple files are needed, check the notes.
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
import { Controller } from "@hotwired/stimulus"
import Inputmask from "https://cdn.skypack.dev/inputmask@5.0.9?min"
export default class extends Controller {
  static values = {
    mask:           String,
    alias:          String,
    groupSeparator: { type: String,  default: "" },
    radixPoint:     { type: String,  default: "." },
    digits:         { type: String,  default: "*" },
    digitsOptional: { type: Boolean, default: true },
    inputFormat:    { type: String,  default: "mm/dd/yyyy HH:MM" },
    outputFormat:   { type: String,  default: "yyyy-mm-dd HH:MM" }
  }
  connect() {
    if (this.hasMaskValue) {
      Inputmask({ mask: this.maskValue }).mask(this.element)
    } else if (this.aliasValue == "numeric") {
      Inputmask(this.#numericOptions).mask(this.element)
    } else if (this.aliasValue == "datetime") {
      Inputmask(this.#datetimeOptions).mask(this.element)
    }
  }
  disconnect() {
    Inputmask.remove(this.element)
  }
  get #numericOptions() {
    return {
      alias: "numeric",
      unmaskAsNumber: true,
      removeMaskOnSubmit: true,
      groupSeparator: this.groupSeparatorValue,
      radixPoint: this.radixPointValue,
      digits: this.digitsValue,
      digitsOptional: this.digitsOptionalValue
    }
  }
  get #datetimeOptions() {
    return {
      alias: "datetime",
      removeMaskOnSubmit: true,
      inputFormat: this.inputFormatValue,
      outputFormat: this.outputFormatValue
    }
  }
}

Dependencies