javascript - How do I specify the date format of Tempus Dominus 6 (getdatepicker)? - Stack Overflow

admin管理员组

文章数量:1287637

I'm using version 6 of Tempus Dominus, whose documentation is found at /.

My question is:

• How do I set the date format?

I have this HTML control:

<div class="col-auto">
    <label for="fromDateInput">From date:</label>
    <div class="input-group" id="fromDate" data-td-target-input="nearest" data-td-target-toggle="nearest">
        <input id="fromDateInput" type="text" class="form-control" data-td-target="#fromDate">
        <span class="input-group-text" data-td-target="#fromDate" data-td-toggle="datetimepicker"><span class="fa-solid fa-calendar"></span></span>
    </div>
</div>

And I have the following JavaScript configuration of the Tempus Dominus datepicker control:

const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
    display: {
        ponents: {
            clock: false
        }
    },
    localization: {
        startOfTheWeek: 1
    }
});

In the browser, the control looks like this:

I then select a date:

As you can see in the field, the date is written as 06/22/2022. However, I would like the format to be YYYY-MM-DD, such that the date in this instance bees 2022-06-22. How do I achieve that?

I'm using version 6 of Tempus Dominus, whose documentation is found at https://getdatepicker./6/.

My question is:

• How do I set the date format?

I have this HTML control:

<div class="col-auto">
    <label for="fromDateInput">From date:</label>
    <div class="input-group" id="fromDate" data-td-target-input="nearest" data-td-target-toggle="nearest">
        <input id="fromDateInput" type="text" class="form-control" data-td-target="#fromDate">
        <span class="input-group-text" data-td-target="#fromDate" data-td-toggle="datetimepicker"><span class="fa-solid fa-calendar"></span></span>
    </div>
</div>

And I have the following JavaScript configuration of the Tempus Dominus datepicker control:

const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
    display: {
        ponents: {
            clock: false
        }
    },
    localization: {
        startOfTheWeek: 1
    }
});

In the browser, the control looks like this:

I then select a date:

As you can see in the field, the date is written as 06/22/2022. However, I would like the format to be YYYY-MM-DD, such that the date in this instance bees 2022-06-22. How do I achieve that?

• javascript
• date
• datepicker
• tempus-dominus-datetimepicker

Share Improve this question Follow asked Jun 22, 2022 at 14:16 Daniel JonssonDaniel Jonsson 3,93166 gold badges5555 silver badges7474 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

I found documentation for it on the plugins overview page: https://getdatepicker./6/plugins/

It has the following example:

Per Picker
It is possible to use this system per picker. For instance:

const td = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
td.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }

The code above would affect a single picker but not globally. You could easily adapt this code to have a mon formatting function taking in a format string.

So I adapted my code in the following way:

const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
    display: {
        ponents: {
            clock: false
        }
    },
    localization: {
        startOfTheWeek: 1
    }
});
picker.dates.formatInput = date => moment(date).format('YYYY-MM-DD')

And now the date format looks like I want it:

As you can see, the date is now written 2022-06-22.

And in case you don't want to use moment.js…

const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {});
picker.dates.formatInput = date =>
    date.getFullYear() + '-' +
    ("0"+(date.getMonth() + 1)).slice(-2) + "-" +
    ("0" + date.getDate()).slice(-2);

After submit form, correct format changes to default format.

if using jquery, and your plugin is >= 6.2.7.

• load the plugins customDateFormat.js
• set your tempusDominus to extend custom format

 tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);

Complete code like

tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);

$('#fromDate').tempusDominus({
      localization: {
        format: 'yyyy-MM-dd',
      }
    });

Reference: https://getdatepicker./6/plugins/customDateFormat.html

本文标签： javascriptHow do I specify the date format of Tempus Dominus 6 (getdatepicker)Stack Overflow