ReactDateRangePicker, gives it's own date picker to use:
I actually want this field only and do not want the default calendar date range picker, I have my own date picker that I'd like to place using custom css positioning when the focus changes. How do I disable this default calendar popup?
well, there seems to be a css workaround by overriding these classes:
.DateRangePicker_picker {
display:none !important;
}
.DateInput_fang{
display: none !important;
}
Related
I want to show the datepicker in inline style on mobile screen so that the datepicker should display full on mobile screen using all the mobile screen width and should show normally on the desktop screen is there any way to do this
I am new to the react that is why I am facing issues
function ShowWithPopOver()
{
if(window.innerWidth>700)
{
}
else
{
const el = document.getElementById('MobileDatePickerOverlay');
el.classList.add('mlk-drawer-open');
}
}
<DatePicker placeholder='EndDate'onClick={ShowWithPopOver} onChange={onChange} name='EndDatePicker' id='EndDatePicker' style={{ border: "transparent", boxShadow: "none" }} />
I want to show the datepicker in a div that will open before the datepicker will show.
You can use bootstrap for doing it. It will adjust the component's width based on the screen size. You can define how much width a component should take for screen of a particular size. Suppose your component is
<dateTimePicker>Date<dateTimePicker/>
you can simply do is this
<dateTimePicker class="col-sm-12">Date<dateTimePicker/>
which tells browser that if the site is opened in small device like mobile it should take full width of screen and no other component should be placed alongside it.
You can use this tutorial for reference. I hope this will help you
I am following Sastaticket you can also check from there in different screen sizes I need to show the datepicker according to screen size if on a desktop window the datepicker will show normally that is already showing but when on a mobile screen i need to open a drawer and then the datepicker should show inside the drawer with inline style i have created the datepicker field outside the drawer .is there a way to do this i am using antd datepicker
I have tried to create the custom drawer and when on mobile screen only the drawer is showing and not the datepicker because i do not know how to call the respective datepicker in a onclick function like in the jquery we have .datepicker() for custom styling and other stuff
<DatePicker placeholder='EndDate'onClick={ShowWithPopOver} onChange={onChange} name='EndDatePicker' id='EndDatePicker' style={{ border: "transparent", boxShadow: "none" }} />
and here is my function code
function ShowWithPopOver()
{
if(window.innerWidth>700)
{
}
else
{
debugger
const el = document.getElementById('MobileDatePickerOverlay');
el.classList.add('mlk-drawer-open');
}
}
if mobile view then add class to this view MobileDatePickerOverly to show the view and after that the datepicker will show in that view as inline
Inside my react-router-dom Link, I have an icon. Whenever this icon is clicked, it turns red. How can I prevent this?
Gif showing the problem
That color comes from default css for html a elements.
You just need to override the css color of the link.
Simple example:
.my-link {
color: inherit;
}
I have a tag div:
class="ant-upload ant-upload-select ant-upload-select-picture-card"
I tried many ways but can't change the style of tag div.
Thanks for watching!
You can override the default style by adding your custom style. For example, if you want to change the background color, add new CSS class in your custom CSS file as,
.ant-upload.ant-upload-select-picture-card{
background-color: 'red';
}
There seems to be an automatic greying of the original button color when applying "disabled" to <Button>. I want to change the color completely.
Current button:
<Button disabled>{example}</Button>
Current styling that is not overwriting the greying:
.labels .button{
background-color: #6363FA;
margin: 10px;
color: #F2F1F7;
}
Hoping to be able to apply a new background-color for disabled somewhere
From my experience, here's one good way you can restyle a Button like that
(Follow the guide here: https://react.semantic-ui.com/theming/#theming-with-create-react-app first if you haven't setup theming!!)
Go and edit some-location/semantic-ui/site/elements/button.overrides, add a class like .ui.huge.disabled.button for a <Button /> with properties size='huge' disabled
sample button disabled css class
Which will result in something like this:
button screenshot
By the way, I found that class name above by inspecting it in the browser:
css class in inspector
I hope this is clear! If you have any questions, let me know :)
PS: Sorry didn't have enough rep to embed images...
EDIT: Forgot to mention, in the CSS example above, #gold and #black are custom colors I added into semantic-ui/site/globals/site.variables
I found a simpler way. I'm using Semantic UI React - not sure if that matters.
I have a css class for the button:
.main-app .landing-page .quick-search {
background-color: #41B3A3;
color: rgba(255,255,255,0.9);
}
and I add one like this and it works to respond to the disabled property
.main-app .landing-page .quick-search:disabled {
background-color: #f5f7f6;
color: rgba(56, 143, 89, 0.9);
}