Nitobi: Implementing Date Ranges

Implementing Date Ranges

Greetings! » Complete UI: Calendar » Implementing Date Ranges

Using the robust JavaScript API, you can quickly implement a composite date range picker. The key to the implementation is changing the mindate and/or maxdate attributes in the Calendar component declaration.
Declaration

We'll use the ondateselected attribute on each datepicker to define a function to be called whenever a date is selected.

Declaration for the start date of the range:

<ntb:datepicker id="start" theme="flex" selecteddate="today" ondateselected="setMin(eventArgs)">
    <ntb:dateinput></ntb:dateinput>
    <ntb:calendar></ntb:calendar>
</ntb:datepicker>

Declaration for the end date of the range:

<ntb:datepicker id="end" theme="flex" mindate="tomorrow" ondateselected="setMax(eventArgs)">
    <ntb:dateinput></ntb:dateinput>
    <ntb:calendar></ntb:calendar>
</ntb:datepicker>

So for the start date, we have a function called setMin that will set the mindate on the Calendar with id end. Vice versa, the Calendar defining the end date of the range has a function subscribed to ondateselected that will set the maxdate on the Calendar defining the start date.

setMin and setMax:

function setMin(e)
{
      // The function argument e is of type nitobi.ui.ElementEventArgs and has a source property that defines the component that fired the event.
      var start = e.source;
      var minDate = start.getSelectedDate();
      nitobi.base.DateMath.add(minDate, 'd', 1);
      var end = nitobi.getComponent("end");
      end.setMinDate(minDate);
      // Call render to apply the new mindate
      end.render();
}
function setMax(e)
{
      var end = e.source;
      var maxDate = end.getSelectedDate();
      nitobi.base.DateMath.subtract(maxDate, 'd', 1);
      var start = nitobi.getComponent("start");
      start.setMaxDate(maxDate);
      start.render();
}