So I'm using the BlueprintJS datetime package in a React project to render a birthday picker and I want to set the months names of the select to the Spanish version. In their documentation says they use react-day-picker in order to render the calendar and from the react-day-picker documentation there's a parameter to set the months names from an array but I don't get it to change the select names. This is what I've set in the component. The weekdaysLong and weekdaysShort works fine but not the months property.
<DateInput
formatDate={date => date.toLocaleString('es-ES', {year: "numeric", month: "2-digit", day: "numeric"})}
onChange={this.handleDateChange}
parseDate => new Date(str)}
placeholder={"DD/MM/YYYY"}
maxDate={now}
minDate={minDate}
value={this.state.date}
dayPickerProps={{
locale: 'es',
months: DateFormatString.months,
weekdaysLong: DateFormatString.weekDaysLong,
weekdaysShort: DateFormatString.weekDaysShort,
firstDayOfWeek: 1,
}}
/>
And this is the variable where I have the months and weekdays
const DateFormatString = {
months: [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Mayo',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
],
weekDaysLong: [
'Domingo',
'Lunes',
'Martes',
'Miercoles',
'Jueves',
'Viernes',
'Sabado'
],
weekDaysShort: [
'Do',
'Lu',
'Ma',
'Mi',
'Ju',
'Vi',
'Sa'
]
}
Anyone have an idea what is happening or know another way to set the whole component's language?
It seems to be a recently opened (and soon fixed) issue as per this github issue page: https://github.com/palantir/blueprint/issues/3265
Either you can wait for a fix to be merged (and then update your package.json to use the new version), or you must use some other library. Hope that helps!
Related
As I'm not exactly used to work with dates on Javascript, it's been quite hard to tackle it without asking for help, and I've been struggling for hours on this.
My goal is to choose a date using Material UI DatePicker and store it as a string following the "yyyy-MM-dd" format.
In my last attempt, I tried this:
const [userData, setUserData] = useState({
rating: 0,
review: "",
date: Date(),
});
Then, in DatePicker:
<LocalizationProvider dateAdapter={DateAdapter}>
<DesktopDatePicker
label="Watched on"
inputFormat="MMM dd, yyyy"
disableMaskedInput={true}
name="date"
value={userData.date}
onChange={(date) => {
setUserData((prevValue) => {
const dateWatched = startOfDay(date);
return {
...prevValue,
date: dateWatched.toISOString().slice(0, 10),
};
});
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>;
If I console.log(dateWatched.toISOString().slice(0, 10), when I pick a date it logs correctly. However, the date displayed on DatePicker mismatches. So, let's say I choose December 14, 2021. It logs 2021-12-14 like I wanted, but the DatePicker will show December 13, 2021. For the record, my local time is GMT -03:00, and I think this may be the culprit. I want to take time zones out of the way, so no matter where you are and the time of the day, you'll always get the correct date string saved on Mongoose and displayed correctly on DatePicker.
note: I'm using date-fns library.
I am using React Data Table Component for displaying table data - which works great!
I have a row field for lastLogin time, which is stored in MongoDB as a model like so:
lastLogin: [{
type: Date,
required: false,
}],
My data table component looks like so:
<DataTable
noHeader
pagination
paginationPerPage={15}
paginationRowsPerPageOptions={paginationRowsPerPageOptions}
responsive
columns={columns}
sortIcon={<ChevronDown />}
className="react-dataTable"
data={store.data}
/>
Using columns when I try and render the date without moment, it works fine:
{
name: 'Last Login',
selector: (row) => row.lastLogin,
},
will result in:
row 1: 2021-11-17T01:16:55.093Z
row 2: (empty)
However, when formatting with moment, it seems to be obtaining the previous records results.
{
name: 'Last Login',
selector: (row) => row.lastLogin,
format: (row) => moment(row.lastLogin).format('lll'),
},
will result in:
row 1: Jan 1, 2021 12:00 AM
row 2: Nov 17, 2021 1:15 PM
This code is work correct, and the result its expected base on how the moment work.
moment work with current time as a default time to do a process, so that, if you pass a date value, then you will work and format this value, else will work and format current date.
for example:
var now = moment(undefined).format('lll');
console.log(now)
this will be equl for:
var now2 = moment().format('lll');
console.log(now2)
Demo Link
Ok... this one has been resolved... silly syntax error.
The login date on the model was setup as an array:
lastLogin: [{
type: Date,
required: false,
}],
Should be:
lastLogin: {
type: Date,
required: false,
},
i use react-native calendars which config the moment like so:
LocaleConfig.locales["he"] = {
monthNames: [
"ינואר",
"פברואר",
"מרץ",
"אפריל",
"מאי",
"יוני",
"יולי",
"אוגוסט",
"ספטמבר",
"אוקטובר",
"נובמבר",
"דצמבר",
],
monthNamesShort: ["ינו", "פבר", "מרץ", "אפ", "מאי", "יוני", "יולי", "אוג", "ספט", "אוק", "נוב", "דצמ"],
dayNames: ["ראשון", "שני", "שלישי", "רביעי", "חמישי", "שישי", "שבת"],
dayNamesShort: ["א", "ב", "ג", "ד", "ה", "ו", "ש"],
today: "היום",
};
LocaleConfig.defaultLocale = "he";
and also i use moment in my components and i want to config the dates like :
moment.updateLocale('he', {
longDateFormat : {
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'DD/MM/YYYY',
LL : 'D MMMM YYYY',
LLL : 'D MMMM YYYY HH:mm',
LLLL : 'dddd D MMMM YYYY HH:mm'
}..........................
my problem i dont know how to decalre it one time and just import it to every component that i need (because i have many component that i need to use it)
the question how i can declare it one time and just import it with one line.
because right now i have to put all the long code(that above) in every component
(i build my app with mern react native)
If you want to change moment globally then please have a look on "https://www.npmjs.com/package/moment-timezone". Here you will find global timezone set methods.
I am using DayPickerInput in my react application. I know how to use before and after to limit the date selection but those options doesn't work together (for me). However individually they do work well and restrict date selection.
<DayPickerInput
dayPickerProps={{
disabledDays: {
before: today,
after: afterDate
}
}}
/>
Can anyone please help?
You can disable days by following way with your DayPickerInput:
dayPickerProps={{
disabledDays: [
{ before: moment().subtract(1, 'months').toDate() },
{ after: moment().toDate() },
]
}}
I am working on a scheduling app using the Angular-Gantt.js module.
It is working fine --> except I'd like to customize the header to display "M,T,W,Th,F ..." for the columns in the day viewscale. Currently it displays like this demo version -->
https://www.angular-gantt.com/demo/
From the documentation for the module, there are events triggered after the headers are created and displayed and not when the header is being created. There is however a guide on how to write a plugin. I am wondering if anyone has tackled this issue and could point me in right direction.
Many Thanks,
Ravi
Yes, it is possible. Just add the headers-formats option on the gantt directive in the html and add the following code to your $scope.option:
In the html:
<div gantt
header-formats="options.headersFormats">
<div>
In the controller:
$scope.option: {
//other options
headersFormats: {
'year': 'YYYY',
'quarter': '[Q]Q YYYY',
month: 'MMMM YYYY',
week: function(column) {
return column.date.format('MMM D [-]') + column.endDate.format('[ ]MMM D');
},
day: 'ddd',
hour: 'H',
minute:'HH:mm'
},
}
Setting the 'day' property of the headersFormats to 'ddd' will make it to display the dates as 'Mon', 'Tue', 'Wed' e.t.c.