日期picker焦点功能

嗨，我有三种类型的日期选择器在同一输入字段基于选择选项在该日期值工作良好，当我来选择月值后的年份选项，它的位置不正确例如，如果我选择月份选项8 -2016，它会正确放置，如果我选择年份选项2015，它会正确放置2016，同样，如果我选择年份选项第一，意味着月份值没有正确放置问题是焦点功能不清楚，我尝试模糊选项来删除焦点功能，但不起作用，我的代码在

下面

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

请指导我根据选择

在输入字段中放置正确的值

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

相关内容

最新更新

热门标签：