Datepicker focus function
<p>Hi i am having three types of datepicker in same input field based on select option in that date value working fine when i come year option after selecting month value, it is not placed correctly for example if i am choosing month option aug-2016 it will placed correctly then if i am come to year option 2015 it will placed 2016 only similarly if i am come to year option first means month value not placed correctly the problem is focus function not clear correctly i am tried blur option to remove the focus function but not worked my code is below</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;!--
To change this license header, choose License Headers in Project    Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
--&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;jQuery UI Datepicker - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;

    &lt;style id='hideMonth'&gt;&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;select  name="rep_type" id="rep_typ" onchange="opt_change()"&gt;
      &lt;option selected="selected" &gt;TYPE&lt;/option&gt;
      &lt;option  disabled="disabled"&gt;&lt;/option&gt;
      &lt;option value="1" &gt;DATE&lt;/option&gt;
      &lt;option  value="2"&gt;MONTH&lt;/option&gt;
      &lt;option value="3" &gt;YEAR&lt;/option&gt;
    &lt;/select&gt;
    &lt;input id="date_input"   type="text" value="" size="10" /&gt;

  &lt;script&gt;

   function opt_change()
    {
    var sel_value=$("#rep_typ option:selected").val();
    $( "#date_input" ).datepicker("destroy");
    $('#date_input').val("");
    if(sel_value==1)
     {
        $( "#date_input" ).datepicker({
     beforeShow: function() 
        {
         $('#hideMonth').html('.ui-datepicker-calendar{display:show;}');
        },
     showButtonPanel: false,
     maxDate:0,
     changeMonth: true,//this option for allowing user to select month
     changeYear: true, //this option for allowing user to select from   year range
     dateFormat: "yy-mm-dd",
     yearRange: '2015:+0'
   });       
  }
else if(sel_value==2)
  {
   $( "#date_input" ).datepicker({
        beforeShow: function() 
          { 
           $('#hideMonth').html('.ui-datepicker-calendar{display:none;}');
          },          
        maxDate:0,  
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: "yy-mm",
        showButtonPanel: true,
        yearRange: '2015:+0'
      }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-close').click(function() {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        thisCalendar.datepicker('setDate', new Date(year, month, 1));
        $(".ui-datepicker-calendar").hide();
    });
   });
  } 
else if(sel_value==3)
  {
    $( "#date_input" ).datepicker({
     beforeShow: function() 
        { 
         $('#hideMonth').html('.ui-datepicker-calendar{display:none;}'); 
        },
     maxDate:0,
     changeMonth: false,//this option for allowing user to select month
     changeYear: true, //this option for allowing user to select from year range
     dateFormat: "yy",
     showButtonPanel: true,
     stepMonths: 0,
     monthNames: ["", "", "", "", "", "", "", "", "", "", "", ""],
     yearRange: '2015:+0'
   }).focus(function() {
     var thisCalendar = $(this); 
     $('.ui-datepicker-close').click(function() {
     var year1 = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
     thisCalendar.datepicker('setDate', new Date(year1,1));
     $(".ui-datepicker-calendar").hide();
     });});        
  }  
  } 
 &lt;/script&gt;    
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>Please give me your guidance to place the correct value in input field based on the selection</p>