原生js时间选择器（前面的时间一定小于后面那个的时间，日期、月份、年份三个选择）

最新推荐文章于 2024-06-27 23:37:24 发布

hat-ing

最新推荐文章于 2024-06-27 23:37:24 发布

阅读量862

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ating_ing/article/details/134463712

版权

文章详细描述了一个前端开发中关于时间选择器的实现，包括如何根据用户选择的时间范围调整日期格式，以及确保选择的时间顺序。使用了JavaScript和jQuery的datePicker插件进行日期选择和比较操作。

摘要由CSDN通过智能技术生成

一、效果图

二、关键代码

首先就是页面中时间选择器的出现绘画

          <h4 class="box-title">查询条件
                            <select name="cars" id="cars" onchange="changeTimeFormat()">
                            <option value="day" selected>日期</option>
                            <option value="month">月份</option>
                            <option value="year">年份</option>
                               
                                
                            </select>
                          
                            </h4>
                            <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                        <div class="box-body" align="center">
                            <div class="form-inline">
                            <div class="form-inline box-body" style="text-align: center;">
                     <input type="text" onchange="change1()" class="-control" id="choose_start" value="<?php echo date("Y-m-d",time()); ?>">
                     至
                     <input type="text" onchange="change2()" class="-control" id="choose_end" value="<?php echo date("Y-m-d",time()); ?>">

直接在script里面写脚本

  function changeTimeFormat() {
       
            
         var selectedCar = document.getElementById("cars").value;
         var startView, minViewMode, format;
        
         var flag =1
         if (selectedCar === "year") {
             startView = 2; // 年份模式
             format= 'yyyy';
             default_format=4;
             minViewMode = 2;
           
         } else if (selectedCar === "month") {
             startView = 1; // 月份模式
             format= 'yyyy-mm';
             minViewMode = 1;
             default_format=7;
            
           
         } else {
             startView = 0; // 日期模式
             minViewMode = 0;
             format= 'yyyy-mm-dd';
             default_format=10;
             flag =0
         }
         
         $('#choose_start').datepicker('remove');
         $('#choose_end').datepicker('remove');
         $('#choose_start').datepicker({
             format: format,
             language: "zh-CN",
             autoclose:true,
             startView: startView,
             minViewMode: minViewMode,
             maxViewMode: 2,
             endDate:new Date()       
         });
         $('#choose_end').datepicker({
             format: format,
             language: "zh-CN",
             autoclose:true,
             startView: startView,
             minViewMode: minViewMode,
             maxViewMode: 2,
             endDate:new Date()
         });
         var now = new Date();
         var today = now.toISOString().slice(0,default_format);
        
         $('#choose_start').val(today);
         $('#choose_end').val(today);
         
    
 
  }
  $(function(){
    changeTimeFormat();
  });

接下来就是确保选择的时间前面的永远大于后面的关键代码【思路：根据监测输入框的内容的变化进行判断，如果前面的大于后面的，就把后面的时间改成前面的时间

$('#choose_end').datepicker('setDate',$('#choose_start').val());

】判断的依据是根据字符串的分割进行对比。

注释的代码也是可以参考的但是因为我用了老是说内存溢出反复调用，我就用最笨的最原始的方法写了两个函数

 function change1(){
    var selectedCar = document.getElementById("cars").value;
     if(selectedCar=="year"){
         var first = $('#choose_start').val().slice(0,4)
         var end = $('#choose_end').val().slice(0,4)
         if(first>end){
            $('#choose_end').datepicker('setDate',$('#choose_start').val());
         }
     }else if(selectedCar=="month"){
       
         var first = $('#choose_start').val().slice(0,4)+$('#choose_start').val().slice(5,7)
         var end = $('#choose_end').val().slice(0,4)+$('#choose_end').val().slice(5,7)
         if(first>end){
            // $('#choose_end').val($('#choose_start').val())
            $('#choose_end').datepicker('setDate',$('#choose_start').val());

         }
     }else{
        var first = $('#choose_start').val().slice(0,4)+$('#choose_start').val().slice(5,7)+$('#choose_start').val().slice(8,10)
         var end = $('#choose_end').val().slice(0,4)+$('#choose_end').val().slice(5,7)+$('#choose_end').val().slice(8,10)
         if(first>end){
            // $('#choose_end').val($('#choose_start').val())
            $('#choose_end').datepicker('setDate',$('#choose_start').val());

         }
     }
   
         // 实现关联功能,这里需要设置一个标识，这个方法执行了下一个就不要执行了，不然会反复调用造成内存溢出
    //      $('#choose_start').datepicker().on('changeDate', function(selected){
    //     var minDate = new Date(selected.date);
    //     if ($('#choose_end').datepicker('getDate') < minDate) {
    //     $('#choose_end').datepicker('setDate', minDate);
    //     flag=0
    //     startFlag=0
    // }
     
    // });
 
   }

  function change2(){
    var selectedCar = document.getElementById("cars").value;
     if(selectedCar=="year"){
         var first = $('#choose_start').val().slice(0,4)
         var end = $('#choose_end').val().slice(0,4)
         if(first>end){
            // $('#choose_start').val($('#choose_end').val())
            $('#choose_start').datepicker('setDate',$('#choose_end').val());

         }
     }else if(selectedCar=="month"){
   
         var first = $('#choose_start').val().slice(0,4)+$('#choose_start').val().slice(5,7)
         var end = $('#choose_end').val().slice(0,4)+$('#choose_end').val().slice(5,7)
         if(first>end){
            // $('#choose_start').val($('#choose_end').val())
            $('#choose_start').datepicker('setDate',$('#choose_end').val());

         }
     }else{
        var first = $('#choose_start').val().slice(0,4)+$('#choose_start').val().slice(5,7)+$('#choose_start').val().slice(8,10)
         var end = $('#choose_end').val().slice(0,4)+$('#choose_end').val().slice(5,7)+$('#choose_end').val().slice(8,10)
         if(first>end){
            // $('#choose_start').val($('#choose_end').val())
            $('#choose_start').datepicker('setDate',$('#choose_end').val());

         }
     }
    //  var x=document.getElementById("choose_end");
    // if(timeFlag&&startFlag){
    //     console.log(2);
    //      // 实现关联功能
    //     $('#choose_end').datepicker().on('changeDate', function(selected){
    //            var minDate = new Date(selected.date);
    //            if ($('#choose_start').datepicker('getDate') > minDate) {
    //            $('#choose_start').datepicker('setDate', minDate);
               
    //            }
               
    //     });
    // }
   
  }