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() },
]
}}
Related
I am looking for a way to show events in an Ant Desing Calendar using dateCellRender with the dates from an variable object, like this one:
[
{
"id": 1,
"content": "Example",
"date": "01/05/2022",
"horario": [
"2022-05-26T06:00:00.925Z",
"2022-05-26T07:00:00.478Z"
],
},
{
"id": 2,
"content": "Example",
"date": "08/05/2022",
"horario": [
"2022-05-26T11:00:00.859Z",
"2022-05-26T14:00:00.976Z"
],
}
]
The normal way to show events is using a switch, like you can see in this CodeSandbox from AntD: https://codesandbox.io/s/ruj266
My object comes from the backend and will always change, there is a way to show dynamic events using that object?
Since antd calendar works with moment object, so when you try to render the calendar, you can covert the value of current date to string by using format method of moment object like this:
<Calendar dateCellRender={(value) => {
const stringValue = value.format("DD/MM/yyyy");
return (...);
};} />;
and compare the result of format method with date values in your data, I implemented an example by using of your data example here on codesandbox:
antd-calendar-example
is this what you are looking for?
I am using the range date picker of antd (v4.x).
<StyledDatePicker inputReadOnly={false} value={dateRange} onChange={onChange} />
In my test file I'm doing the following :
fireEvent.change(rtl.getByPlaceholderText('Start date'), {
target: { value: '2020-01-01' },
});
fireEvent.change(rtl.getByPlaceholderText('End date'), {
target: { value: '2020-03-03' },
});
fireEvent.keyPress(rtl.getByPlaceholderText('End date'), { key: 'Enter', code: 13 });
await waitFor(() => fireEvent.click(rtl.getByText('Apply')));
I tried few console logs in between fire events to see if the input actually has the right value, but it's always empty.
I also tried with :
userEvent.type(rtl.getByPlaceHolderText(...), myValue)
It didn't seem to work either. If you guys have any solution to that problem I would be happy to take it.
Thanks.
After few hours.. I figured out a solution.
// Click on the filter icon
fireEvent.click(rtl.container.querySelector('th:nth-child(3) .ant-table-filter-trigger'));
// Mouse down on element, to select input and trigger modal opening
fireEvent.mouseDown(rtl.getByPlaceholderText('Start date'));
// Writing the value of the desired date
fireEvent.change(rtl.getByPlaceholderText('Start date'), {
target: { value: '2020-01-01' },
});
// If the date format is valid, antd will highligh the written date, so we clicking on that one
fireEvent.click(document.querySelector('.ant-picker-cell-selected'));
If you try to change the value of the input without proceeding like that, it will probably not work, keep in mind that inputs are set to read-only by default, whenever you will try to change a value with just typing it will reset the input.
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!
I am tryng to export current grid data to excel it is working good in chrome but its not working for IE.How i can acheive this task and make it work in IE ? Any suggetion or help will be appreciated.
gridConfig.JS
toolbar: [
{
template: kendo.template('<a href="" class=\'k-button k-button-icontext k-grid-add\' ng-click=\'addNewRole();\'><span class=\'k-icon k-add\'></span>Add Entity</a>')
},
"excel"
], excel: {
fileName: "Subcategory Export.xlsx",
// proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
got it working its more like backend work we created one end point where we can post the grid data with base-64 and backend is sending an attachment
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.