在单个日历或日期选择器中选择日、月或年(灵活选择模式)

Question

我有一个统一的文本框控件，我需要灵活地接受日期选择器选择，它可以是以下 3 个之一：天 (月/日/年(、月(月/年(或年 (YYYY(。

我正在使用 Bootstrap DatePicker，它具有startView和minViewMode，但我唯一能做的就是将它们分成 3 个单独的控件，这不是我想要的。我的目标是组合控制。

这是我开始的脚本。也许我可以创建一些不可见的日期选择器并使用自定义的额外按钮切换它们，例如"选择此级别"？或者，也许我可以破解日期选择器面板以添加一排单选按钮，"日"/"月"/"年"，这将动态切换视图模式？

$('#day').datepicker({
format: "dd/mm/yyyy",
autoclose: true, 
startView: "days", 
minViewMode: "days"     
}).on('change', function (ev) {
$(this).datepicker('hide');
});
$('#month').datepicker({
format: "mm/yyyy",
autoclose: true, 
startView: "months", 
minViewMode: "months"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
$('#year').datepicker({
format: "yyyy",
autoclose: true, 
startView: "years", 
minViewMode: "years"
}).on('change', function (ev) {
$(this).datepicker('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
Day Picker: <input id="day"> <br/>
Month Picker: <input id="month"> <br/>
Year Picker: <input id="year"> <br/>
COMBINED Day OR Month OR Year Picker Picker: <input id="combined" placeholder="Can get MM/DD/YYYY, MM/YYYY, or YYYY" style="width:250px"> <br/>

Answer 1

您可以添加带有三个按钮(或您想要的任何样式(的弹出窗口，并根据单击的按钮显示日期选择器。从这里获取弹出代码。

$('#Pops').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
})
.on('change', function(ev) {
$(this).datepicker('hide');
});
function showDatePicker(type) {
let picker = {
day: {
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
},
month: {
format: "mm/yyyy",
autoclose: true,
startView: "months",
minViewMode: "months"
},
year: {
format: "yyyy",
autoclose: true,
startView: "years",
minViewMode: "years"
}
};
console.log('boo', type, picker[type])
$('#Pops').datepicker("destroy")
$('#Pops').datepicker(picker[type])
$('#Pops').datepicker('show')
}
$(document).on("click", ".day", function() {
showDatePicker('day')
});
$(document).on("click", ".month", function() {
showDatePicker('month')
});
$(document).on("click", ".year", function() {
showDatePicker('year')
});
$("#Pops").popover({
html: true,
content: function() {
return $('#popover-content').html();
},
trigger: 'manual'
})
.on('mouseenter', function() {
var _this = this;
$(this).popover('show');
$('.popover').on('mouseleave', function() {
$(_this).popover('hide');
});
}).on('mouseleave', function() {
var _this = this;
setTimeout(function() {
if (!$('.popover:hover').length) {
$(_this).popover('hide');
}
}, 300);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
COMBINED Day OR Month OR Year Picker Picker: <input id="Pops" placeholder="Can get MM/DD/YYYY, MM/YYYY, or YYYY" style="width:250px" data-toggle="popover" data-trigger="focus" data-placement="bottom"> <br/>
<div id="popover-content" class="hide">
<button class="day">day</button>
<button class="month">month</button>
<button class="year">year</button>
</div>

Answer 2

基于Riddhesh的回答，我还创建了一个更干净，更简单的单选按钮控制的模式开关，没有弹出框。

但就像他的回答一样，关键思想是(1(销毁DatePicker，(2(即时使用新选项重新初始化。

	function setDatePicker(type, datePickerID) {
		
			var dayModeOptions = {
				 format: "mm/dd/yyyy",
				 autoclose: true, 
				 orientation: 'bottom', 
				 startView: "days", 
				 minViewMode: "days"     				
			};
			var monthModeOptions = {
				 format: "mm/yyyy",
				 autoclose: true, 
				 orientation: 'bottom', 
				 startView: "months", 
				 minViewMode: "months"     				
			};			
			var yearModeOptions = {
				 format: "yyyy",
				 autoclose: true, 
				 orientation: 'bottom', 
				 startView: "years", 
				 minViewMode: "years"     				
			};			
			
			// Destroy & re-initalize with specified Mode Options for ID-specified control
			$(datePickerID).datepicker("destroy");
			if (type == 'day') // Day Mode initialization
				$(datePickerID).datepicker(dayModeOptions);
			else if (type == 'month') // Month Mode initialization 
				$(datePickerID).datepicker(monthModeOptions);
			else // Year Mode initialization
				$(datePickerID).datepicker(yearModeOptions);				
}
$(document).ready(function() {
// Initialize with initial Mode Options
			$('#combined').datepicker({
				 format: "mm/dd/yyyy",
				 autoclose: true, 
				 orientation: 'bottom', 
				 startView: "days", 
				 minViewMode: "days"     
			}).on('change', function (ev) {
				$(this).datepicker('hide');
			});
			
// Handle radio buttons
			$('input[name=mode]').change(function(){
				// Hide any current DatePicker and erase text box value
				$('#combined').datepicker('hide');
				$('#combined').val('');
				
				var value = $( 'input[name=mode]:checked' ).val();
				if (value == 'day') {
					setDatePicker('day', '#combined');
				} else if (value == 'month') {
					setDatePicker('month', '#combined');
				} else {
					setDatePicker('year', '#combined');
				}
			});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="">
<input type="radio" id="dayMode" name="mode" value="day" checked> <label for="dayMode">Day</label>  
<input type="radio" id="monthMode" name="mode" value="month"> <label for="monthMode">Month</label>  
<input type="radio" id="yearMode" name="mode" value="year"> <label for="yearMode">Year</label>  
</div>	
COMBINED Picker: <input id="combined" placeholder="Depends on radiobutton" style="width:250px"> <br/>