bootstrap-datepicker

最新推荐文章于 2025-06-03 09:04:09 发布

RightHereWaitingFY

最新推荐文章于 2025-06-03 09:04:09 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

分类专栏： Js

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/103694882

Js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何利用Bootstrap Datepicker插件在网页中实现日期选择功能，包括设置日期格式、语言、自动关闭和高亮显示今天等功能，并通过示例代码展示了如何将这些功能应用于两个输入框，分别用于选择起始和结束日期。

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

页面引入 bootstrap-datepicker.min.css bootstrap-datepicker.min.js bootstrap-datepicker.zh-CN.min.js 资源文件

<script language="javascript">
$(function(){
	$("#newstimestart").attr("readonly", "true").datepicker({
        format: "yyyy-mm-dd",
		language: "zh-CN",
		autoclose: true,
        todayHighlight: true
    });
	$("#newstimeend").attr("readonly", "true").datepicker({
        format: "yyyy-mm-dd",
		language: "zh-CN",
		autoclose: true,
        todayHighlight: true
    });
});
function dosearch(){
	var start_date=$("#newstimestart").val();
	var end_date=$("#newstimeend").val();
    if(start_date!=""&&end_date!=""){
		if(start_date>end_date){
			alert("起始日期要小于结束日期");
			return false;
		}
    }
    $("#newseditform").submit();
}
</script>
<input type="text" class="form-control" id="newstimestart"  name="newstimestart" value="${newslist.newstimestart!''}" placeholder="开始时间">
 -
 <input type="text" class="form-control" id="newstimeend"  name="newstimeend" value="${newslist.newstimeend!''}" placeholder="结束时间">