如何使用引导日期选择器在您的应用程序上获取正确的日期格式？

2024-05-21 • 问答

我在使用Boostrap DatePicker时遇到一个小问题，问题是input-daterange上日期的格式。例如。 2020年1月8日。它应阅读以下格式，并应被用户很好地理解。例如09/01/2020。以下是我使用Bootstrap DatePicker的逻辑，我愿意采用更好的方法来使用从开始日期到结束日期的日期。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
 <!---DatePicker for startDate and endDate.
   ----> 
   <div class="d-flex justify-content-start">
   <div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
 <div class="input-daterange input-group" id="datepicker">
   <input type="text" class="input-sm form-control" name="from" placeholder="startdate"/>
   <span class="input-group-addon">To</span>
   <input type="text" class= "input-sm form-control" placeholder="enddate"/>
     </div>
     </div>
  </div><br>
  // date functionality
 $(document).ready(function() {
   var year = (new Date).getFullYear();
   $('.input-daterange').datepicker({
     dateFormat: "dd-mm-yy",autoclose:true,minDate: new Date(year,1),maxDate:new Date(year,11,31)

   });
 });

您可以通过使用format选项而不是dateFormat

来实现此目的。

$(document).ready(function() {
   var year = (new Date).getFullYear();
   $('.input-daterange').datepicker({
     format: "dd-mm-yy",autoclose:true,minDate: new Date(year,1),maxDate:new Date(year,11,31)
   });
 });

$(document).ready(function() {
   var year = (new Date).getFullYear();
   $('.input-daterange').datepicker({
     format: "dd-mm-yyyy",31)
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
 <!---DatePicker for startDate and endDate.
   ----> 
   <div class="d-flex justify-content-start">
   <div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
 <div class="input-daterange input-group" id="datepicker">
   <input type="text" class="input-sm form-control" name="from" placeholder="startdate"/>
   <span class="input-group-addon">To</span>
   <input type="text" class= "input-sm form-control" placeholder="enddate"/>
     </div>
     </div>
  </div><br>

希望这会有所帮助！

这里是一个例子。供您进一步参考，请访问bootstrap-datetimepicker

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

如何使用引导日期选择器在您的应用程序上获取正确的日期格式？

zvee2 回答：如何使用引导日期选择器在您的应用程序上获取正确的日期格式？

大家都在问