当我更改selectbox的值时,显示带有datepicker的文本字段

时间:2017-02-01 01:34:35

标签: javascript php html datepicker

我希望在更改selectbox的值时显示带有datepicker的文本字段。 这是我的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>

我想要的是,当我选择'Rent'时,开始'和'结束'将用zebradatepicker显示。当我选择“购买”时,他们会隐藏。 谢谢。

1 个答案:

答案 0 :(得分:0)

当第二个日期选择器的开始日期是第一个日期选择器的值+ 1

时,请使用此startend日期选择器

&#13;
&#13;
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
});
&#13;
<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>
&#13;
&#13;
&#13;