CODEWITHSUNDEEP
bootstrap-datetimepickereonasdan-datetimepicker
Social analyzer
Social analyzer

Reputation: 3

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

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.

Upvotes: 0

Views: 4444

Answers (2)

VincenzoC
VincenzoC

Reputation: 31502

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>

Upvotes: 0

Youssef Ali Youssef
Youssef Ali Youssef

Reputation: 159

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.

Upvotes: 2

Related Questions