javascript - i have error with jquery datetime picker that change the time when i focus out the controll

i am using jquery datetime picker my problem is when i select the time and use tab button it will change to minus 1 hours means if i select 9.30 am and click on tab button it will be 8.30 am and it will countinuely do minus when ever i use tab on that controll

here you can see that i have select 9.30 AM but when focus out on this control it will automatically do 8.30 AM here is a code

       <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=".10.0/jquery.timepicker.min.css">
    <script src=".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',   

        });

here you can see that i have select 9.30 AM but when focus out on this control it will automatically do 8.30 AM here is a code

       <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./ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
    <script src="https://cdnjs.cloudflare./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',   

        });

Share Improve this question edited May 9, 2018 at 9:47 asked May 7, 2018 at 9:31 Chitra Nandpal 4434 silver badges24 bronze badges

Please add your code or a fiddle to test in addition to the image – Ignacio Ara Commented May 9, 2018 at 9:37
i have added code – Chitra Nandpal Commented May 9, 2018 at 9:39
Full code with HTML and try to set all code in a fiddle like jsfiddle/boilerplate/jquery so we can help you – Ignacio Ara Commented May 9, 2018 at 9:41
i have added full code here – Chitra Nandpal Commented May 9, 2018 at 9:47
1 Havn't you got like, a crazy amount of js. refs, for date pickers? are you using all of them? hard to find are error with out know what you are using – DaCh Commented May 9, 2018 at 9:52

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

i got the solution for this

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

i have added validateOnBlur:false and its work for me

I test your code and i saw the problem that when you press tab if you choose 10.00 AM its became 09.00 AM and i checked the documentation and i figure out that you can bine moment.js as its written in the documentation

All you have to do to just add moment.js and then add this line to your codes

$('.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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<link href="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn./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>

and i already made for you here please check it out and tell me if its helps

Fiddle: https://jsfiddle/v82vkxpz/7/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - i have error with jquery datetime picker that change the time when i focus out the controll - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)