Question

我想提出一个日期范围选择器，如下图所示。 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

Answer 1

我最近负责实施类似于Google Analytics中的日期范围选择器。经过一番搜索后，我发现this JQueryUI widget效果非常好，可以使用JQueryUI's ThemeRoller轻松设置样式。

除非您正在学习或练习，否则使用现有代码，资产和库几乎总是最佳选择。短语＆＃34;不要重新发明轮子＆＃34;和＃34;站在巨人的肩膀上＆＃34;因为这个原因，往往会在教室和演讲厅里被抛出来！

Answer 2

以下是一个关于如何设置样式的示例，它创建了一个包裹#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)
}

Answer 3

请参阅以下示例，我修改了您的代码..

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

save_model

＆＃13;

日期范围选择器html5

3 个答案: