Datepicker焦点功能

时间：2016-10-16 04:23:03

标签： jquery css datepicker

嗨我在相同的输入字段中有三种类型的日期选择器基于选择选项在该日期值工作正常，当我选择月份值后选择年份，它没有正确放置，例如，如果我选择月份选项aug- 2016年它将正确放置然后，如果我来到年选项2015年将只有类似，如果我来到年度选项第一意味着月份值未正确放置问题是焦点功能不正确我正在尝试模糊选项删除焦点功能，但没有工作我的代码在下面

<!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>

请根据选择

向我提供指导，以便在输入字段中输入正确的值

1 个答案:

答案 0 :(得分：2)

<!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>
相关问题
最新问题