Data formatting with Onchange Javascript

Asked

Viewed 155 times

1

I’m having a lot of trouble 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 formatting, when the person type 2 numbers the field automatically puts a bar so successively forming exactly the type date, however it has a detail, the field allows the person to use the Backspace key to erase any character, thus not disturbing the field of the correct format.

Could someone help me in this role please? At least give me an idea already helps me a lot, I’m totally lost and do not know where to start ! Grateful from now on.

javascript

  • An easy way is to use <input type= "date">. Other ways is using some plugin jQuery, for example https://plugins.jquery.com/mask/

  • Thank you for being willing to help dear friend, however the format is already in date and is not very recommended because it is not supported by all browsers, as quoted by the friend below.

  • I recommend using a plugin https://igorescobar.github.io/jQuery-Mask-Plugin/ Input date are not supported by all browsers ( http://caniuse.com/#search=date )

1 answer

3


Here is an example using the plugin https://igorescobar.github.io/jQuery-Mask-Plugin/ Note: Input date is not supported by all browsers ( http://caniuse.com/#search=date )

$(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>
<script src="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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.