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

Asked 7/5, 2018 at 9:31 Answered 11/5, 2018 at 7:57

Solved javascript jquery jquerydatetimepicker

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="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',   

        });

Unleash answered 7/5, 2018 at 9:31 Comment(6)

Please add your code or a fiddle to test in addition to the image – Cob 9/5, 2018 at 9:37

i have added code – Unleash 9/5, 2018 at 9:39

Full code with HTML and try to set all code in a fiddle like jsfiddle.net/boilerplate/jquery so we can help you – Cob 9/5, 2018 at 9:41

i have added full code here – Unleash 9/5, 2018 at 9:47

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 – Trip 9/5, 2018 at 9:52

There was issue discovered github.com/xdan/datetimepicker/issues/436 – Young 16/5, 2018 at 7:27

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

Unleash answered 11/5, 2018 at 7:57 Comment(0)

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 combine 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.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>

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

Fiddle: https://jsfiddle.net/v82vkxpz/7/

Levitation answered 9/5, 2018 at 10:24 Comment(0)

Recommended topics

Hot tags