CODEWITHSUNDEEP
cssmaterial-design
Miyer
Miyer

Reputation: 365

How to Change then Number format in Materilaize input field?

I've searching to find out a way how to change the input number format in Materialize CSS but didn't find any so far. Is there a way you can change the input number format? enter image description here

<div class="row" >
        <div class="input-field col offset-s4 s4">
          <input id="price" type="number" class="validate"  >
          <label for="price">Price</label>
        </div></div>
        <div class="row">
        <div class="input-field col offset-s4 s4 ">
          <input id="DownPay" type="number" class="validate" >
          <label for="DownPay">Down Payment</label>

Upvotes: 0

Views: 1377

Answers (1)

Awais
Awais

Reputation: 4912

It cannot be done by type="number" Reason

you need type=text with some JS

document.getElementById('Price').addEventListener('input', event =>
  event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US')
);
 <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            

<div class="input-wrap">
<div class="input-field col s6">
          <input id="Price" type="text" id="" pattern="^[\d,]+$" class="validate">
          <label for="Price">Price</label>
        </div>
 
</div>

Upvotes: 2

Related Questions