Bootstrap Datepicker - 动态更改格式 - 设置月份名称获取月份值

Question

我希望只有一个日期选择器来选择多个期间。

通过选择，我选择了周期类型，并在 onChange 中设置了日期选择器（我必须删除它并重新初始化它）。

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

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

当我选择七月时，我想在日期选择器中看到“七月”，但如果我点击按钮，我想要“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>