在我們學(xué)習(xí)框架的使用過程中會(huì)用到不同的方式和類型,那么今天我們來說說有關(guān)于“bootstrap日期控件怎么使用?”這個(gè)問題。
下面是有關(guān)案例的代碼:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>datetimpicker測(cè)試</title>
<!--圖標(biāo)樣式-->
<link rel="stylesheet">
<link
rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
</script>
</head>
<body>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label>選擇日期:</label>
<!--指定 date標(biāo)記-->
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<label>選擇日期+時(shí)間:</label>
<!--指定 date標(biāo)記-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD hh:mm',
locale: moment.locale('zh-cn')
}); });
</script>
</html>
在代碼中我們使用外鏈?zhǔn)秸{(diào)用 js 文件,從而使用它的方法,而且在設(shè)置完框架的使用使用內(nèi)聯(lián)式的代碼 添加 js 的樣式。接下來我們來看下運(yùn)行結(jié)果:
這個(gè)是我們初始運(yùn)行結(jié)果的截圖,我們可以在選擇日期和選擇日期+時(shí)間 的選框中進(jìn)行選擇我們的時(shí)間節(jié)點(diǎn),如下圖:
在Bootstrap的datetimepicker控件使用中我們可以看到,這個(gè)控件可以支持日期的選擇格式設(shè)定、時(shí)間選擇、時(shí)間段選擇、支持中文的功能。
以上就是我們今天講的有關(guān)于“bootstrap日期控件怎么使用?”這個(gè)問題的案例代碼和結(jié)果截圖,當(dāng)然你如果有更好的見解也可以和大家一起分享,更多的相關(guān)知識(shí)和內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。希望這個(gè)案例對(duì)你理解和問題有所幫助。