//~OPTIONS
{
  clientInclude:    ["fcfControls:templates/datetime-edit/dtsel-master/dtsel.css",
                    "fcfControls:templates/datetime-edit/dtsel-master/dtsel.js"],
  clientRendering:  true,
  lockTemplate:     false,
  autoUpdate:       true,
}

//~ARGUMENTS
{
  value:         undefined,
  enable:        true,
  width:         "250px",
  format:        "Y-m-d H:i:s",
}

//~TEMPLATE
<table class="@{{decor.textEditTableClass}}@" style="width:@{{args.width}}@">
<tr>
  <td width="100%">
    <input
      autocomplete="off"
      name="input"
      type="text"
      @{{args.autofocus ? "autofocus" : ""}}@
      @{{!args.enable   ? "readonly" : ""}}@
      class="@{{decor.textEditClass}}@"
      style='width:100%'
      fcfEventClick="wrapper.onClick(event)"
      fcfEventInput="wrapper.onInput(event)"
      value="@{{fcf.encodeHtml(fcf.dateFormat(args.value, args.format))}}@"
      ></input>
  </td>
</tr>
</table>
<input name="dtsel" style="display:none" fcfEventInput="wrapper.onInputDT(event)"/>
