日期时间使用教程(bootstrap-datetimepicker)
<h5>1.基础示例相关代码</h5>
<p>css、js引入:</p>
<pre><code class="language-java"><link href="/css/plugins/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="/css/plugins/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="/js/plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
<script src="/js/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script></code></pre>
<p>html代码:</p>
<pre><code class="language-java"><div class="layui-inline">
<label class="layui-form-label layui-form-label-css">日期+时间</label>
<div class='input-group date' id='datetimepicker2' style="width: 210px;">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div></code></pre>
<p>js代码:</p>
<pre><code class="language-java">$('#datetimepicker2').datetimepicker({
language:"zh-CN", //汉化
format: 'YYYY-MM-DD hh:mm',
showClose:true,
});</code></pre>
<h5>2.展现</h5>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/c9e68a9107f56360889dad064762161f?showdoc=.jpg" alt="" /></p>
<h5>3..datetimepicker()参数使用说明</h5>
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>format</td>
<td>String</td>
<td>mm/dd/yyyy</td>
<td>日期格式:p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合</td>
</tr>
<tr>
<td>weekStart</td>
<td>Integer</td>
<td>0</td>
<td>一周从哪一天开始。0(星期日)到6(星期六</td>
</tr>
<tr>
<td>startDate</td>
<td>Date</td>
<td></td>
<td>开始时间</td>
</tr>
<tr>
<td>endDate</td>
<td>结束时间</td>
<td></td>
<td>结束时间</td>
</tr>
<tr>
<td>daysOfWeekDisabled</td>
<td>String, Array</td>
<td>'', []</td>
<td>一周中禁用的天数,例如禁用周末:“0,6”或[0,6],注意:即使weekStart设置为1,禁用的天数也必须从0开始</td>
</tr>
<tr>
<td>autoclose</td>
<td>Boolean</td>
<td>false</td>
<td>选择一个日期之后是否立即关闭此日期时间选择器</td>
</tr>
<tr>
<td>startView</td>
<td>Number,String</td>
<td>2, 'month'</td>
<td>日期时间选择器打开之后首先显示的视图。 可接受的值:0(hour)、1(day)、2(month)、3(year)、4(decade)</td>
</tr>
<tr>
<td>minView</td>
<td>Number, String</td>
<td>0, 'hour'</td>
<td>日期时间选择器所能够提供的最精确的时间选择视图,如果想只显示日期,则可设置为2或'month'</td>
</tr>
<tr>
<td>maxView</td>
<td>Number, String</td>
<td>4, 'decade'</td>
<td>日期时间选择器最高能展示的选择范围视图</td>
</tr>
<tr>
<td>todayBtn</td>
<td>Boolean, "linked"</td>
<td>false</td>
<td>如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中</td>
</tr>
<tr>
<td>todayHighlight</td>
<td>Boolean</td>
<td>false</td>
<td>如果为true, 高亮当前日期</td>
</tr>
<tr>
<td>keyboardNavigation</td>
<td>Boolean</td>
<td>true</td>
<td>是否允许通过方向键改变日期</td>
</tr>
<tr>
<td>language</td>
<td>String</td>
<td>en</td>
<td>语言</td>
</tr>
<tr>
<td>forceParse</td>
<td>Boolean</td>
<td>true</td>
<td>当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。</td>
</tr>
<tr>
<td>minuteStep</td>
<td>Number</td>
<td>5</td>
<td>此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间(分钟)用于选择</td>
</tr>
<tr>
<td>pickerReferer</td>
<td>String</td>
<td>default</td>
<td>不建议使用。放置组件实现选择器的referer元素。如果要将选择器放在输入字段的正下方,只需指定输入即可。</td>
</tr>
<tr>
<td>pickerPosition</td>
<td>String</td>
<td>bottom-right</td>
<td>还支持 : 'bottom-left'。此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放到输入框下方</td>
</tr>
<tr>
<td>viewSelect</td>
<td>Number,</td>
<td>String hour</td>
<td>支持: 'decade', 'year', 'month', 'day', 'hour'。使用此选项,您可以选择从中选择日期的视图。默认情况下,它是最后一个,但是您可以选择第一个,因此每次单击都会更新日期。</td>
</tr>
<tr>
<td>showMeridian</td>
<td>Boolean</td>
<td>false</td>
<td>此选项将为日视图和小时视图启用子午线视图。</td>
</tr>
<tr>
<td>initialDate</td>
<td>Date or String</td>
<td>new Date()</td>
<td>可以使用日期初始化查看器。默认情况下是现在,所以您可以指定昨天或今天是午夜…</td>
</tr>
</tbody>
</table>