Datetime picker plug-in code

Datetime picker plug-in code

MattDMattD Posts: 27Questions: 2Answers: 0

Hi,

This may be a silly question, but where does the plug in code for the datetime picker go? The plug-in is working to an extent, but if I put the plug in code in the js file for my table, it displays the calendar at the end of the table and nothing when I click on the field which is supposed to be datetime in the edit modal form.

Thanks!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,421Questions: 1Answers: 10,456 Site admin

    The load order should be something like this:

    1. jQuery
    2. DataTables
    3. TableTools (if you are using it)
    4. Editor
    5. Plug-ins
    6. Your initialisation code

    If that doesn't fix it, could you link me to the page so I can take a look?

    Thanks,
    Allan

  • MattDMattD Posts: 27Questions: 2Answers: 0

    Below is a Generator based version of the page. The only thing added is the datetimepicker. I've tried the plugin code everywhere in "js/table.location_schedule.js" as well as in the html below the javascript file loads. It always results in the calendar either where it is now, or the table not loading. As a side note, the default datepicker calendar packaged with editor works fine.

    http://tinyurl.com/p33xvpb

    Thanks in advance!

  • allanallan Posts: 63,421Questions: 1Answers: 10,456 Site admin
    Answer ✓

    There is something funny going on with the CSS there!

    Try adding this to your CSS:

    .datetimepicker {
      position: absolute;
      background: white;
      border: 1px solid #ddd;
    }
    

    Allan

  • MattDMattD Posts: 27Questions: 2Answers: 0

    The calendar is now styled and it pops up in the date selection, however it is still showing on the table page and the bar for the data selection extends further than the modal window. You will see what I mean.

  • MattDMattD Posts: 27Questions: 2Answers: 0

    I switched to the Bootstrap DateTimePicker(2) which links to this https://github.com/Eonasdan/bootstrap-datetimepicker and it works. Though there is some confusion because on the plugin page, it states that it requires the one linked in Bootstrap DateTimePicker(1).

    Are we able to use the options which don't go into the opts field, such as custom date formatting seen here http://eonasdan.github.io/bootstrap-datetimepicker/#example5?

    If this isn't available with this particular plugin, I can use the DatePicker for the date however I would still like to be able to get a 24 hour clock if possible.

    http://tinyurl.com/p33xvpb

    Thanks!

  • allanallan Posts: 63,421Questions: 1Answers: 10,456 Site admin

    Sorry for the long delay on this one. I've sorted out the links now - thanks for pointing that out.

    I've also added an attr option to the plug-in which can be used to set the data attributes. For example:

       type: 'datetime',
       attr: {
          "data-date-format": "YYYY-MM-DD"
       }
    

    Regards,
    Allan

This discussion has been closed.