引导日期选取器 - 动态更改格式 - 设置月份名称获取月份值

Question

我只想有一个日期选择器来选择多个周期。

通过选择，我选择周期类型，然后在更改时设置日期选择器(我必须删除它并重新初始化它(。

对于周设置，我分配了一个类来突出显示一周，并在更改日期或关闭弹出窗口时分配值。

对于月份设置，我想显示月份名称，但获取月份的值。

当我选择七月时，我想在日期选择器中看到"七月"，但如果我点击按钮，我想有"07">

$(document).ready(function(){
$("#dtpk").datepicker({
		autoclose: true,
format: 'dd-mm-yyyy',
});
});
$(document).on("change", ".selDateCustom", function(){
var thisVal=$(this).val();
$("#dtpk").datepicker('remove'); 
$("#dtpk").val(""); 
$("#dtpk").attr("typeDP", ""); 

if(thisVal=="day"){
$("#dtpk").datepicker({
		autoclose: true,
format: 'dd-mm-yyyy',
});
}
else if(thisVal=="year") { 
$("#dtpk").datepicker({
		autoclose: true,
format: " yyyy", 
viewMode: "years", 
minViewMode: "years",
}); 
}
else if(thisVal=="month") { 
$("#dtpk").datepicker({
		autoclose: true,
format: " mm", 
viewMode: "months", 
minViewMode: "months",
});
}
else if(thisVal=="week") {
		$("#dtpk").attr("typeDP", "weekly");
$("#dtpk").datepicker({
		autoclose: true,
format: 'dd-mm-yyyy'
});
}
$("#dtpk").focus();
});
$(document).on("changeDate hide", "#dtpk[typeDP='weekly']", function(){
var value = $(this).val();
if(value!=""){  
var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY");
var lastDate =  moment(value, "DD-MM-YYYY").day(6).format("DD-MM-YYYY");
$(this).val(firstDate + " | " + lastDate);
}
});
$(document).on("show", "#dtpk[typeDP='weekly']", function(){
$(".datepicker-days tbody tr").addClass("weekly");
});
$(document).on("click", ".getVal", function(){
		alert($("#dtpk").val());
});

.datepicker-days tbody tr.weekly:hover {
background-color: #808080;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<select class="selDateCustom">
<option value="day">Day</option>
<option value="year">Year</option>
<option value="month">Month</option>
<option value="week">Week</option>
</select>
<input type="text" id="dtpk"/>
<button class ="getVal">GetVal</button>

Answer 1

将formatmm更改为MM

else if(thisVal=="month") { 
$("#dtpk").datepicker({
autoclose: true,
format: "mm,MM",
viewMode: "months", 
minViewMode: "months",
});
}

$(document).ready(function(){
$("#dtpk").datepicker({
		autoclose: true,
format: 'dd-mm-yyyy',
});
});
$(document).on("change", ".selDateCustom", function(){
var thisVal=$(this).val();
$("#dtpk").datepicker('remove'); 
$("#dtpk").val(""); 
$("#dtpk").attr("typeDP", ""); 

if(thisVal=="day"){
$("#dtpk").datepicker({
		autoclose: true,
format: 'dd-mm-yyyy',
});
}
else if(thisVal=="year") { 
$("#dtpk").datepicker({
		autoclose: true,
format: " yyyy", 
viewMode: "years", 
minViewMode: "years",
}); 
}
else if(thisVal=="month") { 
$("#dtpk").datepicker({
		autoclose: true,
format: "mm,MM",
viewMode: "months", 
minViewMode: "months",
}).on('changeDate', function(ev){
// $("#div_txt_month_number").text($(this).val().split(',')[0]);
$("#input_txt_month_number").val($(this).val().split(',')[0]);            
});
}
else if(thisVal=="week") {
		$("#dtpk").attr("typeDP", "weekly");
$("#dtpk").datepicker({
		autoclose: true,
format: 'dd-mm-yyyy'
});
}
$("#dtpk").focus();
});
$(document).on("changeDate hide", "#dtpk[typeDP='weekly']", function(){
var value = $(this).val();
if(value!=""){  
var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY");
var lastDate =  moment(value, "DD-MM-YYYY").day(6).format("DD-MM-YYYY");
$(this).val(firstDate + " | " + lastDate);
}
});
$(document).on("show", "#dtpk[typeDP='weekly']", function(){
$(".datepicker-days tbody tr").addClass("weekly");
});
$(document).on("click", ".getVal", function(){
		 
alert($("#input_txt_month_number").val());
//alert($("#dtpk").val());
});

.datepicker-days tbody tr.weekly:hover {
background-color: #808080;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<select class="selDateCustom">
<option value="day">Day</option>
<option value="year">Year</option>
<option value="month">Month</option>
<option value="week">Week</option>
</select>
<input type="text" id="dtpk"/>
<input type="hidden" id="input_txt_month_number">
<button class="getVal">GetVal</button>