jquery - 日期选择器焦点功能

标签 jquery css datepicker

嗨，我在同一输入字段中有三种类型的日期选择器，基于该日期值中的选择选项，当我选择月份值后出现年份选项时，它工作正常，例如，如果我选择月份选项 aug- 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>

关于jquery - 日期选择器焦点功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40066799/

上一篇：css - 4 个 float DIV，可在带有 CSS 的缩小屏幕上对称响应

下一篇：css - Flexbox 最大高度百分比值在某种程度上与父容器百分比值相关

相关文章：

jquery - 我如何在 jquery 中将特定高度设置为 100%

css - 许可的网络字体是如何呈现的？

javascript - 在 jQuery UI 日期选择器中自定义月份

jquery - 根据日期选择器日期范围验证从文本框中输入的日期

javascript - 使用 Isotope 和 imagesLoaded 来处理 Ajax 加载的内容

JQuery 视差不起作用

javascript - 在javascript中声明全局变量

javascript - 如何在 JavaScript 中编辑 CSS 样式？

javascript - 使用javascript没有jquery的淡入淡出效果？

java - 在 Android 上从另一个 xml 文件中的 DatePicker 获取日期

©2024 IT工具网  联系我们