I need to create Date picker for reservation project in React Js. I need calendar view which left side row will show time with hours and upper days of the week). Unfortunately I could not find such component or npm package for using. Could you please suggest me any package which I can use for such kind of view.
I am not saying that kind of datepicker does not exist but it sure is rare and could be something that might end up demanding you to create your own.
What I would recommend is the AirBnb datepicker:
https://www.npmjs.com/package/react-dates
You can look at this code example if reading the npm docs isn't clear:
https://github.com/airbnb/react-dates
Easy to use
As for the times and everything maybe that could be a side logic that you could self when one has selected dates
Related
I am using antd date picker. Is there a way to show months and days in date picker in welsh language?
Referred this doc https://ant.design/docs/react/i18n
But couldn't find welsh in it. Is there a way to add welsh in the antd datepicker.
Thanks in advance
Ant Design doesn't seem to support Welsh, but you can add it by yourself.
They state here how you could add a new language to the datepicker, and they even give you an example pull request so you can know which files to add/change.
The best you could do right now is fork the repo, add support for Welsh, make a PR to the project and while it isn't accepted use your own forked version.
I use a DateTime Picker in an editor of my app (within a PickerComponent). I'm using it only in lightweight mode, since DateTime Picker fail on Android if not (not tested since some months, but I suppose it still the case).
I've successfully translated the buttons "Cancel" and "Done" with the L10N API, but I can't translate months (for Date type) or abbreviated day/month (for DateTime).
The keys for each months are putted in the .res file, that worked for the buttons, but it does not work for the months of the picker.
Any hint on how to achieve this localization ? Some of our customer are really bad at english... Thanks in advance !
This is localized via SimpleDateFormat and its class DateFormatSymbols. Unfortunately this has no way to globally customize that value using the standard project resource bundle which seems to be a serious omission of that code. This is something we'll need to fix via the issue tracker, I don't see a short term workaround from a brief glance at the code as it assumes you would have access to the SimpleDateFormat which is highly impractical.
I have a task from UX designers to create a datepicker that displays multiple months + time.
In our project, we are currently using react-datepicker library to manage our datepickers.
This is the react component used in our project:
https://hacker0x01.github.io/react-datepicker/
The react-datepicker supports both multiple months and time.
The library itself puts the time on the right side of the calendar. However, the UX designers want the time to be at the bottom.
Is there a proper way in doing this without messing around the date-picker library itself? I know it is a big no no to mess around with the library itself, but what options do I have?
Is there a way around this?
If not, I might have to renegotiate with the UX designers.
I decided to create a reusable date range picker component from scratch. I will not be using the react-datepicker at all for this case.
I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/
I am new to ui.grid and using the tutorial to get a grid with lots of data.
My version is 3.0.0.RC16 which I got from bower install angular-ui-grid
I would like to use paging but get errors.
There are 2 Tutorials regarding paging one called Pagination and one Paging:
http://ui-grid.info/docs/#/tutorial/214_pagination
http://ui-grid.info/docs/#/tutorial/215_paging
Whats the difference between the two?
Module 'ui.grid.paging' does not exist while 'ui.grid.pagination' does. What am I missing?
I want to use the paging example but always get errors
Do I need a special unstable release? how to install it with bower?
Thanks!
UPDATE
Meanwhile I manually downloaded the unstable version of ui-grid and indeed, paging exists only in unstable. I could not find explanations on the web why this is the case, so I assume that its not ready for prod. Nevertheless I would like to understand the difference to Pagination and if there is a bower package to install unstable versions.
UPDATE
meanwhile Paging was removed from the unstable versions. It seems the functionality was completely merged into pagination.
I had to change "paging" into "pagination" in controllers and views and everything seems to work (so far)
https://github.com/angular-ui/ng-grid/pull/2399
I was not the only one confused
I'm not using bower so I cannot help you with this one.
But I can tell you a few words to the difference of 'paging' and 'pagination' in ui-grid:
As far as I know the 'pagination'-module was a first and new development of paging in ui-grid. A few weeks later, someone tried to reimplement the paging from the old grid-version nggrid in the new ui-grid and named it 'paging'.
There are efforts to combine the two. See this issue on github:
http://github.com/angular-ui/ng-grid/issues/2106
Facing rapid changes in ui-grid, github seems to be the best place to get answers to problems with ui-grid. The tutorial is most of the time not up to date.
But the active developers react very fast on incoming issues on github.