js verwendet Boostrap, um die Datatimepicker-Steuerung zu implementieren

<body>
    <div class="container" >
        <form class="form-horizontal" style="margin-top: 20px;">
            <div class="row clearfix">
                <div class="col-xs-6">
                <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="姓名">
                </div>
                </div>
                </div>
                <div class="col-xs-6">
                <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword3" placeholder="年龄">
                </div>
                </div>
                </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">薪资</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputPassword3" placeholder="薪资">
                </div>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                <div class="col-sm-10">
                  <select class="form-control">
                    <option>IT部门</option>
                    <option>运营部门</option>
                    <option>销售部</option>
                  </select>
                </div>
              </div>
            </div>
        </div> 

        <div class="row clearfix">
            <div class="col-xs-6">
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">入职日期</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="dt" placeholder="入职日期">
                </div>
            </div>
            </div>
        </div>
        
        <div class="row clearfix">
            <div class="col-xs-6">
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
              </div>
            </div>
            </div>
        </div>
          </form>
    </div>


    <script src="./static/jquery-3.6.3.min.js"></script>
    <script src="./static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script src="./static/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="./static/bootstrap-datepicker-1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        $(
            $('#dt').datepicker({
                
                format: 'yyyy-mm-dd',			//显示年月日
                language:'zh-CN',
                startDate: "2020-06-10", //开始时间,在这时间之前都不可选
                autoclass:true,
                autoclose: true, //选择后自动关闭
                clearBtn: true,//清除按钮
                
            })
        );
    </script>

</body>

Unter Verwendung der von Boostrap implementierten Zeitplansteuerung werde ich hier nur eine Aufzeichnung erstellen.

Supongo que te gusta

Origin blog.csdn.net/zhaodongdz/article/details/128723733
Recomendado
Clasificación