Do you know an Angular datepicker which has input features like:
Keyboard navigation (e.g. keydown for previous day, keyup for next day) in the input field (so I don't mean in the datepicker popup)
Autocomplete, e.g. when you fill in 12/12 and tab away, it automatically fills in 12/12/2019
Keys for specific actions, e.g. T fills in today's date
Or a datepicker which can be easily customized to work like this?
I found that datepickers from libraries like Kendo and Syncfusion try to do too much and are therefore difficult to customize to our needs. They focus on the datepicker popup, while the input field is hard to work with without mouse.
(the old ASP.NET Peterblum components had all this user-friendly functionality which does not seem to be available in modern frameworks, see: http://peterblum.com/DES/DateAndTime.aspx#DateTextBox).
You can find some date-pickers written in angular here, https://angularscript.com/?s=datetime+picker+. Most of these are customizable as your needs. Thanks
Related
I am working on a simple web app using nothing but Vanilla JS, HTML and CSS.
I have created a form, which contains multiple input fields of type "text". Now I want to add a datepicker. I have tried adding an input field of type "date", but I really don't like the design of this datepicker and I haven't found any way of styling the calendar that pops up when clicking into this field.
My first question is: Is there a way to style the calendar of an input field of type "date"?
As I assume the answer to this question is "no", I have searched for an alternative. There are multiple GitHub projects out there, designing a calendar. One example is this. This example requires adding the html-code to my webpage. Initially, I wouldn't show the calendar-div, for example by setting its style to display: none in my css file. I would have to add a listener- to an input field of type "text" as well and then upon clicking into this field display the calendar. But this would rearrange the input fields below this "datepicker", which I don't want. Is there a way to just display the calendar and let it overlap with its surroundings, for example the input fields below this "datepicker"-field?
I would also appreciate any well known alternatives to styling datepickers with nothing but Vanilla JS, HTML and CSS, if there are any.
You have done your research and the answer is: No.
<input type="date"> or <input type="datetime-local"> are HTML inputs and its up to the browser vendor (Google, Mozilla, Apple) to decide how to render them.
If you open your dev tools and enable shadow DOM, you can even inspect the nodes created by these inputs but it's not recommended styling them.
It's a Front-end developer's life in 2022 (and perhaps more years to come) to introduce datepicker dependency or create datepicker yourself if you want to have specific look or functionality. From my experience, datepickers are not that hard to make but it's all the corner cases and localized edge cases you have to look out for. So I think it's easier to just go with a dependency.
If you don't want to bring full-fledged framework just for the datepicker then there are various options if you search for them.
You might like modern web components and you could search for date picker created with web components. These do not require any framework, just a supported browser. They usually come with their own stylesheets and JS with ability for some customization, I'd try it out.
I'm using the Material-UI-pickers library and have created a KeyboardDatePicker element that I would like to have a dynamic behaviour, allowing the user to enter partial dates by using the keyboard (while the behaviour of the picker popup should remain the same). I want 1998, 1998-04, 1998-04-12 to all be valid inputs.
I've been reading through the documentation but can't figure out a way to make this work. Any ideas?
https://material-ui-pickers.dev/api/KeyboardDatePicker
https://material-ui-pickers.dev/demo/datepicker
I would like to use the Angular Material Datepicker in my Angular application, but I a not quite satisfied with the default behavior The datepicker normally opens the calendar as a popup under the input. Instead I would like for the calendar to be permanently opened so that the user can continue to view the calendar as he selects different dates.
I understand that there is an opened property that reflects the status of the popup:
Angular Datepicker
Could I achieve the desired behavior by permanently setting the property to true to prevent the calendar from closing? I have never rally modified the default behavior of a library before...how would I go about this?
Perhaps a different approach would be separating the input from the calendar? I wonder what the best design approach would be?
I'm looking for suggestions/recommendations for a JQuery/Javascript calendar that can display multiple months at once (ie. previous month, current month, next month) like so:
(The attached mockup shows a 4-month view, but I think we'll actually be doing a 3-month view).
I DO NOT need a date picker. This is basically meant to display a user's schedule, with no ability to choose a specific month/year (beyond the side-scrolling). We'll pull events out of our database, hook them into the calendar somehow, and then on a day click/hover (or both), display additional information. Events will not be editable from this view - it is display only.
I've looked into general JQuery calendar plugins (Ion Calendar, CLNDR), but none seem to have the basic multiple-month functionality I need. Multi-lingual support (or the ability to add multi-lingual text) is also important to us. I was really hoping to find a ready-made plugin for this - can't be the first time someone's tried to do it!
In case it's any use/help, we use ColdFusion and MSSQL Server. We've also got JQuery 1.9.1, JQueryUI 1.10.0 and Bootstrap 2.3.2.
Edit: I did look at the JQuery UI datepicker, but it won't work for the functionality I need. I can't see any way to attach data to a specific date, or to be able to style certain days differently than others. I think the primary issue w/ it is that it's a datepicker, not a display calendar.
Like Sean said in the comments, the best option you have is probably FullCalendar. Although multi-month isn't supported out of the box, you might be able to achieve it by adding multiple calendars. Check out Issue #199, which describes a possible solution.
Regarding the multi-lingual problem: although it isn't multi-lingual by itself, FullCalendar does support modifying the days, months, etc. See Text/Time Customization. You could use ColdFusion's MonthAsString and DayOfWeekAsString functions to make it multi-lingual yourself.
I want to be able to make an HTTP call updating some select boxes after a date is selected. I would like to be in control of updating the textbox so I know when there has been a "true" change (in the event the same date was selected). Ideally, I would call a function to pop-up the calendar and be able to evaluate the date before populating the text box...so I can do my validation before making a server call.
JQuery's datepicker is an extremely flexible tool. With the ability to attach handlers prior to opening or after date selection, themes, range selection and a variety of other incredibly useful options, I've found that it meets all my needs.
The fact that I sit next to one of its maintainers here at work is also fairly useful...
I've been playing with the jquery datePicker script - you should be able to do everything you need to with this.
YUI and ExtJs both have very nice looking and flexible calendars.
If you ever end up considering a JavaScript library/toolkit, Dijit, a widget system which layers on top of Dojo, has a calendar (Dijit calendar test page). I found it relatively simple to implement.
//Disclaimer: I'm in the middle of a love-hate relationship w/ Dojo at the moment, as I am in the process of learning and using it better.
I don't like the MS ASP.NET ajax, but their datepicker is superb. Otherwise, jQuery datepicker.
Check out the ASP.NET AJAX Calendar Extender or Steve Orr's drop down Calendar control.
I'm using the JSCalendar from Dynarch for a project I'm currently working on. It is LGPL licensed and really flexible (easy to customize to your needs). It has lots of features and looks good, too.
http://www.dynarch.com/projects/calendar/