I'm trying to insert a datepicker in my angular 4 app but I've faced some dificulties.
So I tried this kekeh/mydaterangepicker but I need to have this design:
I tried to modify the css of the plugin in my css but without real success. I cant succed to change the color of first selected node and last selected node to follow my design.
My actual state:
If someone can help me.
I can also start from scratch but I don't know how to properly create a datepicker in angular.
The styles of the component can be changed by overriding the existing styles.
Read documentation and follow the instructions. The library documentation also provides you with examples.
Also you you might want to use Angular material datepicker
It is very convinient to work with it and it has bunch of other useful components.
Related
I am building a nextjs application. In my project I am not using TypeScript. I am using Javascript. I need a horizontal scroll on mouse wheel and also on touch. I haven't find any react packages. But I find one react package - react-horizontal-scrolling-menu. I see all demo. It perfect for my project. But I am facing one problem. Al of it's example create in TypeScript. But I am not using typeScript. If I copy the code, Then I get many error?
https://codesandbox.io/s/no-scrollbar-and-buttons-position-c3kn5?file=/src/index.tsx
In this situation, What I have to do. I am not understanding?
Please can anyone help me. I am facing this issue over 10 days. Please do not dislike or close my questions.
Converted to JavaScript. You only needed to remove types and change tsx, ts to jsx, js.
https://codesandbox.io/s/no-scrollbar-and-buttons-on-bottom-forked-m2wci
You just need to get rid of every type definition of typescript. Every type in TypeScript is written after the variable name behind ":". So, in the codesandbox example, remove things like ": number" or ": void" at the end of functions.
Edit: im on mobile now, so i can't send you the Javascript code. The things you should look for are on line 17, 20 and 57. Hope the helps you.
I am using also the component for my project which not typescript. As someone suggested I just removed the type definitons in the Arrow function.
I am looking to add bootstrap or flatui styling to my ExtJS 5 app. Now, i have done some investigation and tried a few things
Just including bootstrap css and js files directly in app index file. This doesn't work well because extjs default styling seems to override the bootstrap styling. And also, the way sencha buttons and other components are created they have multiple nestings so even if bootstrap styling didn't get overridden, it still wouldn't work well.
Picking up extjs-bootstrap-theme from extjs 4 and adapting it to 5. Only issue with this, it will have very limited bootstrap styling as this is built as a sencha theme.
Has anyone had any experience with this? What would be the best way to go about it? Thanks
If you use ExtJS, you should embrace the ExtJS theming system and guidelines.
As per them, the best way would be to derive a new theme from ext-theme-crisp or ext-theme-neptune, for which you overwrite documented CSS variables and create a new iconset to make the new theme match the look of bootstrap/flatui as far as possible. Only then, when this comes to an end and changes are still required, you can add JS code or custom CSS.
While ExtJS has over 500 CSS variables, my guess is that you would have to change between 20 and 100 of them to make it match very closely.
You should start with the most general variables from Global_CSS like $base-color, and then proceed to the more detailed variables, which are often derived from the general variables. So in the best case, you can skip 100 of them because you already changed $base-color to the correct value.
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
I just start using bootstrap and I have used https://github.com/designmodo/Flat-UI as flat UI design.
Currently I just added https://github.com/Eonasdan/bootstrap-datetimepicker as my datetimepicker. But it seem both css have been fighting with each other.
I able to click on the button of datatimepicker. It straight display the time at the textbox without letting me choose from the dropdown menu (that it should appear). I believe flat UI from designmodo have override the dropdown menu for specific class but too bad I have no idea which part to fix this problem.
Anyone have met the same problem like me? Please guide me from here.
You probably got your answer. But I faced similar issue. I am using https://bootstrap-datepicker.readthedocs.io/en/latest/ and https://github.com/Eonasdan/bootstrap-datetimepicker. Components aren't the same, but I faced same issue. After some analysis, there is a css conflict. Both of them create class .input-group-date. So there's no fight as you mention, but based on css rules(Two css files defining same class), order of css files will define which class will stylize the component and you will have one of components not working properly.
I'm having trouble understanding the Foundation 4 JS docs sorry - if I use this:
$(document).foundation();
Every thing works great, but If I use this:
$(document).foundation('orbit', {bullets:false});
The bullets get removed from orbit but then none of the other javascript works (the responsive .toggle-topbar or the custom forms #customDropdown).
I've also tried this:
$(document)
.foundation()
.foundation('orbit', {bullets: false});
But then all the JS works but the bullets don't get removed.
I'm just not sure how it works sorry, any pointers in the right direction would be much appreciated.
Cheers
Ben
Your suggested answer #CMSCSS, while it works for you, is not accurate in general, especially this part:
if you initialize one plugin with options (e.g. Orbit) your have to
initialize all the others you want to use or they won't run
The reason that custom styles or behaviors won't work or won't be applied is because of the order in which you initialize foundation and its components. To make everything work, your custom styles/behavior and foundation in general, you should do the customization first then initialize foundation. You can go to one of my answers and see how you can make it work. My answer was never accepted but it's a proven solution. I do it that way and it works. On a page I have an orbit, custom forms and grid layout and all work using the given technique. Hope that helps you.
So figured out that if you initialize one plugin with options (e.g. Orbit) your have to initialize all the others you want to use or they won't run like this:
$(document)
.foundation('dropdown topbar forms')
.foundation('orbit', {bullets: false});