🧑‍💻 Update Article datepicker (#128)

Author: mckenziearts

app/Http/Livewire/Articles/Create.php

@@ -11,6 +11,8 @@
 use App\Models\User;
 use App\Traits\WithArticleAttributes;
 use App\Traits\WithTagsAssociation;
+use Carbon\Carbon;
+use DateTimeInterface;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Auth;
 use Livewire\Component;
@@ -50,6 +52,13 @@ public function store(): void
         /** @var User $user */
         $user = Auth::user();
 
+        if ($this->published_at && ! ($this->published_at instanceof DateTimeInterface)) {
+            $this->published_at = new Carbon(
+                time: $this->published_at,
+                tz: config('app.timezone')
+            );
+        }
+
         /** @var Article $article */
         $article = Article::create([
             'title' => $this->title,
@@ -64,7 +73,7 @@ public function store(): void
         ]);
 
         if (collect($this->associateTags)->isNotEmpty()) {
-            $article->syncTags($this->associateTags);
+            $article->syncTags(tags: $this->associateTags);
         }
 
         if ($this->file) {

public/css/app.css

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=e624a82705e66ddf8f8774361377693b",
-    "/css/app.css": "/css/app.css?id=3542b9735c706c26665a33113b79c212"
+    "/js/app.js": "/js/app.js?id=b3926f80205eb8b77d68a280462d061f",
+    "/css/app.css": "/css/app.css?id=e1f5ef9f7dd1d6ba4334d8eb1f233620"
 }

public/js/app.js

@@ -5,6 +5,7 @@ import Tooltip from '@ryangjchandler/alpine-tooltip'
 
 import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
 import internationalNumber from './plugins/internationalNumber'
+import datepicker from './plugins/datepicker'
 import { registerHeader } from '@helpers/header'
 import '@helpers/helpers'
 import '@helpers/scrollspy'
@@ -20,6 +21,7 @@ Alpine.plugin(intersect)
 Alpine.plugin(NotificationsAlpinePlugin)
 Alpine.plugin(Tooltip)
 Alpine.data('internationalNumber', internationalNumber)
+Alpine.data('datepicker', datepicker)
 
 window.Alpine = Alpine
 

public/mix-manifest.json

@@ -1,6 +1,6 @@
 import preactCustomElement from '@helpers/preact.js'
 
-import { Testimonies} from '@components/Testimonies'
+import { Testimonies } from '@components/Testimonies'
 import { Confetti } from './Confetti'
 import { TimeAgo } from './TimeAgo'
 import { TimeCountdown } from './TimeCountdown'

resources/js/app.js

@@ -0,0 +1,117 @@
+export default () => ({
+  datePickerOpen: false,
+  datePickerValue: '',
+  datePickerRealValue: '',
+  datePickerFormat: 'd M, Y',
+  datePickerMonth: '',
+  datePickerYear: '',
+  datePickerDay: '',
+  datePickerDaysInMonth: [],
+  datePickerBlankDaysInMonth: [],
+  datePickerMonthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+  datePickerDays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+
+  datePickerDayClicked(day) {
+    let selectedDate = new Date(Date.UTC(this.datePickerYear, this.datePickerMonth, day))
+    this.datePickerDay = day
+    this.datePickerValue = this.datePickerFormatDate(selectedDate, this.datePickerFormat)
+    this.datePickerRealValue = selectedDate
+    this.datePickerIsSelectedDate(day)
+    this.datePickerOpen = false
+  },
+
+  datePickerPreviousMonth() {
+    if (this.datePickerMonth === 0) {
+      this.datePickerYear--
+      this.datePickerMonth = 12
+    }
+    this.datePickerMonth--
+    this.datePickerCalculateDays()
+  },
+
+  datePickerNextMonth() {
+    if (this.datePickerMonth === 11) {
+      this.datePickerMonth = 0
+      this.datePickerYear++
+    } else {
+      this.datePickerMonth++
+    }
+    this.datePickerCalculateDays()
+  },
+
+  datePickerIsSelectedDate(day) {
+    const d = new Date(Date.UTC(this.datePickerYear, this.datePickerMonth, day))
+    return this.datePickerValue === this.datePickerFormatDate(d, this.datePickerFormat)
+  },
+
+  datePickerIsToday(day) {
+    const today = new Date()
+    const d = new Date(Date.UTC(this.datePickerYear, this.datePickerMonth, day))
+    return today.toDateString() === d.toDateString()
+  },
+
+  datePickerCalculateDays() {
+    let daysInMonth = new Date(Date.UTC(this.datePickerYear, this.datePickerMonth + 1, 0)).getUTCDate();
+    // find where to start calendar day of week
+    let dayOfWeek = new Date(Date.UTC(this.datePickerYear, this.datePickerMonth)).getUTCDay();
+    let blankDaysArray = [];
+    for (let i = 1; i <= dayOfWeek; i++) {
+      blankDaysArray.push(i);
+    }
+    let daysArray = [];
+    for (let i = 1; i <= daysInMonth; i++) {
+      daysArray.push(i);
+    }
+    this.datePickerBlankDaysInMonth = blankDaysArray;
+    this.datePickerDaysInMonth = daysArray;
+  },
+
+  datePickerFormatDate(date, format = null) {
+    let formattedDay = this.datePickerDays[date.getUTCDay()];
+    let formattedDate = ('0' + date.getUTCDate()).slice(-2); // appends 0 (zero) in single digit date
+    let formattedMonth = this.datePickerMonthNames[date.getUTCMonth()];
+    let formattedMonthShortName = this.datePickerMonthNames[date.getUTCMonth()].substring(0, 3);
+    let formattedMonthInNumber = ('0' + (parseInt(date.getUTCMonth()) + 1)).slice(-2);
+    let formattedYear = date.getUTCFullYear();
+
+    if (format && format === 'd M, Y') {
+      return `${formattedDate} ${formattedMonthShortName}, ${formattedYear}`
+    }
+
+    if (format && format === 'MM-DD-YYYY') {
+      return `${formattedMonthInNumber}-${formattedDate}-${formattedYear}`
+    }
+
+    if (format && format === 'DD-MM-YYYY') {
+      return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`
+    }
+
+    if (format && format === 'YYYY-MM-DD') {
+      return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`
+    }
+
+    if (format && format === 'D d M, Y') {
+      return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`
+    }
+
+    return `${formattedMonth} ${formattedDate}, ${formattedYear}`
+  },
+
+  init() {
+    let currentDate = new Date()
+
+    if (this.datePickerValue) {
+      currentDate = new Date(Date.parse(this.datePickerValue))
+    }
+
+    this.datePickerMonth = currentDate.getUTCMonth()
+    this.datePickerYear = currentDate.getUTCFullYear()
+    this.datePickerDay = currentDate.getUTCDay()
+    this.datePickerValue = this.datePickerFormatDate(currentDate, this.datePickerFormat)
+    this.datePickerCalculateDays()
+
+    this.$watch('datePickerValue', () => {
+      this.datePickerRealValue = new Date(Date.UTC(this.datePickerYear, this.datePickerMonth, this.datePickerDay))
+    })
+  }
+})

resources/js/components/Button.jsx

@@ -1,4 +1,4 @@
-import intlTelInput from 'intl-tel-input';
+import intlTelInput from 'intl-tel-input'
 
 export default (element) => ({
   input: element, // '#myID' selector css
@@ -9,18 +9,18 @@ export default (element) => ({
       nationalMode: true,
       geoIpLookup: function(success, failure) {
         fetch('https://ipinfo.io').then(response => {
-          let countryCode = (response && response.country) ? response.country : 'CM';
-          success(countryCode);
+          let countryCode = (response && response.country) ? response.country : 'CM'
+          success(countryCode)
         })
       },
       utilsScript: 'https://unpkg.com/intl-tel-input@17.0.3/build/js/utils.js'
-    });
+    })
     let handleChange = () => {
       if (iti.isValidNumber()) {
-        phoneNumber.value = iti.getNumber();
+        phoneNumber.value = iti.getNumber()
       }
-    };
-    phoneNumber.addEventListener('change', handleChange);
-    phoneNumber.addEventListener('keyup', handleChange);
+    }
+    phoneNumber.addEventListener('change', handleChange)
+    phoneNumber.addEventListener('keyup', handleChange)
   }
 })