feat: add rrule start date

resources/ts/components/CronInput.vue

@@ -12,16 +12,18 @@ const props = defineProps<{ editMode: boolean }>();
 
 const cronType = ref<CronType>(CronType.MANUAL);
 const cronValue = ref<string>('0');
+const cronDate = ref<Date>(new Date());
 
 function onCronChanged() {
     const data = parseCron(cron.value);
     rawCron.value = cron.value ?? DEFAULT_CRON;
     cronType.value = data.type;
     cronValue.value = data.value.toFixed(0);
+    cronDate.value = data.date ?? new Date();
 }
 
 function updateCron() {
-    cron.value = getCron(cronType.value, parseInt(cronValue.value), rawCron.value);
+    cron.value = getCron(cronType.value, parseInt(cronValue.value), cronDate.value, rawCron.value);
 }
 
 function onChangeCronType() {
@@ -48,6 +50,11 @@ function onChangeCronValue() {
     updateCron();
 }
 
+function onChangeCronDate(event: InputEvent) {
+    cronDate.value = new Date((event.target as HTMLInputElement).value);
+    updateCron();
+}
+
 function onInputRawCron() {
     valid.value = validCron(rawCron.value);
     if (valid.value) {
@@ -65,7 +72,7 @@ watch(cron, () => {
 </script>
 
 <template>
-    <div class="flex gap-2">
+    <div class="flex gap-2 flex-wrap">
         <select v-model="cronType" class="select flex-1" @change="onChangeCronType">
             <option :value="CronType.MANUAL">
                 {{ $t("cron.type.manual") }}
@@ -195,5 +202,16 @@ watch(cron, () => {
             class="input font-mono flex-1"
             @input="onChangeCronValue"
         />
+        <label class="label  flex-1 basis-full">
+            {{ $t("cron.rrule_start") }}
+            <input
+                v-if="cronType === CronType.EVERY_N_DAYS || cronType === CronType.EVERY_N_WEEKS || cronType === CronType.EVERY_N_MONTHS"
+                :value="cronDate.toISOString().substring(0, 10)"
+                required
+                type="date"
+                class="input font-mono"
+                @input="onChangeCronDate"
+            />
+        </label>
     </div>
 </template>