使用新格式重新初始化 bootstrap 日期时间选择器

Question

我的表单中的日期和时间字段很少，当加载表单时，日期和时间格式将是 mm/dd/yyyy 和 hh:mm a，在用户更改区域设置下拉值后US then time日期和时间格式应修改为dd/mm/yyyy和HH:mm格式。我试图在我的回调函数中分离并重新初始化 datetimepicker，但选择器没有更新为新格式。我为日期字段尝试了以下代码。

$('.datepicker').each(function() {
                    //detach
                    $(this).datetimepicker('remove');
                    //reinitialize
                    $(this).datetimepicker({
                        useCurrent: false,
                        format: "DD/MM/YYYY",
                        pickTime: false
                      });
                    $(this).attr("placeholder", "dd/mm/yyyy");
                    console.log( $(this).val() );
                        //$(this).val(moment($(this).val(), 'DD/MM/YYYY').format('MM/DD/YYYY'));
                });

Answer 1

我最近做了类似的东西，我随着复选框状态的变化而改变了格式。我希望这有帮助。

           
 // by default I set the  inputfield format to 'DD/MM/YYYY' 
  $(function () {
     $('#datetimepicker1').datetimepicker({                        
      allowInputToggle: true,
      format: 'DD/MM/YYYY'
     });
  });
  
 // I changed format of the inputfield as the checkbox state changes 
  $("#interval").change(function () {
     
    if($(this).prop("checked") == true){
  
        $('#datetimepicker1').data("DateTimePicker").format("DD/MM/YYYY HH:mm A");
    } else {
       $('#datetimepicker1').data("DateTimePicker").format("DD/MM/YYYY");
  
      }
         
 });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>



<body>

<div class="checkbox"> 
  <label>
    <input type="checkbox" id="interval" >
   time:
  </label>
</div>



<div class='col-sm-3'>           
  <div class="form-group" >
      <div class='input-group date' id="datetimepicker1" >
                <input type="text" class="form-control"  placeholder="Select Date"  />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar "></span>
                </span>                
      </div>
   </div>
</div>

</body>

使用新格式重新初始化 bootstrap 日期时间选择器

Reinitialize bootstrap datetimepicker with new format

jquery

datetimepicker

bootstrap-datetimepicker