CODEWITHSUNDEEP
jquerydatetimepicker
Sudheer Ravipati
Sudheer Ravipati

Reputation: 17

jquery datetime picker control popup

I am using jQuery DateTimePicker plugin from http://xdsoft.net/jqplugins/datetimepicker/. I don't want to open the calendar popup when focus on textbox instead of that i want to give some image button at the end of textbox and when user clicks on image button then only calendar popup should open for date time selection. When focus on textbox user should be able to enter manually. if popup is coming sometimes popup is coming on above textbox so we can't see anything in textbox to enter manually. sample code is as follows:

     $('#StartDate').datetimepicker({
            value: defaultStartDateTime,
            step: 15,
            closeOnDateSelect: true,
            format: 'm/d/Y H:i',
            mask: true }); 
     $('#StartDate').focus(function () {             
            $('#clientLogsStartDate').datetimepicker('hide');                           
     });

Upvotes: 1

Views: 527

Answers (1)

User863
User863

Reputation: 20039

Try turn off datetimepicker events

open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart


$('#StartDate').datetimepicker({
  value: new Date(),
  step: 15,
  closeOnDateSelect: true,
  format: 'm/d/Y H:i',
  mask: true
}).off('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart')

$('button').on('click', function() {
  $('#StartDate').datetimepicker('show')
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />

<input id="StartDate" type="text">
<button>Show</button>

Upvotes: 1

Related Questions