在单个日历或 DatePicker 中选择日或月或年（灵活选择模式）

Question

我有一个统一的文本框控件，我需要在其中灵活地接受 DatePicker 选择，它可以是以下 3 种之一：日 (MM/DD/YYYY)、月 (MM/YYYY) 或年 (YYYY)。

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

这是我开始使用的脚本。也许我可以创建一些不可见的 DatePickers 并使用自定义的额外按钮来切换它们，例如“选择此级别”？或者我可以破解 DatePicker 面板来添加一行单选按钮，“Day”/“Month”/“Year”，它们将动态切换 viewMode？​​p>

$('#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

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

$('#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/>