Invoking date time plugin

Invoking date time plugin

aaronwaaronw Posts: 89Questions: 3Answers: 4

I'm trying to use the date time picker at https://editor.datatables.net/plug-ins/field-type/editor.datetimepicker . I downloaded the JS for the DT plugin as well as the JS and CSS for the picker itself. However, when I try to make a field of that type it doesn't seem to fire. Do I need to invoke the plugin separately in the editor.on ("open",... ) function? I added that but it doesn't seem to make a lot of difference. I did see the class datetimepicker applied to the input field using the html debugger so something seems to be working correctly.

var editor = new $.fn.dataTable.Editor({
    "ajax": "oncalledit.php",
    "table" :"#oncall",
    "fields":[
        {label:"Time of Call",name:"calltime",type: "datetime",opts:{format:'yyyy-mm-dd'}},
        {label:"Duration",name:"duration"},
        {label:"Callee",name:"callee"},
        {label:"Caller",name:"caller"},
        {label:"Method",name:"method"},
        {label:"Type",name:"type"},
        {label:"Details",name:"details"}
    ]
});

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin

    type: "datetime"

    That should really be all that is needed.

    I'd need a link to the page to understand why it isn't working please.

    Allan

  • aaronwaaronw Posts: 89Questions: 3Answers: 4

    ah-hah, I made some progress I'm using the Bootstrap styling and the popup for the calendar appears "beneath" the create new entry box. Poking through the HTML, the calendar appears to have a z-index of 1010. I can just see the bottom of it under the new entry box and when I click on one of the days it vanishes. However, it only does that when I have it invoked datetimepicker() in the editor.on("open") function. If I comment that out, there doesn't seem to be any response (but I still see the HTML it added)

  • aaronwaaronw Posts: 89Questions: 3Answers: 4

    So in bootstrap-datetimepicker.js:

          if (!this.zIndex) {
            var index_highest = 0;
            $('div').each(function () {
              var index_current = parseInt($(this).css('zIndex'), 10);
              if (index_current > index_highest) {
                index_highest = index_current;
              }
            });
            this.zIndex = index_highest + 10;
    

    and I think it sets it to 1010 because the edit box isn't there yet an the default is 1000? I choose 'new' from Buttons, and the edit box is 1050. I could probably smash this into submission by making it +100 instead of + 10 , but any other ideas on what is a cleaner way to fix it?

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Answer ✓

    I'd probably just set it in the CSS.

    Editor 1.5.2 is going to feature its own built in date / time picker which should work a bit more seamlessly.

    Allan

  • aaronwaaronw Posts: 89Questions: 3Answers: 4

    Ok thanks for the feedback. Any timeframe for a 1.5.2 release date? The less I need to use external libraries the better, as I've always found DT documentation and usability to be excellent.

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin

    Hoping it should be the end of this week. If not, early next.

    Allan

This discussion has been closed.