9

我正在使用 jquery 日期时间选择器我的问题是当我选择时间并使用选项卡按钮时，它会变为负 1 小时，这意味着如果我选择上午 9.30 并单击选项卡按钮，它将是上午 8.30 并且它会在我有任何时候做负数使用该控件上的选项卡

在此处输入图像描述

在这里你可以看到我选择了 9.30 AM 但是当专注于这个控件时它会自动做 8.30 AM 这是一个代码

       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Searchbox</title>
    <link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
    <script src="~/scripts/jquery.min.js"></script>
    <script src="~/scripts/moment.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
    <script src="~/scripts/jquery.datetimepicker.full.min.js"></script>
    <script src="~/scripts/VagaroDateTimePicker.js"></script>
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
     <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>


</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <input type="text" class="datepicker" />
            </div>
        </div>
    </div>



 $('.datepicker').datetimepicker({
            format: 'M-d-Y g:i A',   

        });
4

2 回答 2

6

我得到了解决方案

 $('.datepicker').datetimepicker({
          //  datepicker: false,//hide date 
           // format: 'DD-M-YYYY hh:mm A'
            format: 'M-d-Y g:i A',
            formatTime: 'g:i A',
            validateOnBlur: false,
        });

我添加了 validateOnBlur:false 及其对我的工作

于 2018-05-11T07:57:24.900 回答
2

我测试了你的代码，我看到了当你按Tab如果你选择10:00 AM它变成了09:00 AM的问题，我检查了文档，我发现你可以结合moment.js，因为它在文档中写

在此处输入图像描述

您只需添加 moment.js 然后将此行添加到您的代码中

$('.datepicker').datetimepicker({
  format:'DD.MM.YYYY h:mm a',
  formatTime:'h:mm a',
  formatDate:'DD.MM.YYYY'
});

$.datetimepicker.setDateFormatter('moment');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col-md-6 mb-5">
      <input type="text" class="datepicker"/>
    </div>
    <div class="col-md-6 mb-5">
      <input type="text" class="datepicker" />
    </div>
    <div class="col-md-6 mb-5">
      <input type="text" class="datepicker" />
    </div>
  </div>
</div>

我已经在这里为你做了，请检查一下并告诉我它是否有帮助

小提琴：https ://jsfiddle.net/v82vkxpz/7/

于 2018-05-09T10:24:20.517 回答