Formatter

                        
<form class="col s12 m-t-10">
    <div class="row">
        <div class="input-field col s6">
            <input placeholder="2017-01-01" id="date-input" type="text">
            <label for="date-input" class="active">Date</label>
        </div>
        <div class="input-field col s6">
            <input placeholder="01/01/2017" id="date-input1" type="text" class="validate">
            <label for="date-input1" class="active">Date</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <input placeholder="00:00" id="time-demo1" type="text">
            <label for="time-demo1" class="active">Time</label>
        </div>
        <div class="input-field col s6">
            <input placeholder="2017/01/01 00:00:00" id="date-time" type="text">
            <label for="date-time" class="active">Date & Time</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <input placeholder="00:00:00" id="time-demo2" type="text">
            <label for="time-demo2" class="active">Time</label>
        </div>
        <div class="input-field col s6">
            <input placeholder="asdfghjkl (max10)" id="characters-demo" type="text">
            <label for="characters" class="active">Characters (Only)</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <input id="phone-demo" type="text">
            <label for="phone-demo" class="active">Phone</label>
        </div>
        <div class="input-field col s6">
            <input id="phone-code" type="text">
            <label for="phone_code" class="active">Phone Code</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <input id="currency-demo" type="text">
            <label for="currency_demo" class="active">Currency</label>
        </div>
        <div class="input-field col s6">
            <input id="credit-demo" type="text">
            <label for="credit_demo" class="active">Credit Card</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <input id="product-key" type="text">
            <label for="product_key" class="active">Product Key</label>
        </div>
        <div class="input-field col s6">
            <input id="purchase-code" type="text">
            <label for="purchase_code" class="active">Purchase Code</label>
        </div>
    </div>
</form>
                        
                    

                        
$('#date-input').formatter({
    'pattern': '{{9999}}-{{99}}-{{99}}'
});
$('#date-input1').formatter({
    'pattern': '{{99}}/{{99}}/{{9999}}'
});
$('#time-demo1').formatter({
    'pattern': '{{99}}:{{99}}'
});
$('#date-time').formatter({
    'pattern': '{{9999}}/{{99}}/{{99}} {{99}}:{{99}}:{{99}}'
});
$('#time-demo2').formatter({
    'pattern': '{{99}}:{{99}}:{{99}}'
});
$('#characters-demo').formatter({
    'pattern': '{{aaaaaaaaaa}}'
});
$('#phone-demo').formatter({
    'pattern': '({{999}}) {{999}}-{{9999}}',
    'persistent': true
});
$('#phone-code').formatter({
    'pattern': '+91 {{99}}-{{99}}-{{999999}}',
    'persistent': true
});
$('#currency-demo').formatter({
    'pattern': '$ {{999}}-{{999}}-{{999}}.{{99}}',
    'persistent': true
});
$('#credit-demo').formatter({
    'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}',
    'persistent': true
});
$('#product-key').formatter({
    'pattern': 'm{{*}}-{{999}}-{{999}}-C{{99}}',
    'persistent': true
});
$('#purchase-code').formatter({
    'pattern': 'ISBN{{9999}}-{{9999}}-{{9999}}-{{9999}}',
    'persistent': true
});