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

【问题标题】：Show textfield with datepicker when I change value of selectbox当我更改选择框的值时，使用日期选择器显示文本字段
【发布时间】：2017-02-01 01:34:34
【问题描述】：

我想在更改选择框的值时显示带有日期选择器的文本字段。这是我的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 一起显示。当我选择“购买”时，他们会隐藏。谢谢。

【问题讨论】：

如果你想让#start/#end拥有Zebra_DatePicker()，为什么你的选择器是-input.fieldkecil？你在找$('#start,#end').Zebra_DatePicker();吗？

标签： javascript php html datepicker

【解决方案1】：

当第二个日期选择器的开始日期是第一个日期选择器的值 + 1 时，使用这个 start 到 end 日期选择器

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>

【讨论】：