Hi I'm trying to filter some data in react admin using the date input filter that is set to MM/DD/YYYY however the server that I am fetching from has the date listed as "date": "2021-11-27T00:00:00Z". I was wondering if there is a way to filter by date either by parsing the date above or using another way.
Here is my code:
const DateFilter = (props: any) => (<Filter {...props}>
<DateInput placeholder='Date' source='date' />
</Filter>);
Input elements have properties: format / parse with which you can convert the value to the desired form: https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record
Related
Need a way to deal with number format in react admin. I tried to change the format with Record Context. But my calculation went wrong.
I need something like this
5000000000 --> 5,000,000,000
Thank you
You can use the functions - parse / format. "Transforming Input Value to/from Record":
https://marmelab.com/react-admin/Inputs.html#recipes
I have been using this function to format numbers:
export const formatDecimals = (figure) => {
return figure && figure.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
I have been working on a calendar topic (react-native-calendar-picker). If this does not work can you suggest me with a date picker dependency which has, range availability, disable dates and if possible to disable weekends. I am using moment.
My code:
import CalendarPicker from 'react-native-calendar-picker';
import moment from 'moment';
<CalendarPicker
startFromMonday={true}
allowRangeSelection={true}
minDate={minDate}
maxDate={maxDate}
//disabledDates={[new Date('13/02/2021'), new Date('14/02/2021'), new Date('14/02/2021')]} tried so many forms too
disabledDates={ Date(2021,2,13)}
width={250}
height={250}
maxRangeDuration={10}
todayBackgroundColor="#f2e6ff"
selectedDayColor="#7300e6"
selectedDayTextColor="#FFFFFF"
onDateChange={this.onDateChange}
/>
Try this:
<CalendarPicker
...
disabledDates={date => {
let startDate = {...this.state.selectedStartDate}
let endDate ={...this.state.selectedEndDate}
if(date.isBetween(startDate, endDate)){
return true
} else {
return false
}
}}
// or use it as an array
I believe you can also pass a function but I haven't tried that yet.
I am using react native push notification.
But when i am trying to push local schedule, notification not show as time expected. It always showed when i reload the app (same behaviour like PushNotification.localNotification
how to set date for parameter inside PushNotification.localNotificationSchedule ? i am confuse to set value there. I already using timestamp but looks like the value is different.
1578909865373 => using date.now
1578907260 => i convert from string date to timestamp
my code :
function toTimestamp(strDate){
var datum = Date.parse(strDate);
return datum/1000;
}
const dated= toTimestamp('01/13/2020 16:21:00');
PushNotification.localNotificationSchedule({
//... You can use all the options from localNotifications
message: "testing notification", // (required)
date: date: new Date(dated) // in 60 secs
// date: new Date("2020/01/13")
});
}
please help how to insert or convert right value for date.
Thank you
Turn out i dont have to divide by 1000
timestamp is milliseconds.
so right function is
function toTimestamp(strDate){
var datum = Date.parse(strDate);
return datum;
}
async componentWillMount() {
this.setState({
mMonthStartDate: moment(new Date()).startof('month').format("YYYY-MM-DD"),
userAcadDetails: this.props.user.userAcadInfo,
item: JSON.parse(await AsyncStorage.getAsyncValue("""""""""""))
})
render Method
<Calendar
style={{ width: Dimensions.get("window").width }}
current={this.state.mMonthStartDate}
minDate={this.state.mMonthStartDate}
maxDate={this.state.mMonthEndDate}
onMonthChange={month => {
// this.getStartdate(month.dateString);
console.log("month changed", month);
}}
/>
I am not able to crack this whenever debug JS remotely is on Application perfect. when i turn it off this error will display
In my case I was using markedDates={{}} prop and the reason was that I wasn't passing valid date format which was (YYYY-MM-DD) rather than I was passing (YYYY-M-D).
eg :-
Valid - 2021-06-06
Invalid - 2021-6-6
Note:
These methods are considered legacy and you should avoid them in new
code:
UNSAFE_componentWillMount()
I would recommend doing your fetching and async stuff inside of componentDidMount(). The problem is probably that you are trying to set or use some values that are not available atm.
This issue happened for me when I passed wrong date format in the selected property of <Agenda /> component. I fixed the issue by providing the date in correct format i.e. YYYY-MM-DD.
I want to change the language a date picker is displayed in based on a moment() locale. Not just a translation of the date chosen by the user, but the date picker itself.
I have a datepicker with the following date-formatter
<b-datepicker
:date-formatter="(date) => moment(date).locale('ar').format('YYYY-MM-DD')"
></b-datepicker>
But am unable to get the date picker to change language. I've made sure to import and set the moment locale before hand.
Set locale, then format the date and then return it.
moment(date).locale('ar').format('LLLL');
You can format the date in different formats.
UPDATE:
To change moment language just define reactive data property (for example lang):
export default {
data() {
return {
lang: "ar"
}
}
}
and in your template:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
></b-datepicker>
So whenever you change lang, your date will be reformatted accordingly to your selected language.
Use month-names and day-names to translate the date picker. See here.
With moment, you can do that way:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
:month-names="moment.locale(lang).month()"
:day-names="moment.locale(lang).weekdaysShort()"
/>
But you should define locale(lang) at a global scope instead in component template...