dateRangeInput

dateRangeInput(inputId, label, start = NULL, end = NULL, min = NULL,
  max = NULL, format = "yyyy-mm-dd", startview = "month", weekstart = 0,
  language = "en", separator = " to ", width = NULL)

Arguments

inputId	The input slot that will be used to access the value.
label	Display label for the control, or NULL for no label.
start	The initial start date. Either a Date object, or a string in yyyy-mm-dd format. If NULL (the default), will use the current date in the client's time zone.
end	The initial end date. Either a Date object, or a string in yyyy-mm-dd format. If NULL (the default), will use the current date in the client's time zone.
min	The minimum allowed date. Either a Date object, or a string in yyyy-mm-dd format.
max	The maximum allowed date. Either a Date object, or a string in yyyy-mm-dd format.
format	The format of the date to display in the browser. Defaults to "yyyy-mm-dd".
startview	The date range shown when the input object is first clicked. Can be "month" (the default), "year", or "decade".
weekstart	Which day is the start of the week. Should be an integer from 0 (Sunday) to 6 (Saturday).
language	The language used for month and day names. Default is "en". Other valid values include "bg", "ca", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hr", "hu", "id", "is", "it", "ja", "kr", "lt", "lv", "ms", "nb", "nl", "pl", "pt", "pt-BR", "ro", "rs", "rs-latin", "ru", "sk", "sl", "sv", "sw", "th", "tr", "uk", "zh-CN", and "zh-TW".
separator	String to display between the start and end input boxes.
width	The width of the input, e.g. '400px', or '100%'; see validateCssUnit.

Description

Creates a pair of text inputs which, when clicked on, bring up calendars that the user can click on to select dates.

Details

The date format string specifies how the date will be displayed in the browser. It allows the following values:

• yy Year without century (12)
• yyyy Year with century (2012)
• mm Month number, with leading zero (01-12)
• m Month number, without leading zero (01-12)
• M Abbreviated month name
• MM Full month name
• dd Day of month with leading zero
• d Day of month without leading zero
• D Abbreviated weekday name
• DD Full weekday name

Examples

dateRangeInput("daterange", "Date range:",
               start = "2001-01-01",
               end   = "2010-12-31")
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
  <label class="control-label" for="daterange">Date range:</label>
  <div class="input-daterange input-group">
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="month" data-initial-date="2001-01-01"/>
    <span class="input-group-addon"> to </span>
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="month" data-initial-date="2010-12-31"/>
  </div>
</div>


# Default start and end is the current date in the client's time zone
dateRangeInput("daterange", "Date range:")
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
  <label class="control-label" for="daterange">Date range:</label>
  <div class="input-daterange input-group">
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="month"/>
    <span class="input-group-addon"> to </span>
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="month"/>
  </div>
</div>


# start and end are always specified in yyyy-mm-dd, even if the display
# format is different
dateRangeInput("daterange", "Date range:",
               start  = "2001-01-01",
               end    = "2010-12-31",
               min    = "2001-01-01",
               max    = "2012-12-21",
               format = "mm/dd/yy",
               separator = " - ")
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
  <label class="control-label" for="daterange">Date range:</label>
  <div class="input-daterange input-group">
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2001-01-01"/>
    <span class="input-group-addon"> - </span>
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2010-12-31"/>
  </div>
</div>


# Pass in Date objects
dateRangeInput("daterange", "Date range:",
               start = Sys.Date()-10,
               end = Sys.Date()+10)
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
  <label class="control-label" for="daterange">Date range:</label>
  <div class="input-daterange input-group">
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="month" data-initial-date="2017-08-08"/>
    <span class="input-group-addon"> to </span>
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="month" data-initial-date="2017-08-28"/>
  </div>
</div>


# Use different language and different first day of week
dateRangeInput("daterange", "Date range:",
               language = "de",
               weekstart = 1)
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
  <label class="control-label" for="daterange">Date range:</label>
  <div class="input-daterange input-group">
    <input class="input-sm form-control" type="text" data-date-language="de" data-date-weekstart="1" data-date-format="yyyy-mm-dd" data-date-start-view="month"/>
    <span class="input-group-addon"> to </span>
    <input class="input-sm form-control" type="text" data-date-language="de" data-date-weekstart="1" data-date-format="yyyy-mm-dd" data-date-start-view="month"/>
  </div>
</div>


# Start with decade view instead of default month view
dateRangeInput("daterange", "Date range:",
               startview = "decade")
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
  <label class="control-label" for="daterange">Date range:</label>
  <div class="input-daterange input-group">
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="decade"/>
    <span class="input-group-addon"> to </span>
    <input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="yyyy-mm-dd" data-date-start-view="decade"/>
  </div>
</div>

See also

dateInput, updateDateRangeInput

Other input.elements: actionButton, actionLink; animationOptions, sliderInput; checkboxGroupInput; checkboxInput; dateInput; fileInput; numericInput; passwordInput; radioButtons; selectInput, selectizeInput; submitButton; textInput