# How to add v-on function in sw-datepicker?

**URL:** <https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499>\
**Category:** Shopware 6 (English)\
**Created:** [16. November 2021 um 07:37 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499 "2021-11-16T07:37:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hasan.h](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@hasan.h](https://forum.shopware.com/u/hasan.h)\
**Post date:** [16. November 2021 um 07:37 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/1 "2021-11-16T07:37:40Z")

</div>

Hello. I am using sw-datepicker and i want to disable dates based on function. I want to add vue’s v-on functions to it but the datepicker isnt running them. How to add those?

---

<div class="post-metadata">

**Author:** ![administrator1](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@administrator1](https://forum.shopware.com/u/administrator1)\
**Post date:** [16. November 2021 um 09:07 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/2 "2021-11-16T09:07:33Z")

</div>

We had the same problem. Solution: data-enabledDates="{PScake\_enabledays}"  
This calls the function „PScake\_enabledays“ where (im)possible dates are calculated:

```auto
	$blocked=Array();
	for ($i=0; $i<($wochen*7); $i++) {
		
		$stmp=mktime(0,0,0,$heute_monat,$heute_tag+$i,$heute_jahr);
		
		// Sonntag, Montag und Samstag blocken
		if (date("w",$stmp)==0 OR date("w",$stmp)==1 OR date("w",$stmp)==6 ) {
			$blocked[]=date("Y-m-d",$stmp);
		}
	}
	
	$blocked_string="'[\"".implode("\",\"",$blocked)."\"']";
		
	// Jetzt alle Daten zurückgeben:	
	return $blocked_string;

```

---

<div class="post-metadata">

**Author:** ![administrator1](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@administrator1](https://forum.shopware.com/u/administrator1)\
**Post date:** [16. November 2021 um 09:10 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/3 "2021-11-16T09:10:20Z")

</div>

Mixed up enabled and blocked - sorry.

```auto
	$enabled=Array();
	for ($i=0; $i<($wochen*7); $i++) {
		
		$stmp=mktime(0,0,0,$heute_monat,$heute_tag+$i,$heute_jahr);
		
		// Nur Dienstag, Mittwoch, Donnerstag und Freitag zulassen:
		if (date("w",$stmp)>1 AND date("w",$stmp)<6 ) {
			if (!in_array($stmp,$feiertag)) {
				$enabled[]=date("Y-m-d",$stmp);
			}
		}
	}
	
	$enabled_string=implode(",",$enabled);
		
	// Jetzt alle Daten zurückgeben:	
	return $enabled_string;

```

---

<div class="post-metadata">

**Author:** ![hasan.h](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@hasan.h](https://forum.shopware.com/u/hasan.h)\
**Post date:** [17. November 2021 um 08:27 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/4 "2021-11-17T08:27:48Z")

</div>

Have you called this function inside the picker properties or inside the input tag? And what argument did you give to the PScake\_enabledays function? I want to disable some days of week and some dates of every month, so I need to give an entire calendar as an input. How do I do that?

---

<div class="post-metadata">

**Author:** ![administrator1](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@administrator1](https://forum.shopware.com/u/administrator1)\
**Post date:** [17. November 2021 um 08:52 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/5 "2021-11-17T08:52:46Z")

</div>

We call that function in the template frontend/detail/buy.tpl like so:

```auto
			            	<input type="text"
								onChange="check_cakedate()"
			            		class="hug_cake_date_input"
								name="cakedate"
								id="cakedate"
								data-wrap="false"
								data-mode="single"
								data-datepicker="true"
								data-minDate="{PScake_deliverydate}"
								value="{PScake_deliverydate}"
								placeholder="{s name="datePickerInputPlaceholder" namespace="frontend/index/datepicker"}Datum wählen...{/s}"
								data-enabledDates="{PScake_enabledays}"
							/>

```

So the „minDate“ (starting Date) is calculated by the function PScake\_deliverydate and the possible days are enabled by the function PScake\_enabledays (we look only 6 weeks into the future here).  
The possible dates are delivered as a string, commaseparated.  
You may have a look at the working example here: [Spiderman Kuchen online bestellen | junior-partyshop.ch](https://www.junior-partyshop.ch/mottoparty/kindergeburtstag-jungen/spiderman/8861/spiderman-kuchen)

---

<div class="post-metadata">

**Author:** ![administrator1](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@administrator1](https://forum.shopware.com/u/administrator1)\
**Post date:** [17. November 2021 um 08:54 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/6 "2021-11-17T08:54:31Z")

</div>

Sorry - but about those „vue-functions“ I’m afraid I can’t help.

---

<div class="post-metadata">

**Author:** ![hasan.h](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@hasan.h](https://forum.shopware.com/u/hasan.h)\
**Post date:** [17. November 2021 um 09:04 UTC](https://forum.shopware.com/t/how-to-add-v-on-function-in-sw-datepicker/91499/7 "2021-11-17T09:04:30Z")

</div>

right. So in order to disable dates, I would have to set data-disabledDates to some function inside the tag?