如何在我的日期选择器中获取 DD/MM/YYYY 格式？

Question

我来自西班牙，我需要将 DD/MM/YYYY 格式放入我的日期选择器中，这是代码

<br>

<label for="from">Inicio de castigo </label>
<div class='input-group date' id='from'>
  <input type='text' id="from" name="from" class="form-control" readonly />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

<br>

<label for="to">Final de castigo </label>
<div class='input-group date' id='to'>
  <input type='text' name="to" id="to" class="form-control" readonly />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

<br>





<script type="text/javascript">
  $(function() {
    $('#from').datetimepicker({

      format: 'DD-MM-YYYY',
      maxViewMode: 0,
      language: 'es',
      daysOfWeekDisabled: '0,6',
      todayHighlight: true,
      minDate: new Date(1, 1, 2017),
      pickTime: false

    });
    $('#to').datetimepicker({

      format: 'DD-MM-YYYY',
      maxViewMode: 0,
      language: 'es',
      daysOfWeekDisabled: '0,6',
      todayHighlight: true,
      minDate: new Date(1, 1, 2017),
      pickTime: false
    });

  });
</script>

我在脚本中输入了 MM-DD-YYYY fromat，但是当我选择日历时，他给了我 MM-DD-YYYY 格式，即英国时间。今天是 2017 年 6 月 7 日，当我打开它时，它说是 2017 年 7 月 6 日。我该如何解决？这可能是 datetimepicker.es.js 文件的问题？ .谢谢你们的帮助:)

我在那个文件中有更多信息，我使用的所有脚本都有

<script type="text/javascript" src="<?=$base_url?>js/es-ES.js"></script>
<script src="<?=$base_url?>js/jquery.min.js"></script>
<script src="<?=$base_url?>js/moment.js"></script>
<script src="<?=$base_url?>js/bootstrap.min.js"></script>
<script src="<?=$base_url?>js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="<?=$base_url?>css/bootstrap-datetimepicker.min.css" />
<script src="<?=$base_url?>js/bootstrap-datetimepicker.es.js"></script>

Answer 1

更改格式：'DD-MM-YYYY' 格式：'DD/MM/YYYY'：

 <script type="text/javascript">
        $(function () {
            $('#from').datetimepicker({   

               format: 'DD/MM/YYYY',
                maxViewMode: 0,
                language: 'es',
                daysOfWeekDisabled: '0,6',
                todayHighlight: true,               
                minDate: new Date(1, 1, 2017),
                pickTime: false

            });
            $('#to').datetimepicker({

                format: 'DD/MM/YYYY',           
                maxViewMode: 0,
                language: 'es',
                daysOfWeekDisabled: '0,6',
                todayHighlight: true,
                minDate: new Date(1, 1, 2017),
                pickTime: false
            });

        });

    </script>

Answer 2

<script>
jQuery(document).ready(function () {

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' });
    jQuery('.datetimepicker').datetimepicker();

});
</script>

Answer 3

您可以像这样合并代码并缩短它：

$('#from, #to').datetimepicker({
      format: 'DD/MM/YYYY',
      maxViewMode: 0,
      language: 'es',
      daysOfWeekDisabled: '0,6',
      todayHighlight: true,
      minDate: new Date(1, 1, 2017),
      pickTime: false
});

Answer 4

<br>        
<label for="from">Inicio de castigo </label>
<div class='input-group date' id='from'>
    <input type='text' id="from" name="from" class="form-control datepicker" readonly  />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

<br>

<label for="to">Final de castigo </label>
<div class='input-group date' id='to'>
    <input type='text' name="to" id="to" class="form-control datepicker" readonly />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

<br>




  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></p>

<script>
  $( function() {
    $( ".datepicker" ).datepicker({
        format: 'DD-MM-YYYY',
        maxViewMode: 0,
        language: 'es',
        daysOfWeekDisabled: '0,6',
        todayHighlight: true,
        minDate: new Date(1, 1, 2017),
        pickTime: false
    });
  } );
</script>

Answer 5

我刚刚注意到您的代码中存在可能会影响的错误：

 <div class='input-group date' id='from'>
                        <input type='text' id="from" name="from" class="form-control" readonly  />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </div>

                    <br>

                    <label for="to">Final de castigo </label>
                    <div class='input-group date' id='to'>
                        <input type='text' name="to" id="to" class="form-control" readonly />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </div>

在这里，您使用了两次 id “from” 和 id “to”。 id 值必须是唯一的。它应该只是所有代码中的一个。在这种情况下，它应该在类 'input-group' 的 div 中。

看这个例子：

  <div class='input-group date' id='datepicker1'>
               <input type='text' class="form-control" placeholder="Select preferred meeting date"/>
               <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
               </span>
           </div>

之后你可以通过下面的javascript代码来选择日期选择器的格式：

 <script type="text/javascript">
                $(function () {
                    $('#datepicker1').datetimepicker({
                      viewMode: 'days',
                      format: 'DD/MM/YYYY'
                    });
                });
        </script>

这应该可以完美运行。我希望这可以帮助你。