I have faced a little problem while trying to use this two jquery plugins. Hope someone can help me out with this.
The first plugin (DatePicker) I have used is the default one that comes with the jqueryui.
The second plugin (DateTimePicker) is the DateTimePicker from http://trentrichardson.com/examples/timepicker/
What I am trying to achieve is to have a user-defined date range like the sample provided in the jqueryui, with two textboxes (specify start date and end date) http://jqueryui.com/demos/datepicker/date-range.html
While having another datetimepicker to allow user to select a datetime within the date specified above.
Here's a sample: http://jsfiddle.net/uyB52/1/
However, the issue here is that whenever I try to add in the datetimepicker javascript, the datepicker will not function properly. It will not be able to set the minimum date range as what it is suppose to be.
Have anyone encountered the same issue before? Can some one please advice me? I am still new to programming. Thanks in advance!
It looks like your datetimepicker plugin interferes with jQuery UI (although it is supposed to be a working jQuery UI plugin). There may are possibilities to fix this issue, but I would recommend to use no or another plugin for picking the time (which works).
If you want to use a datetimepicker, you will have to search for different plugins and find out which one fits your needs best. I can not really recommend a plugin because it depends on your requirements.
But you could also go without a datetimepicker plugin and only use jQuery UI instead? Have a look at this fiddle: http://jsfiddle.net/uyB52/7/
The idea is to use jQuery UI's datepicker for picking dates, and use dropdown boxes for choosing the time. You could also let the user input the time in an input field and validate it. Or, instead of dropdown boxes, use the jQuery UI slider.
Got it. You should convert string into Date as minDate and maxDate options take Date object.
$("#from").datepicker("option", "maxDate", new Date(selected_date))
jsfiddle
Related
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
Is it possible to convert html tag/format <input type="date"> to html tag/format <select><option></option></select> ?
I just wanted to make an input type date to a select drop down format.
For example:
From
Date of Birth - input type date
To
Date of Birth - select drop down option
Actually, I don't want to separate the date of birth values into three. But instead, make a better solution wherein I can transform the input date into a select drop down one.
Anyone who can help me with this one? Thank you.
You may use jQuery plugin to showcase a datepicker like the one below:
https://plugins.jquery.com/datetimepicker/
You can easily find many other jQuery plugins for the same.
If you wish to play around with its UI, you may use jQuery UI built-in themes or write some CSS on your own.
Depending on the browser to open dialog. and also input type=date not support in every browser.
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 am using Datebox widget and want to limit the dates from which the user can choose.
eg. Only dates between 2013-Jan-02 and 2013-Jan-25 should be enabled, rest disabled.
How do I provide these values programatically ? Passing it in JSON is not working for me.
$('#dateInput').datebox({"mode": "calbox", 'min':"2013-01-02", 'max':"2013-01-25"});
Please let me know the syntax to pass the date range parameters.
I dont know whether it is possible in Datebox widget. But if you pick Jquery UI datepicker, it has this option.
Have a look at this if you are interested
http://jqueryui.com/datepicker/#min-max
Are there any existing AJAX/Javascript Date picker widgets/libraries that also allow you to select a time range? That is, after picking a date, an existing UI pops-up/becomes available to select a time range for the same.
I'm looking for example of things like this. UI Libraries that offer some form of date picking, followed by a step to pick a time range.
Yes, I know, a dozen different ways this could be implemented myself. I'm interesting in knowing what kind of preexisting libraries exist for this problem domain.
Here are some of the MANY choices:
Fancy Time Picker
NoGray Time Picker
This JQuery Plugin
Any+Time
Another JQuery Plugin
JQuery pt.TimeSelect
Clock Pick
Clock Picker
TimePickr
-
John Resig (The J IN JQuery) has this to say about it.
You'll need to combine a DATE Plugin with a Time Plugin, don't try to cram both into one dialog