Question

我的表单中有几个日期和时间字段，当表单加载时，日期和时间格式为mm / dd / yyyy和hh：mm a，用户更改除美国以外的区域设置下拉值时间日期和时间格式应修改为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>

使用新格式

1 个答案: