我是靠谱客的博主 开朗朋友,最近开发中收集的这篇文章主要介绍时间选择器,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

       一、  首先,搭建一个输入框来放置时间选择器,这里就直接做一个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 ;

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

 

最后

以上就是开朗朋友为你收集整理的时间选择器的全部内容,希望文章能够帮你解决时间选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部