Bootstrap 日期选择器

hxy    2018-11-19 22:09

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

尤其是使用 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>

对于完整的例子,请下载:/static/upload/article/201710280027023461.zip

效果:

Views: 1.6K

[[total]] comments

Post your comment
  1. [[item.time]]
    [[item.user.username]] [[item.floor]]Floor
  2. Click to load more...
  3. Post your comment