leaflet-calendar

A calendar date picker for Leaflet.

See the demo.

Usage

 L.control.calendar({
      id: 1,
      minDate: "2023-04-01",
      maxDate: "2023-04-29",
      onSelectDate: (value) => this.onSelectDate(value),
      position: "topleft",
    }).addTo(this.map);
  }

  onSelectDate(value): void {
    alert("Date: " + value)
  }

The onSelectDate function is your custom function which is triggered everytime the date is changed.

Options

See table below for full description of customizable options for your calendar picker.

Option	Description	Default
id	id of calendar picker. It's mandatory when using various calendar pickers on the same map.	''
position	Position of calendar picker ('topleft','topright','bottomleft','bottomright')	"bottomright"
minDate	Minimum selectable date value in the calendar	''
maxDate	Maximun selectable date value in the calendar.	''
value	Initial date selected (YYYY-MM-DD).	Current date
onSelectDate	Function that will execute when a date is selected.	function(value) { console.log("The function is mandatory"); }
triggerFunctionOnLoad	Trigger onSelectDate function on first load	false
nextButton	Add a next button	true
backButton	Add a back button	true
marginLeft	Left margin in pixels of the container	"10px"
marginRight	Right margin in pixels of the container	"10px"
marginTop	Top margin in pixels of the container	"10px"
marginBottom	Bottom margin in pixels of the container	"10px"

License

This software is released under the MIT licence. Icon used in the example are from https://www.flaticon.com.