CODEWITHSUNDEEP
jquerycssdatepicker
Sathish
Sathish

Reputation: 409

Datepicker focus function

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

<!DOCTYPE html>
<!--
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.
-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <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>

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

  <script>

   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();
     });});        
  }  
  } 
 </script>    
 </body>
 </html>

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

Upvotes: 2

Views: 929

Answers (1)

Jayamurugan
Jayamurugan

Reputation: 1825

<!DOCTYPE html>
<!--
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.
-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <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> 
  <style id='hideMonth'></style>
</head>
<body>
<select  name="rep_type" id="rep_typ" onchange="opt_change()">
  <option selected="selected" >TYPE</option>
  <option  disabled="disabled"></option>
  <option value="1" >DATE</option>
  <option  value="2">MONTH</option>
  <option value="3" >YEAR</option>
</select>
<input id="date_input"   type="text" value="" size="10" />

  <script>

$(function(){
 $( "#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'
   }); 
 });

function opt_change()
{
var sel_value=$("#rep_typ option:selected").val(); 
$('#date_input').val("");
if(sel_value==1)
 {
        //$( "#date_input" ).datepicker({ altFormat: "yy-mm-dd" });   
   $( "#date_input" ).datepicker("option",
     { 

      dateFormat: "yy-mm-dd",
      changeMonth: true,
      changeYear: true,
      showButtonPanel: false,
      beforeShow: function() 
        {
         $('#hideMonth').html('.ui-datepicker-calendar{display:show;}');
        }          
     });
  }
else if(sel_value==2)
  {
   $( "#date_input" ).datepicker("option", 

       { 
         dateFormat: "yy-mm",
         changeMonth: true,
         changeYear: true,
         showButtonPanel: true,
         beforeShow: function() 
          {
           $('#hideMonth').html('.ui-datepicker-calendar{display:none;}');
          },
      onClose: function(dateText, inst) 
       {
        function isDonePressed(){
                        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                    }

                    if (isDonePressed()){

                        var month1 = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                        var year1 = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker('setDate', new Date(year1, month1, 1));
                         console.log('Done is pressed')

                    }
      }              
        }

        );
   } 
else if(sel_value==3)
  {
    $( "#date_input" ).datepicker("option", 
      { 
       dateFormat: "yy",
       changeMonth: false,
       changeYear: true,
       showButtonPanel: true,
       stepMonths: 0,
       monthNames: ["", "", "", "", "", "", "", "", "", "", "", ""],
       beforeShow: function() 
          {
           $('#hideMonth').html('.ui-datepicker-calendar{display:none;}');
          },
     onClose: function(dateText, inst) 
       {
        function isDonePressed(){
                        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                    }

                    if (isDonePressed()){
                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker('setDate', new Date(year,1));
                         console.log('Done is pressed')

                    }
      }             



      });
  }
}
 </script>    
 </body>
 </html>

Upvotes: 3

Related Questions