How to wrap custom tag around {^{datepicker /}} and pass all props

Question

I'd like to create a custom tag, containing a datepicker control. How can I pass all properties from the custom tag to the datepicker control?

The custom tag should look like this:

{^{mycustomdatepicker 
            aDate
            label="Date"
            dataFormat="yy-mm-dd" 
            dateFormat="dd.mm.yy"
            _showOn="button"
            _buttonImageOnly= true
            _buttonText= "Choose middle date"
 /}}

The template for the custom tag like this

<div>Caption: ~tagCtx.props.label</div>
{^{datepicker /}}

How do I pass all props thru to the datepicker control at once?

Note: I know, I could pass each prop on it's own, e.g.:

{^{datepicker dateFormat= ~tagCtx.props.dateFormat _showOn=~tagCtx.props._showOn ... /}}

Answer 1

It looks like what you need is to have your custom tag derive from the {{datepicker}} tag:

mycustomdatepicker: {
    baseTag: "datepicker", 
    ...

See Specifying tag inheritance: the baseTag option, and Custom datepicker tags.

Then, on your derived tag you can add additional UI by overriding the default template:

mycustomdatepicker: {
    baseTag: "datepicker", 
    template: "<div>Caption: {^{:~tagCtx.props.label}}</div>"
    + "{^{include tmpl=#content/}}..."
}

See Rendering wrapped block content, and this sample.

By following that pattern you don't need to pass props and parameters through to a wrapped {{datapicker}}. The {^{include tmpl=#content/}} will render as the original datepicker did, but can have additional rendered content before and after...

It is also possible to use a render method for your derived tag, rather than overriding the template, along the lines of:

mycustomdatepicker: {
    baseTag: "datepicker", 
    render: function(date) {
        return "<div>Caption: " + this.tagCtx.props.label + "</div>"
        + this.tagCtx.render(date) + "...";
    }
}

See this sample