jQuery的日期選擇器選擇

下面的代碼工作得很好，但現在我必須做出當我從選擇列表中定義的選項日期選取器顯示>讓我們用這樣的事情，例如：jQuery的日期選擇器選擇

$(function() { 
 
    $('#date').datepicker({ 
 
     dateFormat: 'dd-mm-yy', 
 
     altField: '#thealtdate', 
 
     altFormat: 'dd-mm-yyyy' 
 
    }); 
 
}); 
 

 
function showDP(cbox){ 
 
    if (cbox.checked) { 
 
     $('#date').css({ 
 
      display: "block" 
 
     }); 
 
    } else { 
 
     $('#date').css({ 
 
      display: "none" 
 
     }); 
 
    } 
 
}

<input type="checkbox" id="DPenable" onClick="showDP(this);"> 
 
<input id="date" type="text" style="display:none"/> 
 

 
<select> 
 
    <option id='1'>1</option> 
 
    <option id='2'>2</option> 
 
    <option id='3'>3</option> 
 
</select>

當我選擇選項2日期選取器應該出現和消失，當我將其更改爲1或3。我嘗試了許多解決方案和選擇等，但沒有什麼是工作它是如何應該（我可能做錯了什麼，我在JS中很新）。任何人都可以請我指向在線資源或提供有關如何實現這一目標的建議？謝謝。

來源

2016-11-17 PawełP

您應該爲'select'添加一個過濾器來顯示日期選擇器，就像'如果選擇了選項2'一樣。 – Qianyue

你只需要注意選擇上的變化。當它改變時，你可以檢查選中的選項的ID。代替console.log()，您可以繼續使用.css()更改日期選擇器的顯示。

$('select').on('change', function() { 
 
    if($(this).find('option:selected').prop('id') == 2) 
 
    console.log('datepicker is displayed'); 
 
    else 
 
    console.log('datepicker is hidden'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option id='1'>1</option> 
 
    <option id='2'>2</option> 
 
    <option id='3'>3</option> 
 
</select>

來源

2016-11-17 14:34:35 Gavin

嘗試像這樣...

選擇你可以綁定到顯示基於選擇的當前值的日期選擇器功能的onchange事件，

$(function() { 
 
$('#date').datepicker({ 
 
    dateFormat: 'dd-mm-yy', 
 
    altField: '#thealtdate', 
 
    altFormat: 'dd-mm-yyyy' 
 
}); 
 
}); 
 

 
function showDP(cbox){ 
 
if (cbox.checked) { 
 
    $('#date').css({ 
 
display: "block" 
 
    }); 
 
}else{ 
 
    $('#date').css({ 
 
display: "none" 
 
    }); 
 
}} 
 
    
 
function showDPNew(select) 
 
{ 
 
if ($(select).val() == 2) { 
 
    $('#date').css({ 
 
display: "block" 
 
    }); 
 
    
 
    $("#date").focus(); 
 
} 
 
else{ 
 
    $('#date').css({ 
 
display: "none" 
 
    }); 
 
    
 
$("#date").blur(); 
 
}}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<select onChange="showDPNew(this)"> 
 
<option id='1'>1</option> 
 
<option id='2'>2</option> 
 
<option id='3'>3</option> 
 
    </select> 
 
    
 
    <input id="date" type="text" style="display:none"/>

調整器：https://plnkr.co/edit/SxRHSd497Xk20Gxm9RqU?p=preview

來源

2016-11-17 14:38:58 Deep

jQuery的日期選擇器選擇

回答

相關問題