js 利用boostrap实现datatimepicker控件

最新推荐文章于 2024-07-28 20:27:10 发布

秋冬晚归客

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量457

点赞数

分类专栏： web 文章标签： javascript 前端 python

本文链接：https://blog.csdn.net/zhaodongdz/article/details/128723733

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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>

利用boostrap实现的时间表格控件，这里仅做一下记录。