4

I'm using cleave.js for a date input field in my Vue.js project.

The option that I passed was this:

<cleave :options="{
                date: true,
                datePattern: ['m', 'd','Y']
                   }"   id="date-input" placeholder="MM/DD/YYYY" type="text"></cleave>

How do I set maximum value for Y ?

Richard Chambers
  • 16,643
  • 4
  • 81
  • 106
Jack
  • 41
  • 1
  • 2

2 Answers2

1

I did that for card security number and working fine

  const cardCCV = new Cleave("#cardCCV", {
    numeral: true,
    stripLeadingZeroes: false,
    onValueChanged: function (e) {
      const maxSize = 3;
      if (e.target.rawValue.length > maxSize) {
        cardCCV.setRawValue(e.target.rawValue.substring(0, maxSize));
      }
    },
  });
Ajouve
  • 9,735
  • 26
  • 90
  • 137
0

Cleave is an input formatting library and really nothing more. It's up to you to determine how you want to limit user input. Fortunately it offers an api for accessing the underlining raw input value. The API can be found here.

Youll need to write an event listener to check the users input and cap the value as you need.