0

I'm using the tempusdominus datetimepicker for my cakephp 2.9 project but can't get it to run. I'm using cakephp FormHelper so I use in my views:

<?php echo $this->Form->input('start',array('class' => 'form-control','label' => 'Start','type' => 'text'));?>

Which generates:

<input name="data[Event][start]" class="form-control" type="text" value="2018-12-07 02:52:00" id="EventStart" required="required">

This with the type=text I generate a simple input instead of the 3/5 selects with usually generate when using a date or datetime field then I call the javascript:

$('#EventStart').datetimepicker({format: 'YYYY-MM-DD hh:mm:00'});

And this usually transforms that simple text field into a datetimepicker. However it's not working.

I have this very same method in other views of my project using some other old datepicker and works great, why not here?

It may have something to do with this view being inside a plugin?

I have the js and css for this component linked at the top of the view as follows:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />

What is wrong??

Chrishow
  • 363
  • 1
  • 5
  • 13
  • No console errors at all. And the input id is generated by cakephp itself: `` the input works fine ad you can see it's retieving the field value from the db, what's not doing is behave as a datetimepicker. – Chrishow Dec 07 '18 at 21:49
  • It's not a selector problem since I've just tried with the input written directly in html instead of using the FormHelper, it's more like the script it's not working somehow. – Chrishow Dec 07 '18 at 21:54
  • 1
    I'm not asking if it is a selector issue. I'm asking if it is a timing issue. Put a console log of the length of the selector in the code immediately before you use it. If it logs 1, it's finding it – Taplar Dec 07 '18 at 21:57
  • `console.log($('#EventStart').length);` it's logging 1. – Chrishow Dec 07 '18 at 22:24
  • https://tempusdominus.github.io/bootstrap-4/Usage/#no-icon-input-field-only you're missing your data fields – Taplar Dec 07 '18 at 22:29
  • Shouldn't the script add those two data properties and other stuff itself? Anyway adding those two data properties did produce for the datetimepicker to appear but in a weird way since it doesn't dismisses when clicked outside. It also keeps on working even when I remove the init. – Chrishow Dec 07 '18 at 22:41
  • 1
    If the script adds them, why would their documentation show an example with it hard coded in the markup? And given that it didn't work without them, the answer to that should be pretty clear, :) – Taplar Dec 07 '18 at 22:42
  • Thanks a lot man, that makes sense I will keep on troubleshooting it or switch to another component. – Chrishow Dec 07 '18 at 22:49

1 Answers1

0

Try providing an id in your code:

Old Code:

<?php echo $this->Form->input('start',array('class' => 'form-control','label' => 'Start','type' => 'text'));?>

Updated Code:

<?php echo $this->Form->input('start',array('class' => 'form-control','label' => 'Start','type' => 'text','id' => 'EventStart'));?>

And initialize datetimepicker as:

$('#EventStart').datetimepicker({format: 'YYYY-MM-DD hh:mm:00'});
Rahul Bhagwat
  • 16
  • 2