How do you prevent the iphone virtual keyboard from opening when using editor with datetime picker?

kwarnock

Hello,
I have a field of my table that is being edited with the datetime picker.
}, {
"label": "Clock out:",
"name": "clockout_time",
"type": "datetime",
"format": "YYYY-MM-DD HH:mm",
}, {
It works great, but on the iphone the screen is partially blocked by the pop up of the virtual keyboard in addition to the calendar/time picker. How can I prevent the virtual keyboard from opening?

allan

I don't actually have an iPhone handy to try it, but could you try the keyInput option of the datetime field? Set it to be false and Safari might see it as now allowing key input and so not show the virtual keyboard.

Allan

kwarnock

Thanks for the response over the weekend Allan! This is what I was looking for, but unfortunately it does not prevent the keyboard on the iPhone.

I also tried the following from an older post of yours. It also prevented the key input but did not prevent the keyboard from displaying.

$( editor.field( 'clockout_time' ).input() ).on( 'keydown', function ( e ) {
e.preventDefault();
} );

kwarnock

After doing more research I have confirmed that the method described below from an older github post ( https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1668 ) resolves the problem for iPhone datepickers outside of DataTables.

"gero90 commented on Nov 27, 2016
This worked for me, showing the picker both with the icon and the input field, but no keyboard shown:"

<input type='text' class="form-control" placeholder="Fecha Inicio" readonly="true" />

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});

For DataTables, the only reference I have seen to set the control to readonly is via type="readonly'. Unfortunately this obviously won't work since type already = "datetime". If anyone can provide the method to make this work in DataTables, it is most appreciated and may help others to resolve the issue.

Separately, I am working to resolve the same challenge as written in https://m.datatables.net/forums/discussion/35697
by using the answer provided:

"You can use the field().inst() method that the plug-in exposes to access the Bootstrap Datetime picker instance:

editor.field( 'timecards.work_end' ).inst()

and then use its API to modify it as required."

I have tried the syntax shown below

editor.field('clockin_time').inst().datetimepicker.data.minDate="2018-04-01";

with the js added

<script src="<?= base_url() ?>assets/plugins/dataTables/js/editor.datetimepicker.js"></script>

but get this error:
"Uncaught TypeError: editor.field(...).inst is not a function
at HTMLTableCellElement.<anonymous> (5:9253)
at HTMLTableElement.dispatch (jquery.min.js:3)
at HTMLTableElement.r.handle (jquery.min.js:3)"

What is the proper syntax to resolve this error and set the minDate?

allan

You can add attributes such as readonly to the input for datetime using its attr option:

{
"label": "Clock out:",
"name": "clockout_time",
"type": "datetime",
"format": "YYYY-MM-DD HH:mm",
"attr": {
  "readonly": true
}
}

If that does the business for you, I'll add that into the library when keyInput is set.

Allan

kwarnock

Yes, this does the business - works great! Thanks so much Allan.

Any tips for syntax for the second part of my question above?

<script src="<?= base_url() ?>assets/plugins/dataTables/js/editor.datetimepicker.js"></script>

allan

Sorry - I missed that part!

You can use the field().inst() method that the plug-in exposes to access the Bootstrap Datetime picker instance:

That is specifically for the Bootstrap Datetime picker plug-in. Not the built in datetime.

Use the minDate() method of the datetime field type if you want to programmatically set the minimum date.

Allan

kwarnock

Thanks Allan. I am hung on getting the correct syntax to make this work. My attempt below (with a fixed date temporarily used for debug purposes) does not seem to make it to exposing the Bootstrap plug in.

editor.field('clockin_time').inst().datetimepicker.data.minDate="2018-04-01";

Since the error is
"Uncaught TypeError: editor.field(...).inst is not a function
at HTMLTableCellElement.<anonymous> (5:9253)
at HTMLTableElement.dispatch (jquery.min.js:3)
at HTMLTableElement.r.handle (jquery.min.js:3)"

and the syntax past the inst() does't seem to affect the error message, I am assuming that something is wrong with "editor.field('clockin_time').inst()." part of the syntax. What is missing?

allan

editor.field('clockin_time').minDate( .... );

should be all you need for the built in datetime input.

Allan

kwarnock

Works perfectly - thanks for all of your help Allan!