Date Formatting with Onchange Javascript

Question

Date Formatting with Onchange Javascript

Navigation

#1 by (3 votes)

1

I'm having a hard time doing this kind of formatting in the field, if anyone can help me I'll be very grateful, well, I have a form field:

<div class="form-group col-md-12 col-sm-12 col-xs-12">        
        <div class="col-md-2 col-sm-2 col-xs-2 form-label">
            {{Form::label('data', 'Data')}}
        </div>         
        <div class="col-md-10 col-sm-10 col-xs-10">            
            {{Form::date('data', null, ['class' => 'form-control'])}}
        </div>     
    </div>

The intention is to make this field in the following format, when the person types 2 numbers the field automatically places a bar so successively forming exactly the date type, however has a detail, the field allows the person to use the backspace key to delete any character, thus not disturbing the field of the correct format.

Could anyone help me in this role please? At least give me an idea already helps me a lot, I'm totally lost and I do not know where to start! Thank you in advance.

javascript

asked by anonymous 04.05.2016 / 19:16

1 answer

How to know which keys are pressed in C # ConsoleApp and set events Break line after the img tag with RegEx

score 3 · Accepted Answer

Follow an example using the link plugin. Note: Input date are not supported by all browsers ( link )

$(document).ready(function(){
	$(".mask-date").mask('99/99/9999');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

<div class="form-group col-md-12 col-sm-12 col-xs-12">        
  <div class="col-md-2 col-sm-2 col-xs-2 form-label">
    Data Formatada
  </div>         
  <div class="col-md-10 col-sm-10 col-xs-10">            
    <input type='text' class="mask-date" />
  </div>     
</div>

JsFiddle