[6.x] Improved Timezone Handling (#11409)

Co-authored-by: Jason Varga <[email protected]>

Author: duncanmcclean

config/system.php

@@ -74,6 +74,35 @@
 
     'date_format' => 'F jS, Y',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Statamic will use this timezone when displaying dates on the front-end.
+    | You can use any timezone supported by PHP. When set to null it will
+    | fall back to the timezone defined in your `app.php` config file.
+    |
+    | https://www.php.net/manual/en/timezones.php
+    |
+    */
+
+    'display_timezone' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Localize Dates in Modifiers
+    |--------------------------------------------------------------------------
+    |
+    | When using date-related modifiers, Carbon instances will be in UTC.
+    | Enabling this setting will ensure that dates get localized into
+    | the timezone defined in `display_timezone`. Otherwise you'll
+    | need to manually localize dates in all of your templates.
+    |
+    */
+
+    'localize_dates_in_modifiers' => false,
+
     /*
     |--------------------------------------------------------------------------
     | Default Character Set

package-lock.json

@@ -15,6 +15,7 @@
     "knip": "knip"
   },
   "dependencies": {
+    "@angelblanco/v-calendar": "^3.1.2",
     "@floating-ui/dom": "^1.2.5",
     "@he-tree/vue": "^2.8.2",
     "@hoppscotch/vue-toasted": "^0.1.0",
@@ -85,7 +86,6 @@
     "tiny-emitter": "^2.1.0",
     "uniqid": "^5.2.0",
     "upload": "^1.3.2",
-    "v-calendar": "^3.1.2",
     "validator": "^13.7.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.27",

package.json

@@ -20,6 +20,7 @@ import Routes from '../components/collections/Routes.vue';
 import TitleFormats from '../components/collections/TitleFormats.vue';
 import ColorFieldtype from '../components/fieldtypes/ColorFieldtype.vue';
 import DateFieldtype from '../components/fieldtypes/DateFieldtype.vue';
+import DateIndexFieldtype from '../components/fieldtypes/DateIndexFieldtype.vue';
 import DictionaryFieldtype from '../components/fieldtypes/DictionaryFieldtype.vue';
 import DictionaryIndexFieldtype from '../components/fieldtypes/DictionaryIndexFieldtype.vue';
 import DictionaryFields from '../components/fieldtypes/DictionaryFields.vue';
@@ -92,6 +93,7 @@ export default function registerFieldtypes(app) {
     app.component('collection_title_formats-fieldtype', TitleFormats);
     app.component('color-fieldtype', ColorFieldtype);
     app.component('date-fieldtype', DateFieldtype);
+    app.component('date-fieldtype-index', DateIndexFieldtype);
     app.component('dictionary-fieldtype', DictionaryFieldtype);
     app.component('dictionary-fieldtype-index', DictionaryIndexFieldtype);
     app.component('dictionary_fields-fieldtype', DictionaryFields);

resources/js/bootstrap/fieldtypes.js

@@ -13,8 +13,8 @@ import useDirtyState from '../composables/dirty-state';
 import VueClickAway from 'vue3-click-away';
 import FloatingVue from 'floating-vue';
 import 'floating-vue/dist/style.css';
-import VCalendar from 'v-calendar';
-import 'v-calendar/style.css';
+import VCalendar from '@angelblanco/v-calendar';
+import '@angelblanco/v-calendar/style.css';
 import Toasts from '../components/Toasts';
 import PortalVue from 'portal-vue';
 import Keys from '../components/keys/Keys';