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

Posted 2023-05-08

【中文标题】Bootstrap Datepicker - 动态更改格式 - 设置月份名称获取月份值

【英文标题】：Bootstrap Datepicker - Change Format Dynamically - Set month name get month value

【发布时间】：2019-03-23 01:29:09

【问题描述】：

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

通过选择，我选择了周期类型，并在 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>

【问题讨论】：

我已经编辑了我的问题

【参考方案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>

【讨论】：

与您的代码一起看，七月并获得“七月”，但在7月选择时，我想在DatePicker中看到“七月”，当我点击按钮时，我希望有“07”。