I recently develop a web widget which shows 2 autocomplete components and 2 datepickers, basically is a search bus widget, where you select origin, destination, departure and return date. On some pages the widget works great. But in anothers, the datepicker is having some troubles, most precisely, isn't showing the calendar. Trying wrapping the datepickers to isolate my calendars and not interfering on another scripts/styles/mumbojumbo happening on those websites.
I based my widget on the examples of Alex Mandaron
http://alexmarandon.com/articles/web_widget_jquery/ and for loading jquery UI components http://alexmarandon.com/articles/widget-jquery-plugins/
But recently I came across on this topic which help me
Loading jQuery UI with getScript which is great
But still it doens't work
For more examples, you can check the working widget on
widget-doc.pinbus.com
and here is where isn't working http://www3.pasajes.co/ and select the "Bus" tab and try to click on the "Fecha de Salida" input
Thanks to all!
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 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 having trouble finding a simple js web UI library that handles styling the following right out of the box:
Buttons
Listboxes
Input Boxes
Dropdown Menus
Text Areas
Checkboxes
Radio Buttons
Alert Dialogs
Modal / Non-modal Windows
I can see various libraries offering styling but so far haven't found one that handles the aforementioned all at once. The reason why I'm looking for something that already contains support for all of the above in one go is because I've had previous experiences with different frameworks / libraries conflicting with each other because they weren't from the same developer / author.
So before jumping in and trying to mix and match those that I've found, I just want to make sure I haven't missed something good.
Consider Dojo: http://demos.dojotoolkit.org/demos/themePreviewer/demo.html
All of those widgets have styling "right out of the box." If that doesn't meet your needs, maybe you could be more specific about what you're trying to accomplish.
I am looking for Jquery datepicker control like ajax calendar control with image button next to text box in asp.net.
If any examples available please share with me.
I saw this http://www.west-wind.com/weblog/posts/891888.aspx, but I donot custom control.
jqueryui.com Datepicker!
EDIT:
Also, have a look at this address. There are more than 25 references of several datepicker ajax calendars and schedulers.
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/