Merge branch 'kaloyan13/main' into main

README.md

@@ -34,6 +34,7 @@ See table below for full description of customizable options for your calendar p
 
 | 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. | '' |

index.d.ts

@@ -6,6 +6,7 @@ declare module 'leaflet' {
   namespace Control {
 
     interface CalendarOptions {
+      id?: number;
       position?: ControlPosition;
       minDate?: string;
       maxDate?: string;

js/leaflet-calendar.js

@@ -7,6 +7,7 @@
  */
 L.Control.Calendar = L.Control.extend({
 	options: {
+		id: 1,
 		position: "bottomright",
 		minDate: '',
 		maxDate: '',
@@ -45,7 +46,7 @@ L.Control.Calendar = L.Control.extend({
 		this.inputDate = L.DomUtil.create('div', 'date-control', this.container);
 
 		this.inputDate.innerHTML =
-			`<input type="date" name="date" id="input-control-date-picker" value="${this.options.value}"
+			`<input type="date" name="date" id="input-control-date-picker${this.options.id}" value="${this.options.value}"
 			min=${this.options.minDate} max="${this.options.maxDate}"></input>`;
 
 		if (this.options.nextButton) {
@@ -90,11 +91,11 @@ L.Control.Calendar = L.Control.extend({
 		L.DomEvent.addListener(this.backButton, 'click', this.back.bind(this));
 	},
 	open: function () {
-		L.DomUtil.get('input-control-date-picker').showPicker();
+		L.DomUtil.get('input-control-date-picker' + this.options.id).showPicker();
 		return this;
 	},
 	getCurrentDate: function () {
-		return L.DomUtil.get('input-control-date-picker').value;
+		return L.DomUtil.get('input-control-date-picker' + this.options.id).value;
 	},
 	getMaxDate: function () {
 		return new Date(this.options.maxDate);
@@ -103,7 +104,7 @@ L.Control.Calendar = L.Control.extend({
 		return new Date(this.options.minDate);
 	},
 	setDate: function (date) {
-		L.DomUtil.get('input-control-date-picker').value = date;
+		L.DomUtil.get('input-control-date-picker' + this.options.id).value = date;
 	},
 	_isWithinLimitMax: function(currentDate){
 		var maxDate = this.getMaxDate()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-calendar",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A calendar date picker control for Leaflet",
   "main": "js/leaflet-calendar.js",
 	"types": "index.d.ts",