mirror of
https://github.com/plausible/analytics.git
synced 2024-11-23 03:04:43 +03:00
Show weekday and year in datepicker when relevant
This commit is contained in:
parent
0d327d6dbf
commit
0e908c84f6
@ -383,7 +383,7 @@ class DatePicker extends React.Component {
|
||||
renderPicker() {
|
||||
return (
|
||||
<div
|
||||
className="w-20 sm:w-36 md:w-44 md:relative"
|
||||
className="w-20 sm:w-36 md:w-48 md:relative"
|
||||
ref={(node) => (this.dropDownNode = node)}
|
||||
>
|
||||
<div
|
||||
|
@ -51,32 +51,16 @@ function buildDataSet(plot, present_index, ctx, label) {
|
||||
}
|
||||
}
|
||||
|
||||
const MONTHS = [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June", "July",
|
||||
"August", "September", "October",
|
||||
"November", "December"
|
||||
]
|
||||
|
||||
const MONTHS_ABBREV = [
|
||||
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
|
||||
]
|
||||
|
||||
const DAYS_ABBREV = [
|
||||
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
|
||||
]
|
||||
import {formatMonthYYYY, formatDay} from '../util/date'
|
||||
|
||||
function dateFormatter(interval, longForm) {
|
||||
return function(isoDate, _index, _ticks) {
|
||||
let date = new Date(isoDate)
|
||||
|
||||
if (interval === 'month') {
|
||||
return MONTHS[date.getUTCMonth()];
|
||||
return formatMonthYYYY(date)
|
||||
} else if (interval === 'date') {
|
||||
var day = DAYS_ABBREV[date.getUTCDay()];
|
||||
var date_ = date.getUTCDate();
|
||||
var month = MONTHS_ABBREV[date.getUTCMonth()];
|
||||
return day + ', ' + date_ + ' ' + month;
|
||||
return formatDay(date)
|
||||
} else if (interval === 'hour') {
|
||||
const parts = isoDate.split(/[^0-9]/);
|
||||
date = new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5])
|
||||
|
@ -28,20 +28,25 @@ const MONTHS = [
|
||||
"November", "December"
|
||||
]
|
||||
|
||||
const DAYS_ABBREV = [
|
||||
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
|
||||
]
|
||||
|
||||
export function formatMonthYYYY(date) {
|
||||
return `${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function formatMonth(date) {
|
||||
return `${MONTHS[date.getMonth()]}`;
|
||||
}
|
||||
|
||||
export function formatDay(date) {
|
||||
return `${date.getDate()} ${formatMonth(date)}`;
|
||||
var weekday = DAYS_ABBREV[date.getUTCDay()];
|
||||
if (date.getFullYear() !== (new Date()).getFullYear()) {
|
||||
return `${weekday}, ${date.getDate()} ${formatMonthShort(date)} ${date.getFullYear()}`;
|
||||
} else {
|
||||
return `${weekday}, ${date.getDate()} ${formatMonthShort(date)}`;
|
||||
}
|
||||
}
|
||||
|
||||
export function formatDayShort(date) {
|
||||
return `${date.getDate()} ${formatMonth(date).substring(0, 3)}`;
|
||||
return `${date.getDate()} ${formatMonthShort(date)}`;
|
||||
}
|
||||
|
||||
export function parseUTCDate(dateString) {
|
||||
@ -98,3 +103,7 @@ export function isAfter(date1, date2, period) {
|
||||
}
|
||||
return date1.getDate() > date2.getDate()
|
||||
}
|
||||
|
||||
function formatMonthShort(date) {
|
||||
return `${MONTHS[date.getMonth()].substring(0, 3)}`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user