javascript 日期范围选择器 html5

date range picker html5

提问by susu

I wanted to come out with a date range picker where shows in picture below. ideal output

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

Here is my updated code that I doing now and the output I have it now.

这是我现在所做的更新代码和我现在拥有的输出。

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

Here is my output based on the code. output

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

采纳答案by Matt

I was recently tasked with implementing a date range picker similar to the one in Google Analytics. After a bit of searching around I found this JQueryUI widgetthat works very well, and can be styled easily using JQueryUI's ThemeRoller.

我最近的任务是实现一个类似于 Google Analytics 中的日期范围选择器。经过一番搜索，我发现这个 JQueryUI 小部件运行良好，并且可以使用JQueryUI 的 ThemeRoller轻松设置样式。

Unless you're learning or practising, then using existing code, assets and libraries is almost always the best option. The phrases "Don't reinvent the wheel" and "Standing on the shoulders of giants" tend to get tossed around in classrooms and lecture halls for this very reason!

除非您正在学习或实践，否则使用现有代码、资产和库几乎总是最佳选择。正是因为这个原因，“不要重新发明轮子”和“站在巨人的肩膀上”这句话往往会在教室和演讲厅里到处流传！

回答by BobbyTables

Here is an example on how you can style it, its creates a wrapping #pickerelement that gets the shadow and border, then removes the childrens borders, and puts them in-line.

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

http://jsfiddle.net/truxwruj/

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

回答by Kishore Sahasranaman

Please see the below example, I modified your code ..

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

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