How to auto format textbox inputs

Question

   Birthdate
      
   <         


        

Answer 1

use datepicker api from jquery here is the link Datepicker

and here is the working code

<tr>
   <td><label>Birthdate</label>
      <input type="text" placeholder="mm/dd/yyyy" name="birthdate" id="birthdate" maxlength="10"/>
   </td>
</tr>

<script>
  $(function() {
    $( "#birthdate" ).datepicker();
  });
</script>

EDIT

$("input[name='birthdate']:first").keyup(function(e){
    var key=String.fromCharCode(e.keyCode);
    if(!(key>=0&&key<=9))$(this).val($(this).val().substr(0,$(this).val().length-1));
    var value=$(this).val();
    if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
});

this is the code that you may need

here is the fiddled code

Answer 2

I have an alternative that works with a jquery-ui datepicker, without formatter.js. It is intended to be called from the keyup and change events. It adds zero padding. It works with various supported date formats by constructing expressions from the dateFormat string. I can't think of a way to do it with fewer than three replaces.

// Example: mm/dd/yy or yy-mm-dd
var format = $(".ui-datepicker").datepicker("option", "dateFormat");

var match = new RegExp(format
    .replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*")
    .replace(/mm|dd/g, "\\d{2}")
    .replace(/yy/g, "\\d{4}"));
var replace = "$1/$2/$3$4"
    .replace(/\//g, format.match(/\W/));

function doFormat(target)
{
    target.value = target.value
        .replace(/(^|\W)(?=\d\W)/g, "$10")   // padding
        .replace(match, replace)             // fields
        .replace(/(\W)+/g, "$1");            // remove repeats
}

https://jsfiddle.net/4msunL6k/

Answer 3

I've been watching a project on GitHub (and providing feedback to improve it) for just such kind of formatting called formatter.js http://firstopinion.github.io/formatter.js/demos.html This might be just the thing you're looking for.

This wouldn't stop you from typing in dates like the 53rd of May... but it will help you format.

new Formatter(document.getElementById('date-input'), {
  'pattern': '{{99}}/{{99}}/{{9999}}',
  'persistent': true
});

or

$('#date-input').formatter({
  'pattern': '{{99}}/{{99}}/{{9999}}',
  'persistent': true
});

Answer 4

user2897690 had the right idea but it didn't accept Numpad numbers. So took their javascript and modified it to work.

Here is my interpretation of their code with the added feature.

$("input[name='birthdate']:first").keyup(function(e){
    var chars = [48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];
    var key=chars.indexOf(e.keyCode);
    console.log(key);
    if(key==-1)$(this).val($(this).val().substr(0,$(this).val().length-1));
    var value=$(this).val();
    if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
});