nisbos


日期时间使用教程(bootstrap-datetimepicker)

<h5>1.基础示例相关代码</h5> <p>css、js引入:</p> <pre><code class="language-java">&lt;link href="/css/plugins/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet"&gt; &lt;link href="/css/plugins/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"&gt; &lt;script src="/js/plugins/datetimepicker/bootstrap-datetimepicker.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"&gt;&lt;/script&gt; &lt;script src="/js/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"&gt;&lt;/script&gt;</code></pre> <p>html代码:</p> <pre><code class="language-java">&lt;div class="layui-inline"&gt; &lt;label class="layui-form-label layui-form-label-css"&gt;日期+时间&lt;/label&gt; &lt;div class='input-group date' id='datetimepicker2' style="width: 210px;"&gt; &lt;input type='text' class="form-control" /&gt; &lt;span class="input-group-addon"&gt; &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt;</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, &quot;linked&quot;</td> <td>false</td> <td>如果此值为true 或 &quot;linked&quot;,则在日期时间选择器组件的底部显示一个 &quot;Today&quot; 按钮用以选择当前日期。如果是true的话,&quot;Today&quot; 按钮仅仅将视图转到当天的日期,如果是&quot;linked&quot;,当天日期将会被选中</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>

页面列表

ITEM_HTML