Cleave 输入格式插件

使用说明

Cleave插件是github上很受欢迎的输入格式化插件，可对日期、时间、电话号码进行自动格式化处理，本框架使用的版本是v1.6.0，详见github或在线演示DEMO。

日期格式

使用date: true属性表示按日期进行格式化，delimiter: '-'表示是分隔符，datePattern: ['Y', 'm', 'd']表示要显示的内容。

输入日期：

JS HTML

<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/cleave.min.js"></script>
<script type='text/javascript'>
  var cleave = new Cleave('.input-date', {
            date: true,
            delimiter: '-',
            datePattern: ['Y', 'm', 'd']
        });
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">输入日期：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="text" class="input-date" placeholder="年-月-日"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

手机格式

使用phone: true属性表示按手机号进行格式化，phoneRegionCode: 'cn'表示是中国的手机号格式，注意引用中国手机号格式的js文件。

手机号：

JS HTML

<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/cleave.min.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/addons/cleave-phone.cn.js"></script>
<script type='text/javascript'>
var cleave = new Cleave('.input-phone', {
            phone: true,
            phoneRegionCode: 'cn'
        });
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">名称</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="text" class="input-phone" placeholder="请输入11位手机号码"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

其他格式

本文再举两个例子，更多例子请详见官方演示DEMO。

千位分割：

自定义：

JS HTML

<script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/cleave.min.js"></script>
<script type='text/javascript'>
        var cleave = new Cleave('.input-thousand', {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
        });

        var cleave = new Cleave('.input-custom', {
            blocks: [4, 3, 3, 4],
            uppercase: true
        });
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">千位分割：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="text" class="input-thousand" placeholder="请输入金额"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">自定义：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="text" class="input-custom" placeholder="请输入随意数字"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>