用新格式重新初始化引导日期时间选择器 [英] Reinitialize bootstrap datetimepicker with new format

查看:67
本文介绍了用新格式重新初始化引导日期时间选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的表单中没有几个日期和时间字段,在加载表单时,日期和时间格式为mm/dd/yyyy和hh:mm a,在用户更改了语言环境下拉值(美国以外)后,然后设置了日期和时间格式应修改为dd/mm/yyyy和HH:mm格式.我试图在回调函数中分离并重新初始化datetimepicker,但选择器未使用新格式进行更新.我为日期字段尝试了以下代码.

I have few date and time fields in my form, when the form is loaded the date and time format would be mm/dd/yyyy and hh:mm a, after user changes the locale dropdown value other than US then time date and time format should be modified to dd/mm/yyyy and HH:mm format. I tried to detach and reinitialize datetimepicker in my callback function, but the pickers are not getting updated with the new format. I tried the following code for date fields.

$('.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'));
                });

推荐答案

我最近做了一些类似的事情,随着复选框状态的更改,我更改了格式.我希望这有帮助.

I made something similar recently, I changed format as a checkbox state changes. I hope this helps.

           
 // 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>

这篇关于用新格式重新初始化引导日期时间选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