bootstrap，datetimepicker日期时间选择器-限制时间段，以及中文显示问题

最新推荐文章于 2025-05-11 13:37:07 发布

阿川阿川

最新推荐文章于 2025-05-11 13:37:07 发布

阅读量1.7k

点赞数

分类专栏：代码笔记 bootstrap 文章标签： bootstrap bootstrap-datetimepicker

代码笔记同时被 2 个专栏收录

11 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap结合jQuery实现日期选择器功能，并设置了中文语言包。通过设置不同的参数，可以定制日期选择器的表现形式，例如显示月份级别的时间选择。

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

基于bootstrap的css，js
bootstrap-datetimepicker的css，js

<script src="jquery-1.11.1.min.js"></script>  
<link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />  
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  

<link href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />  
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- 引用的中文包 -->
<script src="bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>  

// 开始时间：  
$('#qBeginTime').datetimepicker({  
    todayBtn: true,
    autoclose : true,
    bootcssVer:3, // 显示箭头
    format: 'yyyy-mm',
    startView: 3, // 日期时间选择器打开之后首先显示的视图。
    minView: 3, // 日期时间选择器所能够提供的最精确的时间选择视图。
    forceParse: false, // 当选择器关闭的时候，是否强制解析输入框中的值。
    language: 'zh-CN'
}).on('changeDate',function(e){  
    var startDate = $('#startDate').val();
    $("#returnDate").datetimepicker('setStartDate',startDate);
    $("#startDate").datetimepicker('hide');
});  
// 结束时间：  
$('#qEndTime').datetimepicker({  
    todayBtn: true,
    autoclose : true,
    bootcssVer:3, // 显示箭头
    format: 'yyyy-mm',
    weekStart: 1,
    startView: 3,
    minView: 3,
    forceParse: false,
    language: 'zh-CN'  
}).on('changeDate',function(e){  
    var returnDate = $("#returnDate").val();
    $("#startDate").datetimepicker('setReturnDate',returnDate);
    $("#returnDate").datetimepicker('hide');
});

显示中文包问题
moment语言包：https://github.com/moment/moment

<script src="bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>