Bootstrap 時間日曆插件bootstrap-datetimepicker配置與應用小結

時間 2020-05-07

標籤 bootstrap 時間日曆插件 datetimepicker 配置應用小結欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap時間日曆插件bootstrap-datetimepicker配置與應用小結javascript

by:授客 QQ：1033553122css

1. 測試環境

win7html

JQuery-3.2.1.min.jshtml5

下載地址：java

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.jsjquery

Bootstrap-3.3.7-distgit

下載地址：github

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zipweb

bootstrap-table-develop-v1.12.1.zipbootstrap

下載地址：

https://github.com/wenzhixin/bootstrap-table

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-table-develop-v1.12.1.zip

bootstrap-datetimepicker-master-v4.17.47.zip

下載地址：

https://github.com/Eonasdan/bootstrap-datetimepicker

2. 配置與應用

效果展現

HTML代碼片斷

head設置

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->

{% load staticfiles %}

<!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->

<script type="text/javascript" src="{% static  'website/jquery-3.2.1.min.js' %}" defer></script>

<!-- Bootstrap -->

<link rel="stylesheet" type="text/css" href="{% static 'website/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" />

<!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->

<script type="text/javascript" src="{% static  'website/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}" defer></script>

<!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->

<!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->

<!--[if lt IE 9]>

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" defer></script>

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" defer></script>

<![endif]-->

    ……略

<!-- bootstrap-datetimepicker -->

<link rel="stylesheet" href="{% static 'website/bootstrap-datetimepicker-4.17.47/css/bootstrap-datetimepicker.min.css' %}"/>

<script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/bootstrap-datetimepicker.min.js' %}" defer></script>

<!-- 引入中文語言包，注意：locale files 必須放在bootstrap-datetimepicker.min.js後面 -->

<script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/locales/bootstrap-datetimepicker.zh-CN.js' %}" defer></script>

    ……略

</head>

toolbar工具條

<div class="container-fluid">

<div class="row">

<table id="roleTable"></table>

<div id="toolbar">

<div class="btn-group">

<button class="btn btn-default" data-toggle="modal" data-target="#roleDialog" id="addBtn">新增

<i class="glyphicon glyphicon-plus"></i>

</button>

<button class="btn btn-default" id="editBtn">修改

<i class="glyphicon glyphicon-edit"></i>

</button>

<button class="btn btn-default" id="deleteBtn">刪除

<i class="glyphicon glyphicon-remove"></i>

</button>

</div>

<form class="form-inline" id="queryForm">

<div class="form-group">

<div class="input-group">

<div class="input-group-addon">角色名稱</div>

<input  type="text" class="form-control" name="roleNameQ" id="roleNameQ" placeholder="請輸入角色名稱">

</div>

<div class="input-group date" id="startTimePicker">

<div class="input-group-addon">開始時間</div>

<input  type="text" class="form-control" name="startTime" id="startTime" >

<span class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</span>

</div>

<div class="input-group date" id="endTimePicker">

<div class="input-group-addon">結束時間</div>

<input  type="text" class="form-control" name="endTime" id="endTime">

<span class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</span>

</div>

</div>

<button type="button" id="queryBtn" class="btn btn-primary queryButton">查詢</button>

</form>

</div>

</div>

</div>

JS代碼片斷

時間插件配置

// 設置開始時間插件

$('#' + startTimePickerID).datetimepicker({

language: 'zh-CN',// 默認值: 'en'，設置控件上的文案爲中文

format:'yyyy-mm-dd HH:mm:ss', //格式化，以便精確到秒

autoclose:true // 選擇時間時，點擊分後，關閉時間插件框

});

// 設置結束時間插件

$('#' + endTimePickerID).datetimepicker({

language: 'zh-CN',

format:'yyyy-mm-dd HH:mm:ss',

autoclose: true // 選擇時間時，點擊分後，關閉時間插件框}

});

相關標籤/搜索

bootstrapdatetimepicker

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。