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>