솔류션의 표준소스에는 일자, 시간, 분을 개별 control로 제어해야하는 불편때문에 datetime data type을 한번에 제어할 수 있는 컨트롤로 합쳤다. 

 

<dom-module id="cc-datetime-field">
    <style>
        :host {
            display: flex;
            min-width: 130px;
        }    
    </style>
    
    <template>
        <sc-text-field  hidden="[[isSplitMode]]"
                        value="{{displayValue}}"
                        readonly="true"
                        class$="[[class]]">
        </sc-text-field>

        <div class="field-box" hidden="[[!isSplitMode]]">
            <sc-date-field  value="{{dt.ymd}}"
                            placeholder="일자"
                            default-value="[[defaultValue]]"
                            required="{{required}}"
                            readonly="{{readonly}}"
                            validator="onValidator"
                            on-select="onSelect">
            </sc-date-field>
            <div class="hspace-5"></div>
            <sc-combobox-field  value="{{dt.hh}}"
                                items="{{UT.getHour()}}" 
                                display-field="label" 
                                value-field="data"
                                placeholder="시"
                                class="w-60"
                                required="{{required}}"
                                readonly="{{readonly}}"
                                validator="onValidator"
                                on-select="onSelect">
            </sc-combobox-field>
            <div class="hspace-2"></div>
            <sc-label text=":"></sc-label>
            <div class="hspace-2"></div>
            <sc-combobox-field  value="{{dt.mm}}"
                                items="{{UT.getMin()}}" 
                                display-field="label" 
                                value-field="data"
                                placeholder="분"
                                class="w-60"
                                required="{{required}}"
                                readonly="{{readonly}}"
                                validator="onValidator"
                                on-select="onSelect">
            </sc-combobox-field>
        </div>
    </template>
    
    <script>
        Polymer({
            is : "cc-datetime-field",
            properties : {
                required : {
                    type : Object,
                    value : function() {
                        return false;
                    }
                },
                readonly : {
                    type : Object,
                    value : function() {
                        return true;
                    }
                },
                splitMode : {
                    type : Object,
                    value : function() {
                        return false;
                    }
                },
                isSplitMode : {
                    type : Object,
                    computed : "computedIsSplitMode(readonly, splitMode)"
                },
                defaultValue : {
                    type : Object,
                    value : function() {
                        return "";
                    }
                },
                value : {
                    type : Object,
                    notify : true,
                    observer : "_valueChanged"
                },
                displayFormat : {
                    type : String,
                    value : "yyyy/MM/dd HH:mm:ss"
                },
                displayValue : {
                    type : Object,
                    computed : "computedDisplayValue(value)"
                },
                dt : {
                    type : Object,
                    value : function() {
                        return {};
                    },
                },
                validator : {
                    type : Object,
                    value : function() {
                        return {};
                    }
                },
            },
            
            computedIsSplitMode : function(readonly, splitMode)
            {
                var me = this;

                var _isSplit = false;

                if (splitMode)
                {
                    _isSplit = true;
                }
                else
                {
                    if (readonly)
                    {
                        _isSplit = false;
                    }
                    else
                    {
                        _isSplit = true;
                    }
                }

                return _isSplit;
            },

            computedDisplayValue : function(value)
            {
                var me = this;

                return UT.formatDate(value, me.displayFormat);
            },

            _valueChanged : function(newValue, oldValue)
            {
                var me = this;

                if (UT.isNotEmpty(newValue))
                {
                    var _bfr = new Date(oldValue);
                    var _aft = new Date(newValue);

                    // 순환호출방지
                    if (!isNaN(_aft.getTime()))
                    {
                        if (_bfr.getTime() != _aft.getTime())
                        {
                            var _dt = {};
                            _dt.ymd = _aft;
                            _dt.hh  = _aft.getHours();
                            _dt.mm  = _aft.getMinutes();

                            me.set("dt", _dt);
                        }
                    }
                }
                else
                {
                    me.set("dt", {});
                }
            },

            observers : [
                "onChangeDT(dt.*)"
            ],
            
            onChangeDT : function(prop)
            {
                var me = this;
                var dt = prop.base;
                
                switch (prop.path)
                {
                    case "dt.ymd" :
                    case "dt.hh" :
                    case "dt.dd" :
                        if (!me.readonly)
                        {
                            if (UT.isNotEmpty(dt.ymd))
                            {
                                var _dt = new Date(dt.ymd);
                                var _hh = UT.toNumber(dt.hh);
                                var _mm = UT.toNumber(dt.mm);
                                var _ss = 0;
                                
                                if (UT.isDate(_dt))
                                {
                                    _dt.setHours(_hh);
                                    _dt.setMinutes(_mm);
                                    _dt.setSeconds(_ss);

                                    me.set("value", _dt);
                                }
                            }
                            else
                            {
                                me.set("value", null);
                            }
                        }
                        break;
                }
            },
            
            attached : function()
            {
                var me = this;

                if (!me._attachedCalled)
                {
                    me._attachedCalled = true;
                }
            },

            onValidator : function(value)
            {
                var me = this;

                if (UT.isFunction(me.domHost[me.validator]))
                {
                    return me.domHost[me.validator].call(me.domHost, me.value);
                }

                return true;
            },

            onSelect : function(event)
            {
                var me = this;

                me.fire("select", me.value);
            }
        });
    </script>
</dom-module>
<cc-datetime-field value="{{app.start_dt}}" class="align-center" split-mode="true" required="[[formula('isEditable')]]" readonly="[[!formula('isEditable')]]"></cc-datetime-field>

 

사용해본 결과 매우 만족스럽다. 일단 소스가 단순해지고 컨트롤 사용이 훨씬 편하다.