代码之家  ›  专栏  ›  技术社区  ›  Francesco G.

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

  •  0
  • Francesco G.  · 技术社区  · 7 年前

    我只想要一个日期选择器来选择多个句点。

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

    对于月份设置,我想显示月份名称,但得到月份的值。

    当我选择七月时,我想在日期选择器中看到“七月”,但如果我点击按钮,我想看到“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 回复  |  直到 7 年前
        1
  •  2
  •   Lalji Tadhani    7 年前

    改变 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>