0

How do I set no keyboard input for Datetimepicker in default settings?

datetimepicker : {
     icons: {
         time: "fa fa-clock-o",
         date: "fa fa-calendar",
         up: "fa fa-arrow-up",
         down: "fa fa-arrow-down",
         today: "fa fa-camera"
     },
     format : "MMM DD, YYYY HH:mm"
},

This is my default setting for datetime picker and I want to disable input from keyboad.

Note: I made read only, but delete key is reponding.

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
Social analyzer
  • 3
  • 1
  • 4
  • Can you return false from the onkeydown event? Like the answer in this question: [ttps://stackoverflow.com/questions/13447057/bootstrap-datepicker-avoid-text-input-or-restrict-manual-input](https://stackoverflow.com/questions/13447057/bootstrap-datepicker-avoid-text-input-or-restrict-manual-input) – Paul Adam Jun 25 '18 at 06:49

2 Answers2

2

there are 2 solutions, both related to prevent the keydown event. to do that you can use one of the following

<input onkeydown="return false" ... />

or

$("#yourInput").keydown(function (event) {
            event.preventDefault();
        });

I hope that help you.

Youssef Ali Youssef
  • 149
  • 2
  • 7
0

You can make your component readonly and set ignoreReadonly option to true, then you can use keyBinds option to prevent delete key to clear date selection.

As the docs says, keyBinds option:

Allows for custom events to fire on keyboard press.

Live example:

$('#datetimepicker1').datetimepicker({
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        today: "fa fa-camera"
    },
    format : "MMM DD, YYYY HH:mm",
    ignoreReadonly: true,
    keyBinds: {
        'delete': function () {
            return false;
        }
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-sm-12'>
  <div class="form-group">
    <div class='input-group date' id='datetimepicker1'>
      <input type='text' class="form-control" readonly/>
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • @Socialanalyzer you're welcome, glad it helped. Don't forget to mark the answer as accepted if you think that it solved your issue (see [here](https://stackoverflow.com/help/someone-answers) how to accept an answer), you also get reputation for it! – VincenzoC Jun 25 '18 at 09:21
  • Hey, I've been trying to fix an issue with this whole KeyBind for the past day. I want to only remove the default of the delete key press. I have tried the keyBinds: {'options': null} which does stop the component from clearing the field but it also prevents all the other default keyBind options from working. How do I only stop the delete key and not all of the other options? – edjm Sep 10 '20 at 12:18