솔류션의 표준소스에는 일자, 시간, 분을 개별 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>
사용해본 결과 매우 만족스럽다. 일단 소스가 단순해지고 컨트롤 사용이 훨씬 편하다.