javascript - 当我更改选择框的值时，使用日期选择器显示文本字段

Question

我想在更改选择框的值时使用日期选择器显示文本字段。这是我的 html 代码。

<select name="buyrent" id="buyrent" onchange="CheckRent(this.value);" />
    <option value="1">Rent</option>
    <option value="2">Buy</option>
</select>
<input type='text' id='start' name='start' class='fieldkecil'/>
<input type='text' id='end' name='end' class='fieldkecil'/>

这是我的 JavaScript 代码。

<script type="text/javascript">
function CheckRent(val){
  var element=document.getElementById('start');
   if(val=='1')
     element.style.display='block';
   else
     element.style.display='none';
  var element=document.getElementById('end');
   if(val=='1')
     element.style.display='block';
   else
     element.style.display='none';
  }
</script>

还有这个。

<script>
$(document).ready(function() {
$('input.fieldkecil').Zebra_DatePicker();
});
</script>

我想要的是，当我选择“租赁”时，“开始”和“结束”将用 zebradatepicker 显示。当我选择“购买”时，它们就会隐藏。谢谢。

Answer 1

当第二个日期选择器的开始日期是第一个日期选择器的值 + 1 时，使用此开始到结束日期选择器

function CheckRent(val){
  var element=document.getElementById('start');
   if(val=='1')
     element.style.display='block';
   else
     element.style.display='none';
  var element=document.getElementById('end');
   if(val=='1')
     element.style.display='block';
   else
     element.style.display='none';
  }

$('#datepicker-example7-start').Zebra_DatePicker({
  direction: true,
  pair: $('#datepicker-example7-end')
});

$('#datepicker-example7-end').Zebra_DatePicker({
  direction: 1
});

<link rel="stylesheet" href="http://stefangabos.ro/wp-content/themes/zebra/cache/css/104fc4056ad53fbc1d0eb8dfa97c7010_6871998126.css" type="text/css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://stefangabos.ro/wp-content/themes/zebra/cache/javascript/c3c7293f00563706bd22bc16055aad92_7122815240.js"></script>

<select name="buyrent" id="buyrent" onchange="CheckRent(this.value);" >
    <option value="1">Rent</option>
    <option value="2">Buy</option>
</select>

<form action="javascript:void(0)" method="post">
<div>
<span class="Zebra_DatePicker_Icon_Wrapper" id="start">
  <input id="datepicker-example7-start" type="text" readonly="readonly">

</span>
  <span class="Zebra_DatePicker_Icon_Wrapper" id="end">
    <input id="datepicker-example7-end" type="text" readonly="readonly">  
  </span>
</div>
</form>