Jquery Datepicker Appearing After One Option Is Selected
The code below works just fine, but now I have to make date picker appear when I select a defined option from the select list> Let's use something like this, for example: The D
Solution 1:
Try like this...
onchange event of select you can make bind the function to display the datepicker based on the current value of the select,
$(function() {
$('#date').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'dd-mm-yyyy'
});
});
functionshowDP(cbox){
if (cbox.checked) {
$('#date').css({
display: "block"
});
}else{
$('#date').css({
display: "none"
});
}}
functionshowDPNew(select)
{
if ($(select).val() == 2) {
$('#date').css({
display: "block"
});
$("#date").focus();
}
else{
$('#date').css({
display: "none"
});
$("#date").blur();
}}
<linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><scriptsrc="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><selectonChange="showDPNew(this)"><optionid='1'>1</option><optionid='2'>2</option><optionid='3'>3</option></select><inputid="date"type="text"style="display:none"/>
Plunker : https://plnkr.co/edit/SxRHSd497Xk20Gxm9RqU?p=preview
Solution 2:
You just need to watch for change on the select. When it changes, you can check the selected option's id. In place of the console.log()
, you can continue using .css()
to change the display of your datepicker.
$('select').on('change', function() {
if($(this).find('option:selected').prop('id') == 2)
console.log('datepicker is displayed');
elseconsole.log('datepicker is hidden');
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select><optionid='1'>1</option><optionid='2'>2</option><optionid='3'>3</option></select>
Post a Comment for "Jquery Datepicker Appearing After One Option Is Selected"