DateRangePicker

BothDatesSelected.png

BothDatesValid.png

DateNotSet.png

DateRangeSet.png

EndDateEmpty.png

EndDateHighlighted.png

EndDateInvalid.png

EndDateValid.png

EndDateValid?.png

SelectEndDate.png

SelectStartDate.png

SketchSystems.spec

DateRangePicker
  DateNotSet
    click -> StartDateEmpty

  SelectStartDate
    cancel -> DateNotSet
    hoverQS -> QuickSelectHighlighted
    hover -> StartDateHighlighted
    # It be triggered after the MaskedInput is complete
    typing -> StartDateValid?

    StartDateEmpty*    
    StartDateValid?
      valid -> SelectEndDate
      invalid -> StartDateInvalid
    StartDateInvalid
      typing -> StartDateValid?
      click -> SelectEndDate
    StartDateHighlighted
      click -> SelectEndDate
    
  SelectEndDate
    cancel -> DateNotSet
    hoverQS -> QuickSelectHighlighted
    hover -> EndDateHighlighted
    typing -> EndDateValid?
    focusStartDate -> SelectStartDate

    EndDateEmpty
    EndDateValid?
      valid -> BothDatesValid
      invalid -> EndDateInvalid
    EndDateInvalid
    EndDateHighlighted
      click -> BothDatesValid
    
  BothDatesValid
    hoverQS -> QuickSelectHighlighted
    apply -> DateRangeSet
    cancel -> DateNotSet
    # Do not erase user's input
    focusStartDate -> SelectStartDate
    # Do not erase user's input
    focusEndDate -> SelectEndDate
  
  QuickSelectHighlighted
    click -> DateRangeSet
    # Restore from a state snapshot
    mouseOut -> BothDatesValid
    
  DateRangeSet*
    click -> BothDatesValid
 
    
  
  

SketchSystems_prototype.js

function render(model){
  if (model.active_states[0].image_url) {
    return $("img", 
             {src: model.active_states[0].image_url, style: {height: "100%"}});
  } else {
    return "No image available."
  }
}

StartDateEmpty.png

StartDateHighlighted.png

StartDateInvalid.png

StartDateValid?.png