【发布时间】：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-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>
请指导我根据选择在输入字段中放置正确的值
【问题讨论】：
-
您应该实例化日期选择器一次，然后在选择更改时更改选项
-
请举个例子
-
如何根据选择值初始化选项
标签： jquery css datepicker