Bootstrap Datepicker - динамическое изменение формата - установка имени месяца, получение значения месяца - PullRequest
Новая
       28

Bootstrap Datepicker - динамическое изменение формата - установка имени месяца, получение значения месяца

0 голосов
/ 18 октября 2018

Я хочу, чтобы только один указатель даты выбирал несколько периодов.

С помощью выбора я выбираю тип периода, а с помощью OnChange устанавливаю указатель даты (я должен удалить его и повторно инициализировать).

Для настройки недели я назначил класс для выделения недели, а при изменении даты или закрытии всплывающего окна я назначил значение.

Для настройки месяца я хотел бы отобразить название месяца, но получитьзначение месяца.

Когда я выбираю июль, я хочу видеть в DatePicker «июль», но если я нажимаю на кнопку, я хочу, чтобы «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 голосов
/ 18 октября 2018

Изменить 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>
...