Business days and hours picker for JavaScript/jQuery - javascript

I'm looking for existing jQuery plugins that can be used as a picker for business days and hours, something that looks similar to this:

Even its not the exact thing you are looking, check this out
http://gendelf.github.io/jquery.businessHours/

'From' could be drop-down using simple jQuery -ui - same with 'to'
Mon-Sun are just a radio-group where you can only select one -> http://jqueryui.com/button/#radio
Then you can add these strings together (or convert to date-time if it isn't just for display purposes and format it after)
Finally append to 'results' box using something like
http://xoxco.com/projects/code/tagsinput/
So the plug-ins you want are jQuery-ui and some tagging plug-in (of which there are hundreds) - the rest is some simple javascript to tie it all together. Have a go - if you get stuck post again with what you have tried.

Related

Where can I find a calender plugin for Classes

Hi I'm looking for a jQuery, JS, or PHP code that will allow me to display a calender with predetermined classes available for booking, i.e. a calender that displays the time of classes available at the local gym for each day and allows for possible bookings, even just allows an external link to another booking page would be ok. I've been looking for this for a few days now and have had no luck. My apologies if I'm using the wrong terminology and this has been covered many times before.
Regards,
Chris
Where I live a lot of gyms use https://www.mindbodyonline.com for class timetables and booking.
Example: http://www.thefitnessplayground.com.au/timetable

jquery date input plugin

I would like to know if there is a date input plugin for jquery that work like this plugin epecifically the datetimeinput.
This input check that the values are correct and only let the user to input the numbers not the / characters for the date.
I know that there are some mask inputs plugins out there but I would like one that validates and only lets the user to input correct date.
Regards
You can use jQuery Calendars Datepicker. They providing validation plugin also
You will get required info from HERE
Maybe this awesome jquery plugin fits your needs.
Working demo code. However there are much more plugins just try a short search on google.
mongaru, why don't you use the plugin that you linked? It's free for personal use.

What a good date + time picker for jQuery (not jQuery UI!)?

I need something like this , but with date picker.
I don't wanna include jQuery.UI only for date/time picker.
I was tried to search in google but found calendar that I need only for MooTools.
I modified a jQuery calendar and added the time picker control to it some time ago. There might be better out there, but this has served our purposes just fine.
http://razum.si/jQuery-calendar/TimeCalendar.html
see the following link,i think it may help you
Any+Time™ DatePicker/TimePicker AJAX Calendar Widget

Javascript Time Picker like Windows

I am looking for some kind of example of a Javascript Time Picker that is similar to the one used in Windows to pick the time...well except with out the seconds being in their. I have a mockup in place at the moment but trying to figure out how some of the user functionality should be be as it is two inputs and a dropdown. I guess I just am not happy with it at this point.
Thanks ahead of time for any help
There are a number of jQuery plugins that you can use for the perfect looking time picker control.
Here is a good one: http://plugins.jquery.com/project/timepicker
The Windows time picker (if you're referring to the one to change the system clock) is basically just a masked edit text box. If you're looking for something similar, you just need some JavaScript to do masked edits, like this one:
http://digitalbush.com/projects/masked-input-plugin/
To make it specifically for time, you should be able to easily add logic to ensure the hours don't go over 12 (or 24), and the minutes don't go over 59.
Personally, I prefer the way Google Calendar does time selections. There is a jQuery plugin for this which can be found here:
http://labs.perifer.se/timedatepicker/
Here's a cool one.
http://www.java2s.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm
An online example of the control is posted here.
Like Dan said, if you are looking for a masked text input and if you want to use the PrototypsJS framework, there is http://code.google.com/p/phenx-web/ .
And if you want a good date/time picker, you could use this : http://home.jongsma.org/software/js/datepicker (also PrototypeJS). I'm currently working on it with Jerermy Jongsma to add more features.
I'm pretty fond of the jQuery stuff, There is a fairly nice one here.
I ended up creating a prototype time picker that for the time being is less fancy than a lot of the others out there. It shows up a regular input until you click on it then it shows a dropdown that has times in it.
I can share the code if anyone is interested
A timepicker shouldn't slow down the user's interaction, should be pretty straightforward without having to play with it for a while, and should be keyboard-accessible for users who can't manipulate a mouse. The time-picking functionality provided by the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget with TimeZone Support meets all of these design goals, supports countless date/time formats and is easy to customize using CSS or jQuery UI.
A good test of timepicker usability is to think of an odd time (say, 10:32pm) and then see how long it takes to accurately select that time using various time pickers. You can probably do it with Any+Time™ faster than you can even write out the time by hand... how's that for speed and ease of use? :-p

Auto-format structured data (phone, date) using jQuery plugin (or failing that vanilla JavaScript)

I like jQuery and I was wondering if anyone have used a good plugin or (non-jQuery) JavaScript library that allows for auto-formatting of structured fields like phone numbers or dates. I know of the jquery-ui-datapicker plugin, and not what I am looking for here. You may type in a phone number as 123 which then becomes (123), additional numbers will be formatted as (123) 456 7890 Ext. 123456. If you press delete the auto-formatting stuff disappears automatically, and repositioning of the cursor, say, after (123) and pressing delete will remove the 3 and make the rest (124) 567 8901 Ext. 23456. The ones that I have played with appears unreliable.
Does the Masked Input plugin do what you need or that one you have already found to be unreliable?
Allan,
I do believe your best bet would be to use regular expressions inside of two separate formatting methods in order to achieve the desired results. This will be rather straight forward for phone numbers and I'll post a code example if one isn't posted by the time I sit back and have 10 minutes straight to write something up. Perhaps for the date field, you can use something like the jQuery UI Datepicker instead? http://marcgrabanski.com/pages/code/jquery-ui-datepicker
HTH,
/sf

Categories