gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:46:56 28 4
gpt4 key购买 nike

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

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

Thats how it should work:

我并不是真正使用 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。

最佳答案

这是您的解决方案:)

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

关于javascript - 同一按钮上的不同 Bootstrap 日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37696001/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com