BootStrap DateTimePicker的使用

時間 2019-12-06

標籤 bootstrap datetimepicker 使用欄目 Bootstarp 简体版

原文原文鏈接

使用方法javascript

1. 添加資源css

2. 編寫代碼html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</head>
<body>
    <input type="text" id="dateFrom" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/moment.min.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"> $('#dateFrom').datetimepicker(); </script>
</body>
</html>

運行，此時會有一個錯誤：java

提示的意思是datetimepicker元素必須位於非固定位置的容器中，此時，在外面包裹一個style="position:relative"的div。 jquery

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</head>
<body>
    <div style="position:relative">
        <input type="text" id="dateFrom" />
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/moment.min.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"> $('#dateFrom').datetimepicker(); </script>
</body>
</html>

運行後，效果以下：git

關於格式，通常咱們須要的是年-月-日，能夠經過配置實現：github

$('#dateFrom').datetimepicker({ format:'YYYY-MM-DD' });

若是當前文本框爲空，點擊後彈出日曆的同時，不想文本框賦值爲當天，此時能夠經過useCurrent:false實現：bootstrap

若是日曆須要本地化（使用中文），能夠訪問https://github.com/moment/moment/tree/develop/locale 連接下載對應的語言包（這裏下載了zh-cn.js），存放到腳本所在的目錄下：ui

添加對moment-with-locales.min.js的引用，配置裏使用locale:'zh-cn'spa

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</head>
<body>
    <div style="position:relative">
        <input type="text" id="dateFrom" />
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/moment.min.js"></script>
    <script src="Scripts/moment-with-locales.min.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"> $('#dateFrom').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: false, locale: 'zh-cn' }); </script>
</body>
</html>

兩個日曆聯動，一個日曆選擇日期後，限制另外一個日曆可選日期的範圍，使用dp.change事件。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</head>
<body>
    <div style="position:relative">
        <input type="text" id="dateFrom" /> - <input type="text" id="dateTo" /> - </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/moment.min.js"></script>
    <script src="Scripts/moment-with-locales.min.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"> $('#dateFrom,#dateTo').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: false, locale: 'zh-cn' }); $('#dateFrom').on('dp.change', function(e) { $('#dateTo').data("DateTimePicker").minDate(e.date); }); $('#dateTo').on('dp.change', function (e) { $('#dateFrom').data("DateTimePicker").maxDate(e.date); }); </script>
</body>
</html>