Show weekday and year in datepicker when relevant

This commit is contained in:
Uku Taht 2022-03-31 10:20:13 +03:00
parent 0d327d6dbf
commit 0e908c84f6
3 changed files with 19 additions and 26 deletions

View File

@ -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

View File

@ -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])

View File

@ -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)}`;
}