DateTime display() as an option

Loren Maxwell

For the DateTime plugin, display() is available through the api, but an option would be helpful as well.

{
    label: 'Some date field',
    name: 'some_date',
    type: 'datetime',
    opts: {
        display: {
            year: 1982,
            month: 10
        }
    }
},   

or maybe...

{
    label: 'Some date field',
    name: 'some_date',
    type: 'datetime',
    opts: {
        display: [1982, 10]
    }
},   

The display option would probably only take affect if there is no current value or default value set.

allan

Good idea! Added to the list .

Allan

Loren Maxwell

@allan -- just curious as to if this might be in the next version (1.6.2 or 1.7) of datetime.

I have several pages that represent years and Editors for the tables on those pages.

I don't want to set a default value because some of the dates will be unknown, but I'd like the calendar to be ready with the year set based on the page.

Otherwise changing the year on the calendar from 2025 to 1982 or whatever adds a couple of clicks and a scroll through the years for each entry.

I've tried to approach it this way:

editor.on('open', function (e, mode, action) {
    var v = editor.val('game_date');
    if (!v || v === '' || v === null) {
        editor.val('game_date', '1982-10-01');
        editor.val('game_date', '');
    }
});

However the calendar reverts back to the current date (and the2025 year) on editor.val('game_date', '').

Should I approach it differently? Or will you have the update done soon anyway?

allan

I hope so, but can't say for certain while it will be done. I'm currently focused on a major update in DataTables core.

I don't know that there is a better option that getting it implemented I'm afraid.

Allan

Loren Maxwell

Ok, thanks -- and thanks for all the great support!

allan

Its been a funny old day here, so rather than trying to do a long period of focused work, I've been doing little bits and thought I'd look at this.

I was midway through writing a reply saying it would be a bit tricky to do, when inspiration hit! I've just made this commit to add support for a display option on initialisation. Now if the field doesn't have a value then the picker will show that month / year. If it does have a value, then it displays that month / year of course.

This is the option I went for:

        display: {
            year: 1982,
            month: 10
        }

to match the display() return. Both properties are required.

Allan

Loren Maxwell

YAY! Looking forward to the release!

Tiny improvements like this have HUGE impacts when doing hundreds or thousands of repetitive entries!

Loren Maxwell

Morning @allan -- any estimate when this latest version might be available through the CDN?

allan

No other immediate plans for changes in DateTime, so that's 1.6.2 tagged up and released. Thanks for the nudge.

Allan

Loren Maxwell

Thanks, @allan!

And this works exactly as requested!

But... this is one of those times that after getting what I asked for I then realized it wasn't actually what I wanted

In hindsight, what I really want is a way to call this: https://datatables.net/extensions/datetime/api/display()

when using DateTime, but I don't see where that's possible.

Basically I have two controls on my Editor form, one for the year of a game (season_code) and one for the specific date of that game (game_date).

I'd like the game_date (a DateTime) to update when the season_code changes.

Something like:

// When the season_code changes
.dependent('season_code', function (val, data, callback, e) {

    // Get current game_date val
    const v = this.field('game_date').val()
    
    // If there is no current game_date val
    if (!v || v === '' || v === null) {

        // Then access the DateTime api display()
        // method to update the game_date display
        // (but NOT the val) to set the year to the
        // season_code (val) and the month to October (10)
        this.field('game_date').display(val, 10)

        // This is the area I'm struggling with -- I don't see
        // a way to access the DateTime display() method
        // from here

    }    
    return true
})

allan

Try adding:

DataTable.Editor.fieldTypes.datetime.inst = function (conf) {
  return conf._picker;
};

before you initialise the Editor. Then you should be able to do:

this.field('game_date').inst().display(val, 10)

i.e. inst() will get the DateTime picker instance so you can work with its API.

Allan

Loren Maxwell

Thanks, @allan! Works like a charm!

Sorry for not realizing ahead of time that's what I was looking for, but hopefully someone else will find the display() option useful!

allan

No worries. It makes a lot of sense to have it!

Allan

Loren Maxwell

After some use, I think this should be included as part of the basic DateTime editor field for others who might want to set the display based on other fields:

DataTable.Editor.fieldTypes.datetime.inst = function (conf) {
  return conf._picker;
};

Or even better a method to call display() directly:

// No inst() = more intuitive
this.field('game_date').display(val, 10)

allan

I've actually committed it already . It will be in the nest release!

Allan

Loren Maxwell

Awesome! Thanks, @allan!