I'm looking for a solution to pick up a date on mobile app (using Ionic framework). I would like the user click on a button and it triggers a selection of days, month, year, like on the picture below :
I'm not talking about multiple selections, but a combination a choice in the same select tag.
Any idea how to do it with JS/AngularJS ? I don't want to use JQuery.
Take a look at this. It has a list of all the input types and their behavior on mobile devices.
http://mobileinputtypes.com/
I found a partial solution for date. On the ionic website, there is a component which give the opportunity this behavior with date (http://ionicframework.com/html5-input-types/#date).
But I have still no idea how to deal with custom options using multiple columns.
Related
I need to use a calendar for my React app where user can choose multiple days.
So far I only found the react-date-picker module but I don't really like its CSS customisation.
I thought it would be better to use HTML tag input type="date" if there is such an opportunity as it looks nice on all mobile devices(my app is for mobile devices only).
On desktop the behaviour of this element is different from the smartphone, it closes each time the user chooses the date but I don't need desktop and on smartphones the calendar is not closing after the click which is great, however, I want to style selected days somehow with the background so the user would see what he chose.
I figured out how to add all those dates to an array and it basically works OK on smartphones but the problem is I can not style the calendar the opens up.
Can anybody suggest how do I go about styling the days user clicked on? Because by default it shows background for the last date you chose and that's it.
This is my codesandbox link
HTML does not provide such kind of <input>.
You can use daterangepicker for ranges.
Or, MultiDatesPicker to be able to select specific days.
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
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'm looking for a proper way to implement the jquery mobile filter list in bootstrap typeahead component.
The functionality that I needed is here in the following link. Please scroll down to the bottom. http://jquerymobile.com/demos/1.2.1/docs/lists/lists-inset.html
In the filtering list, I want to add checkboxes for each list items and the user should be able to check multiple value. They don't have to be added to the textfield. As that's the only function I need, its no use of adding the whole jquery mobile library to the project.
I found couple of options in the following link which goes near my requirement.
http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead
But, the multiple selection by clicking checkboxes didn't work with bootstrap typeahead.
Can anyone give me a good solution for this.
Thanks
If you looking for bootstrap, this plugin can be used in your project
https://sliptree.github.io/bootstrap-tokenfield/
I saw following has been suggested in many places:
http://ivaynberg.github.io/select2/
(If you use the multi-value version.)
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/