Answers

• allan Posts: 63,075Questions: 1Answers: 10,385 Site admin

  April 2018

  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 Posts: 7Questions: 1Answers: 0

  April 2018 edited April 2018

  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 Posts: 7Questions: 1Answers: 0

  April 2018

  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 Posts: 63,075Questions: 1Answers: 10,385 Site admin

  April 2018

  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 Posts: 7Questions: 1Answers: 0

  April 2018

  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 Posts: 63,075Questions: 1Answers: 10,385 Site admin

  April 2018

  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 Posts: 7Questions: 1Answers: 0

  May 2018

  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 Posts: 63,075Questions: 1Answers: 10,385 Site admin

  May 2018 Answer ✓

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

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

  Allan
• kwarnock Posts: 7Questions: 1Answers: 0

  May 2018

  Works perfectly - thanks for all of your help Allan!