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

时间：2018-10-18 09:06:42

标签： jquery twitter-bootstrap datepicker momentjs

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

通过选择，选择期间类型，然后在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 个答案:

答案 0 :(得分：2)

将format mm更改为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>

相关问题
最新问题