fix: Timezone support in Date & DateTime fields

crm/www/crm.py

@@ -3,7 +3,7 @@
 
 from __future__ import unicode_literals
 import frappe
-from frappe.utils import cint
+from frappe.utils import add_user_info, cint, get_system_timezone
 from frappe.utils.telemetry import capture
 
 no_cache = 1
@@ -33,10 +33,25 @@ def get_boot():
             "site_name": frappe.local.site,
             "read_only_mode": frappe.flags.read_only,
             "csrf_token": frappe.sessions.get_csrf_token(),
-            "setup_complete": cint(frappe.get_system_settings("setup_complete"))
+            "setup_complete": cint(frappe.get_system_settings("setup_complete")),
+            "timezone": {
+                "system": get_system_timezone(),
+                "user": get_user_info()
+                .get(frappe.session.user, {})
+                .get("time_zone", None)
+                or get_system_timezone(),
+            }
         }
     )
 
 
+def get_user_info():
+    # get info for current user
+    user_info = frappe._dict()
+    add_user_info(frappe.session.user, user_info)
+
+    return user_info
+
+
 def get_default_route():
     return "/crm"

frontend/package.json

@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.86",
+    "frappe-ui": "^0.1.89",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

frontend/src/components/Activities/Activities.vue

@@ -204,7 +204,7 @@
               />
             </div>
             <div class="ml-auto whitespace-nowrap">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+              <Tooltip :text="formatDate(activity.creation)">
                 <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
@@ -290,7 +290,7 @@
             </div>
 
             <div class="ml-auto whitespace-nowrap">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+              <Tooltip :text="formatDate(activity.creation)">
                 <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
@@ -353,9 +353,7 @@
               </div>
 
               <div class="ml-auto whitespace-nowrap">
-                <Tooltip
-                  :text="dateFormat(activity.creation, dateTooltipFormat)"
-                >
+                <Tooltip :text="formatDate(activity.creation)">
                   <div class="text-sm text-ink-gray-5">
                     {{ __(timeAgo(activity.creation)) }}
                   </div>
@@ -481,13 +479,7 @@ import CommunicationArea from '@/components/CommunicationArea.vue'
 import WhatsappTemplateSelectorModal from '@/components/Modals/WhatsappTemplateSelectorModal.vue'
 import AllModals from '@/components/Activities/AllModals.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import {
-  timeAgo,
-  dateFormat,
-  dateTooltipFormat,
-  secondsToDuration,
-  startCase,
-} from '@/utils'
+import { timeAgo, formatDate, secondsToDuration, startCase } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'

frontend/src/components/Activities/AttachmentArea.vue

@@ -32,7 +32,7 @@
           </div>
         </div>
         <div class="flex flex-col items-end gap-2 flex-shrink-0">
-          <Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
+          <Tooltip :text="formatDate(attachment.creation)">
             <div class="text-sm text-ink-gray-5">
               {{ __(timeAgo(attachment.creation)) }}
             </div>
@@ -79,13 +79,7 @@ import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
 import { globalStore } from '@/stores/global'
 import { call, Tooltip } from 'frappe-ui'
-import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
-  convertSize,
-  isImage,
-} from '@/utils'
+import { formatDate, timeAgo, convertSize, isImage } from '@/utils'
 
 const props = defineProps({
   attachments: Array,

frontend/src/components/Activities/CallArea.vue

@@ -17,7 +17,7 @@
         }}</span>
       </div>
       <div class="ml-auto whitespace-nowrap">
-        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+        <Tooltip :text="formatDate(activity.creation)">
           <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
@@ -56,7 +56,7 @@
         </div>
       </div>
       <div class="flex items-center flex-wrap gap-2">
-        <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
+        <Badge :label="formatDate(activity.creation, 'MMM d, EEEE')">
           <template #prefix>
             <CalendarIcon class="size-3" />
           </template>
@@ -97,7 +97,7 @@ import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import AudioPlayer from '@/components/Activities/AudioPlayer.vue'
 import { statusLabelMap, statusColorMap } from '@/utils/callLog.js'
