Search code examples
jqueryhtmlbootstrap-datetimepicker

Bootstrap datetimepicker - How to set all picker tooltips at once?


The following are my example codes:

$('#ex1').datetimepicker({
    tooltips: {
            today: 'today',
            clear: 'clear',
            close: 'close',
        },
        format: 'YYYY/MM/DD',
        locale: 'zh-tw',
});

$('#ex2').datetimepicker({
    tooltips: {
            today: 'today',
            clear: 'clear',
            close: 'close',
        },
        format: 'YYYY/MM/DD',
        locale: 'zh-tw',
});

$('#ex3').datetimepicker({
    tooltips: {
            today: 'today',
            clear: 'clear',
            close: 'close',
        },
        format: 'YYYY/MM/DD',
        locale: 'zh-tw',
});

As above, the code is duplicate! How to set all picker tooltips and option at once?

I have tried add them to "calendar" class, and use

$('.calendar').datetimepicker({
    tooltips: {
            today: 'today',
            clear: 'clear',
            close: 'close',
        },
        format: 'YYYY/MM/DD',
        locale: 'zh-tw',
});

to set them, but not working...

Thank you!

---Updated: --- These are my code about class:

<input type='text' class="form-control calendar"  id='leave-end'>
<input type='text' class="form-control calendar" id='leave-start'>

And:

$('.calendar').datetimepicker({
            tooltips: {
                close: '關閉日曆',
                selectMonth: '選擇月份',
                prevMonth: '上個月',
                nextMonth: '下個月',
                selectYear: '選擇年份',
                prevYear: '前一年',
                nextYear: '下一年',
            },
            format: 'YYYY/MM/DD',
            locale: 'zh-tw',
        });

But not working and no error message, what wrong?

And

var options = {
            tooltips: {
                today: 'today',
                clear: 'clear',
                close: 'close',
            },
            format: 'YYYY/MM/DD',
            locale: 'zh-tw',
        }
$('#leave-start').datetimepicker({options});

I copy and paste but got 1 warning jquery.min.js:2 jQuery.Deferred exception: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded and 1 error jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded


Solution

  • Just use variables.

    var options = {
        tooltips: {
            today: 'today',
            clear: 'clear',
            close: 'close',
        },
        format: 'YYYY/MM/DD',
        locale: 'zh-tw',
    }
    
    $('#ex1').datetimepicker({options});
    $('#ex2').datetimepicker({options});
    $('#ex3').datetimepicker({options});
    

    Update: Adding datetimepicker by selecting class should also work so check if you set class correctly.