日期范围选择器 HTML5

Question

我希望能够设计一个日期选择器，如下图所示: 理想效果

以下是我现在正在进行的更新代码和输出结果。

$(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>

这是基于代码的输出结果。 点击此处 查看输出结果。

- susu

---

需要一些CSS样式才能呈现你想要的输出效果，你尝试过什么吗？ - BobbyTables

@zedd，我尝试在HTML代码中做了一些更改，但仍然没有效果。您能否提供一些有关CSS样式部分的指导？ - susu

Answer 1

我最近的任务是实现一个类似于Google Analytics中的日期范围选择器。在搜索了一番后，我找到了这个JQueryUI小部件，它非常好用，并且可以使用JQueryUI的ThemeRoller轻松进行样式定制。

除非你正在学习或练习，否则使用现有的代码、资产和库几乎总是最好的选择。出于这个原因，“不要重复造轮子”和“站在巨人的肩膀上”的说法往往会在课堂和讲堂上被提起！

- Matt

---

我之前尝试过。但似乎与另一个日期输入存在冲突。 - susu

Answer 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>

- Kishore Sahasranaman

---

我已经更新了我的代码。你能看一下它并找出问题吗？ - susu

修复样式 .picker { 显示：内联; 边框：1像素实心灰色; 填充：4像素; } 输入 { 边框：0; } - Kishore Sahasranaman

Answer 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)
}

- BobbyTables

---

我已经更新了我的代码和输出。你可以看一下，看看有什么问题吗？谢谢。 - susu

@susu 嗯，我已经更新了我的答案，使用类而不是ID，就像你更改的代码一样。如果你只是使用它，这会给出一个很好的结果。 - BobbyTables

它能正常工作并输出我想要的结果。谢谢:D - susu