使用新格式重新初始化bootstrap datetimepicker-Java 学习之路

我的表单中有几个日期和时间字段，当表单加载时，日期和时间格式为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'));
                });

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>

回复于 2024-04-27T07:36:41+08:00

使用新格式重新初始化bootstrap datetimepicker

1 回答

相关问题