5

下の図に示す日付範囲ピッカーを使いたかったのです。理想的な出力

これが、現在実行している更新されたコードと、現在の出力です。

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

これがコードに基づく私の出力です。出力

4

3 に答える 3

1

これは、スタイルを設定する方法の例です#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)
}
于 2015-09-18T08:56:07.280 に答える