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

Shopware 6 (English)
1

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?

2

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

	$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;
3

Mixed up enabled and blocked - sorry.

	$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;
4

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?

5

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

			            	<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

6

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

7

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