how to display calendar icon with masked datetimepicker input

dedesi

I used Malor's datetimepicker (malot.fr/bootstrap-datetimepicker/index.php) and Bootstrap 3.

With method Bootstrap DateTimePicker (1) https://editor.datatables.net/plug-ins/field-type/editor.datetimepicker I can integrate my datetimepicker into popup editor to change this code:

conf._input = $('<input/>')
            .attr( $.extend( {
                id: conf.id,
                type: 'text',
                'class': 'datetimepicker'
            }, conf.attr || {} ) )
            .datetimepicker( $.extend( {}, conf.opts ) );

to this one:

conf._input =
                    $('<input/>')
                .attr( $.extend( {
                    id: conf.id,
                    type: 'text',
                    'class': 'datetimepicker'
                }, conf.attr || {} ) )
                .mask('0000-00-00', {placeholder: '____-__-__'})
                       .datetimepicker( $.extend( {}, conf.opts ) );

It works fine BUT there is no calendar icon at the end of date time's input element.

Normally a field definition looks like this, the span element is the key:

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="kelt" class="control-label">Kelt</label>
                                <div class="input-group date" id="keltpicker">
                                    <input id="kelt" name="kelt" type="text" data-type="date" class="form-control"
                                           value="{$today}" onchange="updHatido(true)"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar">
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>

and some postscript to define datetimepicker and mask:

$('#keltpicker').datetimepicker({
    startView: 'month',
    minView: 'month',
    maxView: 'month',
    viewSelect: 'month',
    format: 'yyyy-mm-dd',
    language: 'hu',
    autoclose: true,
    weekStart: 1,
});
$('#kelt').mask('0000-00-00', {placeholder: '____-__-__'});

My solution is in modified plugin code:

var inp = $('<input/>')
                .attr( $.extend( {
                    id: conf.id,
                    type: 'text',
                    'class': 'datetimepicker'
                }, conf.attr || {} ) )
                .mask('0000-00-00', {placeholder: '____-__-__'});
            
var icon = $('<span/>').attr({class: 'input-group-addon'})
     .append($('<span/>').attr({class: 'glyphicon glyphicon-calendar'}));
            

            conf._input = $('<div/>').attr({class: 'input-group date'}).append(inp,icon)
                .datetimepicker( $.extend( {}, conf.opts ) );

This generates similar code like my example, and calendar popup is appear by clicking on both icon or input field, but there are two problems:

• clicking on Ok button the sent form data contains always not the set date.
• open date popup and press esc the popup calendar does not disappear.

Is there any example how to make this complex element on editor popup windows?

Best Regards
Peter