免责声明:网站内容仅供个人学习记录,禁做商业用途,转载请注明出处。

版权所有 © 2017-2020 NEUSNCP个人学习笔记 辽ICP备17017855号-2

Bootstrap 日期选择器

hxy    2018年11月19日 22:09:16

最近,有同学反映,平台更新个人信息页面不是很友好,

尤其是使用 Firefox 浏览器的同学,

填日期还得 按照“yyyy-mm-dd”这类的格式填写,

今天周五顺手添加一个日期选择器,也把年龄自动判断了。

先记录一下日期选择器的用法,

闲话少说,直接上代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="./css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
</head>

<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
    	<div class="form-group">
            <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
            <div class="input-group date form_date col-md-5" data-date="" 
                 data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    			<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
    		<input type="hidden" id="dtp_input2" value="" /><br/>
        </div>
    </form>
</div>

<script type="text/javascript" src="./js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
	$('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
</script>
</body>
</html>

对于完整的例子,请下载:https://cdn.neusncp.com/public/picture/201710280027023461.zip

效果:

浏览: 1.9K

[[total]] 条评论

添加评论
  1. [[item.time]]
    [[item.user.username]] [[item.floor]]楼
  2. 点击加载更多……
  3. 添加评论