bootstrap-datepicker3 plugin

最新推荐文章于 2021-08-04 05:41:37 发布

WAI-CHAN

最新推荐文章于 2021-08-04 05:41:37 发布

阅读量427

点赞数

分类专栏： Project In Action 文章标签： bootstrap

本文链接：https://blog.csdn.net/DMW2016/article/details/104698735

版权

Project In Action 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在HTML中引入并使用DatePicker插件实现日期选择功能，包括引入CSS和JS文件，设置HTML控件，以及通过JavaScript配置DatePicker参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML引入

<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>

<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>

HTML控件

<div class="form-group has-feedback">
    <label class="col-sm-3 control-label">计划约谈月份：</label>
    <div class="col-sm-8">
        <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
        <input id="planInspectDate" name="planInspectDate" type="text" class="form-control" th:readonly="true">
    </div>
</div>

JavaScript 脚本

// 计划约谈月份 日期选择器
$('#planInspectDate').datepicker({
    language: "zh-CN",
    format: "yyyy-mm", 
    startView: 1, 
    minViewMode: 1,
    maxViewMode: 2,
    autoclose: true,
    toggleActive: true
})

参数	解释	取值
startView	打开时间选择器，显示的视图	0：日，1：月，2：年
minViewMode	视图的最小单位，日，月，年取值从小到大	0：日，1：月，2：年
maxViewMode	视图的最大单位	0：日，1：月，2：年
autoclose	选择后关闭	true or false
toggleActive	点击选择，再次点击取消	true or false

最终结果

参考链接

bootstrap-datepicker3