时间选择器

最新推荐文章于 2025-06-08 10:50:56 发布

CorsonNet

最新推荐文章于 2025-06-08 10:50:56 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： Java 时间选择器 SpringBoot

本文链接：https://blog.youkuaiyun.com/weixin_41195886/article/details/95309531

Java 专栏收录该内容

7 篇文章

订阅专栏

在需要输入时间段的场景下，为避免分别输入开始和结束时间的麻烦，可制作时间选择器。本文介绍了使用Java和SpringBoot制作时间选择器的步骤，包括搭建输入框、引入css和js文件、写初始化方法、添加时间方法等，制作好的选择器实用且可用于记录时间处。

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

在一些情况下，需要我们输入一个时间段，比如生产日期到失效日期，比如某段时间内的查询等。一般的方法是输入一个开始时间，再输入一个结束时间。但是这样做操作起来有些麻烦，这个时候我们就需要制作一个时间选择器来帮助我们选择输入一个时间段。

一、首先，搭建一个输入框来放置时间选择器，这里就直接做一个Div放置一个Input框就可以，非常简单。

<label >时间选择器</label>
 <div >
 <input type="text"  id="dateTime" name="dateTime">
 </div>

二、在你的HTML页面中引入时间选择器的css文件和js文件。

<link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css"/>

<script src="/assets/js/i-daterangepicker.js></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>

三、在js中写一个初始化方法，我就直接放在页面加载方法中了，这里的ID就是你Input框的ID。

// 页面加载后方法
$(document).ready(function () {

    //添加 时间插件
    var datarangepickerParam = {
        daterangepickerId:"#dateTime",
        format:"YYYY-MM-DD HH:mm",
        endDate: getNowFormatDate()+"23:59",
        opens:"center",
        drops: "down",
        separator:" 至 ",
        showDropdowns:true,
        showWeekNumbers:true,
        alwaysShowCalendars:true,
        timePicker:true,
        timePicker24Hour:true,
        timePickerSeconds:false,
        ranges:true
    };

    iDaterangepicker(datarangepickerParam);
}

四，写一个添加时间的方法，在其中做时间规则的判断，和时间的获取、添加等操作。

//添加时间
function addTime() {

    //判断时间是否复符合标准
    var a = $("#drugsTime").val();
    var b = a.split(" "+"至"+" ");
    var beginTime = b[0]+":00";
    var endTime = b[1]+":00";

    if (beginTime.replace(/(^\s*)|(\s*$)/g, "") == "") {
       confirm("请输入开始时间！");
        return;
    }
    if (endTime.replace(/(^\s*)|(\s*$)/g, "") == "") {
       confirm("请输入结束时间！");
        return;
    }
    var begin=new Date(beginTime.replace(/-/g,"/"));
    var end=new Date(endTime.replace(/-/g,"/"));
    if(begin>=end){
       confirm("开始时间应小于结束时间！");
        return;
    }
}

五、其实到这里我们的时间选择器就已经可以使用了，我们在接一下，方便接下来的操作。

var useBeginTime = beginTime ;
var useBeginTime = endTime ;

六、这样我们就制作好了一个时间选择器了，它可以放在任何你需要记录时间的地方，很实用。