bootstrap-datepicker1.9时间插件,结束日期不超过开始日期;文本框数组大于0的正整数;文本框输入价格(大于0 ,小数点后保留2位)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
            crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"
            integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <link href="/bootstrap-datepickerex/css/bootstrap-datepicker.min.css" rel="stylesheet">
        <script src="/bootstrap-datepickerex/js/bootstrap-datepicker.min.js"></script>
        <script src="/bootstrap-datepickerex/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    </head>

    <body>
        <form class="form-horizontal">
            <div class="form-group">
                    <div class="col-sm-2 control-label">报名日期</div>
                    <div class="col-sm-10">
                        <div class="input-daterange input-group" id="datepicker">
                            <input id="startTime" class="datepicker form-control" name="startTime" type="text" required >
                            <span class="input-group-addon">至</span>
                            <input id="endTime"  class="datepicker form-control" dateEndGeStart="#startTime" name="endTime" type="text" required >
                        </div>
                    </div>
                </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">最大人数</div>
                <div class="col-sm-10">
                    <input οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" class=" form-control">
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">价格</div>
                <div class="col-sm-10">
                    <input type="text" id="number" placeholder="只能输入数字且最多两位小数"  class=" form-control">
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">详情</div>
                <div class="col-sm-10">
                    <textarea type="text" id="number" placeholder="请输入详情"  class=" form-control"></textarea>
                </div>
            </div>
            
          
        </form>
    </body>

    <script>
        $(function() {
            //日期选择
            $(".datepicker").datepicker({
                        language: "zh-CN",
                        autoclose: true,//选中之后自动隐藏日期选择框
                        format: "yyyy-mm-dd"//日期格式
                });
                //设置开始时间
                $('#startTime').datepicker('setStartDate', new Date());
                $('#endTime').datepicker('setStartDate', new Date());
                $("#startTime").datepicker().on('changeDate', function(e) {
                       //获取选取的开始时间
                       var endTimeStart =$("#startTime").val();
                       //设置结束时间
                       $('#endTime').datepicker('setStartDate', endTimeStart);
                });
                 //设置结束时间必须晚于开始时间
                $("#endTime").datepicker().on('changeDate', function(e) {
                       //获取选取的开始时间
                       var endTimeStart =$("#startTime").val();
                       //设置结束时间
                       $('#endTime').datepicker('setStartDate', endTimeStart);
                });
            
            //价格正则
            var inp = document.getElementById('number');
                //给节点添加键盘擡起事件
                inp.onkeyup = function restrictNumber() {
                    let inpu = document.getElementById('number');
                    inpu.value = inpu.value.replace(/[^\d.]/g, "");  //仅保留数字和"."
                    inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
                    inpu.value = inpu.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
                    inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
                    if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
                        inpu.value = parseFloat(inpu.value);
                    }
                }
        });
    </script>
</html>

发布了7 篇原创文章 · 获赞 3 · 访问量 1787
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章