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

Question

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!

score 1 · Accepted Answer · answered Oct 05 '14 at 19:59

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}}

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

1 Answers1