How to set css to custom tag (datepicker) in jsviews?

It might be a simple question for those who are already familiar with jsviews. It is taking me more than a hour to figure out how to set/append the CSS class to datepicket tag.

I am following this example: http://www.jsviews.com/#samples/tag-controls/datepicker/with-validation

                    <div class="col-md-3">
                        {^{validate enddate
                        required=false
                        ^minday=startdate
                        }}
                        {^{datepicker numberOfMonths=2 /}}
                        {{/validate}}
                    </div>

It is working fine but how to set the custom css to datepicker tag? I want to set "class="form-control"" .. I tried the following code but it doesn't work.

                        {^{validate startdate
                        required=false
                        ^maxday=enddate class="form-control"
                        }}
                        {^{datepicker numberOfMonths=2 class='form-control'/}}
                        {{/validate}}

I am trying a few different ways as well.. As jsviews datepicker is using jquery ui and validation, I am looking at this post as well How to add a custom class to my JQuery UI Datepicker..

Until now, I am not able to set the custom css tag to {^{datepicker yet. I will keep on looking but let me know if you know how to do this. Thanks!

Solution

JsViews tags that wrap HTML elements generally allow you to optionally provide the element declaratively (as HTML markup wrapped by the tag) - and if you do then you can trivially add a class property to the wrapped element. You don't need to write any script code.

See this example http://www.jsviews.com/#samples/tag-controls/datepicker/variants.

So you can write:

Tag syntax

{^{datepicker .../}}

Tag syntax, wrapping input element:

  {^{datepicker ...}}
      <input ... [class="foo"] />
  {^{/datepicker}}

Tag syntax, wrapping div element:

  {^{datepicker ...}}
      <div ...[class="foo"] > ... </div>
  {^{/datepicker}}

In your case you are also wrapping in the validate tag, so you can write:

{^{validate endDate required=true ^minday=startDate}}
  {^{datepicker numberOfMonths=2}}
    <input class="form-control"/>
  {{/datepicker}}
{{/validate}}