Limit numbers entered in input field

Question

I got this working however, it need to limit the parts of the text input. For instance, I have to limit DD to allow upto 31, MM to limit upto 12 and limit YYYY from 1900 to 2018

Any idea how to go about this?

$('[data-type="dateofbirth"]').mask('00/00/0000');

function submitBday1() {
  var Q4A = "";
  var Bdate = document.getElementById('bday1').value;
  var darr = Bdate.split('/');
  var temp = darr[0];
  darr[0] = darr[1];
  darr[1] = temp;
  var fmtstr = darr.join('/');
  var Bday = +new Date(fmtstr);
  Q4A += ~~((Date.now() - Bday) / (31557600000));
  var theBday = document.getElementById('resultBday1');
  theBday.innerHTML = Q4A;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="dateofbirth" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">

As @Luca implies: use a date input (``): [demo](https://jsfiddle.net/davidThomas/pLobj1xu/). — David Thomas, Sep 03 '18 at 20:40
The client didn't want the date popup. I had used it earlier. Wants to type the date instead. — Elaine Byene, Sep 03 '18 at 20:43
Validating the text in the input using regex expressions could also be an option. — Salvatore, Sep 03 '18 at 20:49

score 2 · Accepted Answer · answered Sep 03 '18 at 22:01

2

The jquery.mask.min.js library

is not meant to be a validation library, just a way to automatically insert characters like punctuation. Validation would have to be done separately.

Hence, I would suggest to use Inputmask:

$('[data-type="dateofbirth"]').inputmask({alias: 'datetime', inputFormat: 'dd/mm/yyyy'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>


<input type="text" data-type="dateofbirth" maxLength="10" class="form-control" placeholder="dd/mm/yyyy">

answered Sep 03 '18 at 22:01

gaetanoM

41,594
6
42
61

This is amazing! btw, any idea if we could limit the year too? – Elaine Byene Sep 03 '18 at 23:08
Got it working. `$('[data-type="dateofbirth"]').inputmask({alias: 'datetime', yearrange: { minyear: 1900, maxyear: 2018 }, inputFormat: 'DD/MM/YYYY'});` – Elaine Byene Sep 03 '18 at 23:39

score 0 · Answer 2 · answered Sep 03 '18 at 20:34

You have a couple of options:

Use <select>:

<select>
    <option>1</option>
    <option>2</option>
    <option>...</option>
    <option>31</option>
</select>

Use <input type="number" min="1" max="31">:

<label>Day
<input type="number" min="1" max="31" step="1" value="1" />
</label>
<label>Month
<input type="number" min="1" max="12" step="1" value="1" />
</label>
<label>Year
<input type="number" min="1900" max="2018" step="1" value="2018" />
</label>

Note: not all browsers support number as an input type, so please make sure it'll work on the platforms that you need it to work on.

`select options` is out of question. `number` is also not possible since that method works if I have 3 input fields. I have just 1 input field. — Elaine Byene, Sep 03 '18 at 20:42

Sheldon R · Answer 3 · 2018-09-03T22:13:53.307

You want to validate your inputs beyond what hmlt5 can do, so a plugin like jQuery Validate would be a good idea.

You may have to research basic usage first, but it is fairly straightforward and very useful.

First, to validate your birth date, moment.js will make it easy:

moment(document.getElementById('bday1').value, 'DDMMYYY').isValid() moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= 2018 or better moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= moment().year()

To tie this into jQuery validate, you can add the below as a custom method of jQuery Validate and set a rule for your "date" input validBirthDate : true

$.validator.addMethod('validBirthDate', function(value){
    return moment(value, 'DDMMYYY').isValid() && moment(value, 'DDMMYYY').year() <= moment().year();
})

score 0 · Answer 4 · answered Aug 03 '19 at 03:17

0

Try this...

$('[data-type="dateofbirth"]').mask({
   alias: 'datetime',
   inputFormat: 'dd/mm/yyyy',
   min: '31/12/1900',
   max: '31/12/2018'
});

answered Aug 03 '19 at 03:17

buycanna.io

1,166
16
18

Limit numbers entered in input field

4 Answers4