javascript - 同一按钮上的不同 Bootstrap 日期选择器

Question

我尝试解决这个问题几天了，但似乎我不能，所以我可能需要一些帮助:)

我想在用户单击按钮时显示 Bootstrap Datepicker。但日期选择器的类型取决于所选的单选按钮(默认为年份)。

我并不是真正使用 Javascript 和 jQuery 的专业人士，但这是我尝试过的:

HTML:

<div class="btn-group" data-toggle="buttons" id="dateWrapper">
    <label class="btn btn-default ps-checkbtn @actY" id="datepicker_y">
        <input type="radio" id="q156" name="year" value="1" /> Year
    </label>
    <label class="btn btn-default ps-checkbtn @actM" id="datepicker_m">
        <input type="radio" id="q157" name="month" value="2" /> Month
    </label>
    <label class="btn btn-default ps-checkbtn @actD" id="datepicker_d">
        <input type="radio" id="q158" name="day" value="3" /> Day
    </label>

    <button id="chooseDate" class="ps_button">
        <i class="fa fa-calendar" aria-hidden="true"></i> Choose Date
    </button>
</div>

Javascript:

$('#chooseDate').click(function () {
    if ($("#datepicker_y").is(":checked")) {
        $('#chooseDate').datepicker({
            minViewMode: "years"
        });
    else if ($("#datepicker_m").is(":checked")) {
        $('#chooseDate').datepicker({
            minViewMode: "months"
        });
    else if ($("#datepicker_y").is(":checked")) {
        $('#chooseDate').datepicker();
    }
});

结果是，DateTimePicker 出现，但仅当我单击“Day”(两次)时出现，并且它不会更改 minviewmode。

Answer 1

这是您的解决方案:)

$(document).ready(function(){

	$('.dateselect').change(function () {
		initDatepicker($(this).val());
	});
	
	initDatepicker(1);// for first time initiate Day

});


function initDatepicker(mode){
    
	$('#datepicker-container').html(''+
     '<div class="input-daterange" id="datepicker"><input type="text" name="start" class="form-control" />'+'</div>');
	 
    var $dtpicker=$('#datepicker-container > .input-daterange');
    $dtpicker.find(':input').val('');
	
    if (mode == 1) {//Day
        $dtpicker.datepicker({
            
            todayHighlight: true,
        });
    } else if (mode == 2) {//Month
        $dtpicker.datepicker({
            
            minViewMode: 1
        });
    } else if (mode == 3) {// Year
        $dtpicker.datepicker({
			minViewMode: 2
        });
    } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons" id="dateWrapper">
    <label class="btn btn-default ps-checkbtn @actY" id="datepicker_y">
        <input type="radio" class="dateselect" id="q156" name="year" value="3" /> Year
    </label>
    <label class="btn btn-default ps-checkbtn @actM" id="datepicker_m">
        <input type="radio" class="dateselect" id="q157" name="month" value="2" /> Month
    </label>
    <label class="btn btn-default ps-checkbtn @actD" id="datepicker_d">
        <input type="radio" class="dateselect" id="q158" name="day" value="1" /> Day
    </label>

    
	<div id="datepicker-container"> </div>
</div>