日期选择器焦点功能
Posted
技术标签:
【中文标题】日期选择器焦点功能【英文标题】：Datepicker focus function 【发布时间】：2017-02-25 06:44:43 【问题描述】：嗨，我在同一输入字段中有三种类型的日期选择器，基于该日期值中的选择选项，当我在选择月份值后选择年份选项时，它工作正常，例如，如果我选择月份选项 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-calendardisplay: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-calendardisplay: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-calendardisplay: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】：<!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-calendardisplay: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-calendardisplay: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-calendardisplay: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-calendardisplay: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 UI 实例 - 日期选择器（Datepicker）
计算属性设置器导致 vuejs / javascript 在日期选择器焦点上崩溃浏览器