-import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { Avatar, Badge, Tooltip } from 'frappe-ui'
 
 const props = defineProps({

frontend/src/components/Activities/CommentArea.vue

@@ -12,7 +12,7 @@
         </span>
       </div>
       <div class="ml-auto whitespace-nowrap">
-        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+        <Tooltip :text="formatDate(activity.creation)">
           <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
@@ -38,7 +38,7 @@
 import UserAvatar from '@/components/UserAvatar.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import { Tooltip } from 'frappe-ui'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 const props = defineProps({
   activity: Object,
 })

frontend/src/components/Activities/EmailArea.vue

@@ -22,7 +22,7 @@
           variant="subtle"
           :theme="status.color"
         />
-        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+        <Tooltip :text="formatDate(activity.creation)">
           <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
@@ -92,7 +92,7 @@ import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import EmailContent from '@/components/Activities/EmailContent.vue'
 import { Badge, Tooltip } from 'frappe-ui'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 import { computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/Activities/NoteArea.vue

@@ -41,7 +41,7 @@
           {{ getUser(note.owner).full_name }}
         </div>
       </div>
-      <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
+      <Tooltip :text="formatDate(note.modified)">
         <div class="truncate text-sm text-ink-gray-7">
           {{ __(timeAgo(note.modified)) }}
         </div>
@@ -51,7 +51,7 @@
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 import { Tooltip, Dropdown, TextEditor } from 'frappe-ui'
 import { usersStore } from '@/stores/users'
 

frontend/src/components/Activities/TaskArea.vue

@@ -19,11 +19,11 @@
             </div>
             <div v-if="task.due_date">
               <Tooltip
-                :text="dateFormat(task.due_date, 'ddd, MMM D, YYYY | hh:mm a')"
+                :text="formatDate(task.due_date, 'EEE, MMM d, yyyy | hh:mm a')"
               >
                 <div class="flex gap-2">
                   <CalendarIcon />
-                  <div>{{ dateFormat(task.due_date, 'D MMM, hh:mm a') }}</div>
+                  <div>{{ formatDate(task.due_date, 'd MMM, hh:mm a') }}</div>
                 </div>
               </Tooltip>
             </div>
@@ -94,7 +94,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { dateFormat, taskStatusOptions } from '@/utils'
+import { formatDate, taskStatusOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { globalStore } from '@/stores/global'
 import { Tooltip, Dropdown } from 'frappe-ui'

frontend/src/components/Activities/WhatsAppArea.vue

@@ -127,9 +127,9 @@
             />
           </div>
           <div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
-            <Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
+            <Tooltip :text="formatDate(whatsapp.creation, 'EEE, MMM d, yyyy')">
               <div class="text-2xs">
-                {{ dateFormat(whatsapp.creation, 'hh:mm a') }}
+                {{ formatDate(whatsapp.creation, 'hh:mm a') }}
               </div>
             </Tooltip>
             <div v-if="whatsapp.type == 'Outgoing'">
@@ -173,7 +173,7 @@ import CheckIcon from '@/components/Icons/CheckIcon.vue'
 import DoubleCheckIcon from '@/components/Icons/DoubleCheckIcon.vue'
 import DocumentIcon from '@/components/Icons/DocumentIcon.vue'
 import ReactIcon from '@/components/Icons/ReactIcon.vue'
-import { dateFormat } from '@/utils'
+import { formatDate } from '@/utils'
 import { capture } from '@/telemetry'
 import { Tooltip, Dropdown, createResource } from 'frappe-ui'
 import { ref } from 'vue'

frontend/src/components/FilesUploader/FilesUploaderArea.vue

@@ -126,7 +126,7 @@
 import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
 import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
-import { createToast, dateFormat, convertSize } from '@/utils'
+import { createToast, formatDate, convertSize } from '@/utils'
 import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
 import { ref, onMounted } from 'vue'
 
@@ -242,7 +242,7 @@ function captureImage() {
 }
 
 function uploadViaCamera() {
-  const nowDatetime = dateFormat(new Date(), 'YYYY_MM_DD_HH_mm_ss')
+  const nowDatetime = formatDate(new Date(), 'yyyy_MM_dd_HH_mm_ss')
   let filename = `capture_${nowDatetime}.png`
   urlToFile(cameraImage.value, filename, 'image/png').then((file) => {
     addFiles([file])

frontend/src/components/ListViews/TasksListView.vue

@@ -40,12 +40,12 @@
       >
         <div v-if="column.key === 'due_date'">
           <Tooltip
-            :text="item && dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')"
+            :text="item && formatDate(item, 'EEE, MMM d, yyyy | hh:mm a')"
           >
             <div class="flex items-center gap-2 truncate text-base">
               <div><CalendarIcon /></div>
               <div v-if="item" class="truncate">
-                {{ dateFormat(item, 'D MMM, hh:mm a') }}
+                {{ formatDate(item, 'd MMM, hh:mm a') }}
               </div>
             </div>
           </Tooltip>
@@ -167,7 +167,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
-import { dateFormat } from '@/utils'
+import { formatDate } from '@/utils'
 import {
   Avatar,
   ListView,

frontend/src/components/SLASection.vue

@@ -43,7 +43,7 @@
 </template>
 <script setup>
 import { Dropdown, Tooltip } from 'frappe-ui'
-import { timeAgo, dateFormat, formatTime, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate, formatTime } from '@/utils'
 import { statusesStore } from '@/stores/statuses'
 import { capture } from '@/telemetry'
 import { computed, defineModel } from 'vue'
@@ -69,7 +69,7 @@ let slaSection = computed(() => {
     if (status == 'just now') {
       status = 'In less than a minute'
     }
-    tooltipText = dateFormat(data.value.response_by, dateTooltipFormat)
+    tooltipText = formatDate(data.value.response_by)
     if (new Date(data.value.response_by) < new Date()) {
       color = 'red'
       if (status == __('In less than a minute')) {
@@ -78,7 +78,7 @@ let slaSection = computed(() => {
     }
   } else if (['Fulfilled', 'Failed'].includes(status)) {
     status = __(status) + ' in ' + formatTime(data.value.first_response_time)
-    tooltipText = dateFormat(data.value.first_responded_on, dateTooltipFormat)
+    tooltipText = formatDate(data.value.first_responded_on)
   }
 
   sections.push(

frontend/src/components/SectionFields.vue

@@ -96,15 +96,9 @@
           />
           <FormControl
             v-else-if="
-              ['email', 'number', 'date', 'password', 'textarea'].includes(
-                field.type,
-              )
+              ['email', 'number', 'password', 'textarea'].includes(field.type)
             "
             class="form-control"
-            :class="{
-              '[&_input]:text-ink-gray-4':
-                field.type === 'date' && !data[field.name],
-            }"
             :type="field.type"
             :value="data[field.name]"
             :placeholder="field.placeholder"
@@ -154,6 +148,24 @@
             @change="(data) => emit('update', field.name, data)"
             :onCreate="field.create"
           />
+          <div v-else-if="field.type === 'datetime'" class="form-control">
+            <DateTimePicker
+              icon-left=""
+              :value="data[field.name]"
+              :placeholder="field.placeholder"
+              placement="left-start"
+              @change="(data) => emit('update', field.name, data)"
+            />
+          </div>
+          <div v-else-if="field.type === 'date'" class="form-control">
+            <DatePicker
+              icon-left=""
+              :value="data[field.name]"
+              :placeholder="field.placeholder"
+              placement="left-start"
+              @change="(data) => emit('update', field.name, data)"
+            />
+          </div>
           <FormControl
             v-else
             class="form-control"
@@ -190,7 +202,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { usersStore } from '@/stores/users'
-import { Tooltip } from 'frappe-ui'
+import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({

frontend/src/pages/Contact.vue

@@ -214,8 +214,7 @@ import DealsListView from '@/components/ListViews/DealsListView.vue'
 import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import {
-  dateFormat,
-  dateTooltipFormat,
+  formatDate,
   timeAgo,
   formatNumberIntoCurrency,
   createToast,
@@ -628,7 +627,7 @@ function getDealRowObject(deal) {
       ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
-      label: dateFormat(deal.modified, dateTooltipFormat),
+      label: formatDate(deal.modified),
       timeAgo: __(timeAgo(deal.modified)),
     },
   }

frontend/src/pages/Contacts.vue

@@ -81,7 +81,7 @@ import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { organizationsStore } from '@/stores/organizations.js'
-import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
 const { getOrganization } = organizationsStore()
@@ -122,7 +122,7 @@ const rows = computed(() => {
         }
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(contact[row], dateTooltipFormat),
+          label: formatDate(contact[row]),
           timeAgo: __(timeAgo(contact[row])),
         }
       }