JSRender- How to display calendar icon and make date picker field read only

Question

I am using the following code for datepicke in my template.

{^{datepicker fromValue readonly="true" class="myclass"/}}

{^{datepicker toValue ^_minDate=fromValue class="myclass" readonly icon="show"/}}

I tried to achieve following things.

1. I want to make the datepicker field readonly. For the above code it is not happening.
2. How to show the calendar icon within the text box. currently its not happening. icon=show...I tried it . I didn't see anywhere.
3. In my case I have to show the toDate and FromDate at same time. If user first selects the toValue and come back to from value , how to restrict his max date. Currently it is not restricting user.So I can able to select from date which is greater than todate.

Thanks in advance.

Answer 1

For a readonly datepicker, it needs to be on a div, and have _disabled=true. If it is not a div the setting _disabled=true will disable the input, so the datepicker won't show.

{^{datepicker startDate elem="div" _disabled=true/}}

For providing an icon:

{^{datepicker startDate
  _showOn= "button"
  _buttonImage="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
  _buttonImageOnly= true
  _buttonText= "Select date"
/}}

For start and end date, see http://www.jsviews.com/#samples/tag-controls/datepicker/simple

{^{datepicker startDate
  ^_maxDate=endDate
/}}

{^{datepicker endDate
  ^_minDate=startDate
/}}