bootstrap datetimepicker 用法+demo案例下载

bootstrap datetimepicker 用法+demo案例下载

官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/


dateTimepicker-demo下载链接–>直接戳这里


*前言:最近写项目需要使用日期插件,研究了下,顺带写了使用方法,可供参考。*

一、前期准备(以下文件在在demo中已经有了)
bootstrap.min.css
bootstrap-datetimepicker.min.css
jquery-1.8.3.min.js
bootstrap.min.js
bootstrap-datetimepicker.js
bootstrap-datetimepicker.zh-CN.js(汉化)
二、使用方法,引入所需要的js和css文件,添加input框和点击时间的js代码,效果如图所示
(美化版)
效果图:
bootstrap datetimepicker 用法+demo案例下载_第1张图片
代码片段:


<html>
<head>
    <title>title>
    <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
head>
<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>测试legend>

            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Pickinglabel>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="" 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>

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

简单版:
效果图:
bootstrap datetimepicker 用法+demo案例下载_第2张图片
代码片段:


<html>
<head>
    <title>title>
    <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8">script>
    <script type="text/javascript" src="./js/bootstrap.min.js">script>
    <script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8">script>
    <script type="text/javascript" src="./js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8">script>
head>
<body>
<p style="text-align:center;top: 40px;margin-top:40px;">
    请选择日期<input size="24" type="text" value="2017-10-9" readonly class="form_datetime">
p>
<script type="text/javascript">
    $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
script>  
body>
html>

设置时间显示方式format属性具体可参照官网~
bootstrap datetimepicker 用法+demo案例下载_第3张图片
end、、、、、、

你可能感兴趣的:(【17】Bootstrap)