日期范围选择器 html5

Posted 2023-05-07

【中文标题】日期范围选择器 html5

【英文标题】：date range picker html5

【发布时间】：2015-12-15 05:57:54

【问题描述】：

我想推出一个日期范围选择器，如下图所示。 ideal output

这是我现在正在执行的更新代码以及我现在拥有的输出。

$(function() 
  $("#fromperiod").datepicker(
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function(selectedDate) 
      $("#toperiod").datepicker("option", "minDate", selectedDate);
    
  );
  $("#toperiod").datepicker(
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function(selectedDate) 
      $("#fromperiod").datepicker("option", "maxDate", selectedDate);
    
  );
);

.picker 
  display: inline;
  border: 1px solid lightgray;
  padding : 4px;

input 
  border: 0;

<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Period</td>
    </tr>
    <tr>
      <td>
        <div class='picker'>
          <label for="fromperiod">From</label>
          <input type="text" id="fromperiod" name="from">
          <label for="toperiod">to</label>
          <input type="text" id="toperiod" name="to">
        </div>
      </td>
    </tr>
  </tbody>
</table>

这是我基于代码的输出。 output

【问题讨论】：

它需要一些 CSS 样式才能看起来像您想要的输出，您尝试过什么吗？

@zedd 我尝试对 html 代码进行一些更改。但还是一样。你能提供一些关于css样式部分的指南吗？

【参考方案1】：

我最近的任务是实现一个类似于 Google Analytics（分析）中的日期范围选择器。经过一番搜索，我发现this JQueryUI widget 效果很好，并且可以使用JQueryUI's ThemeRoller 轻松设置样式。

除非您正在学习或练习，否则使用现有代码、资产和库几乎总是最佳选择。正因为如此，“不要重新发明***”和“站在巨人的肩膀上”这句话往往会在教室和演讲厅里被扔掉！

【讨论】：

我以前试过。但它似乎与另一个日期输入有冲突。

【参考方案2】：

请看下面的例子，我修改了你的代码..

$(function() 
    $( "#from" ).datepicker(
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) 
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      
    );
    $( "#to" ).datepicker(
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) 
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      
    );
  );

.wrapper
    display : inline;
    border:1px solid lightgray;
    padding:4px;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)

input 
    border:0;

label 
color : gray;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
Period :  
<div class='wrapper'>
    <label for="from">from:</label>
    <input type="text" id="from" name="from">
    <label for="to">to:</label>
    <input type="text" id="to" name="to">
</div>

【讨论】：

我已经更新了我的代码。你能看看它，看看是什么问题。

修复样式.picker display: inline; border: 1px solid lightgray; padding : 4px; input border: 0;

【参考方案3】：

这是一个关于如何设置样式的示例，它创建了一个包装 #picker 元素，该元素获取阴影和边框，然后删除子边框，并将它们置于行内。

http://jsfiddle.net/truxwruj/

.picker > * 
    display:inline;
    border:0;

.picker 
    border:1px solid lightgray;
    padding:4px;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)

【讨论】：

我已经更新了我的代码和输出。你能看看它，看看有什么问题。谢谢

@susu 好吧，我已经更新了我的答案，以在您更改的代码中使用类而不是 ID。如果您只使用它，这会产生很好的结果

它工作并且输出是我想要得到的。谢谢：D