Day and time range picker - javascript

Could anyone recommend me a good time day (only the name - ex:Monday) and time range picker..
I already tried http://pttimeselect.sourceforge.net/example/index.html and http://haineault.com/media/jquery/ui-timepickr/page/
but they don't have day selection..
anyone knows another one?

I really like this one: http://ghusse.github.com/jQRangeSlider/
It's highly customizable. Supports Dates, Integers and has a lot of options to fit it to your special needs.

I seriously spent hours looking for something similar for our site ParkMe.com. It seems with all the implementations someone out there would have created one.
When I couldn't find anything, I spent the weekend writing my own. Here's what I came up with.
http://keithhackbarth.github.io/jquery-datetime-picker/
https://github.com/keithhackbarth/jquery-datetime-picker
Not trying to self plug.. just think I came up with a half decent solution.

Related

Javascript handle big date (dates that has a year higher than the math max int)

I am trying to do a javascript code that is able to handle huge dates. The date year might be higher than the max possible int.
I don't need hour, minutes, second and milliseconds from the current javascript Date object, just number of days.
I have been searching for libraries which might offer this possibility but I did not found any :(
I also looked at this answer: How to use Date in Javascript for prehistoric dates?
But I would like the solution to work with future dates also. And some past dates might be bigger than the big bang
I hope that someone can help me with this issue :)

How can I dynamically test text in a CSS class and then update CSS based on criteria?

I'm very new to this, but have a little programming background, so hopefully someone out there can parse through this with me.
I spend a LOT of time looking at Reddit for work and being able to quickly see which comments are newer than others would be super helpful. My ultimate goal is to have a color scale that will quickly guide me to the new comments. Something like Red is less than 30 minutes, Green is 30-60 minutes, and Blue is 60+ minutes or something like that.
I've been doing some research into building Chrome Extensions, and I found some similar topics, but they don't test the text in the field and update the CSS dynamically.
I would absolutely love some help walking through this. Also, if you have a partial solution, I'm open to that as well. Thank you in advance for your time and help!
UPDATE: I've been asked to provide code samples, but that's the real crux of my problem is I A) don't know how to even begin approaching this, and B) my web searching is not showing any results for me to play with. To be clear, I'm not asking anyone to make this extension for me. I'm looking for help identifying a CSS class area on a site, checking the text within it, and then applying a CSS addition based on results. If you can help point me to the right resources, I'd be very grateful!

How to parse through a table to gather tide value at a certain time of day

I have been having some quiet days at work and schools out but I wanted to play around with javascript. I'm trying to figure out regular expressions and such. I may be starting out too complicated, I am not too sure.
How hard is it to parse through a table like so (http://gyazo.com/6dc7292f1113201fcc4fe8b5b9e79d7a) and gather the tides for each time of day? For example get the time of 01:45 and see the tide in m is 2.6.
I just want to know the basics of how to grab that variable. Of course tides change from day to day but for now I just want to practice on a static variable.
Thanks, and hopefully this makes sense! I am at the last 2 hours of my 10 hour work day lol!
That's not what Regular Expressions (shortened to Regex) is normally used for. Regex is to pattern match. like how to read a number if a user entered (808)854-3432 or 808-854-3442. I mean theoretically you could regex but it'd probably be 10000x more complicated then is worth it just to grab one table cell value. ideally you would want to grab the table body and then go through a tr and grab the td corresponding to the cell and parse the time. But looking at that sample table, you won't be having a lot of regular tables for "each time of day". It would go a long way to maybe show some work or what you formulated. I would also recommend code academy, khan academy or any other number of JS tutorials to start, if you haven't already.

Availability Calendar jQuery(?)

First of all I'm very thankful for any input. I'm not asking you to do this for me, I would just like to know your thoughts on the best way to approach this project. Please see the image below:
Apologies for it being in German, the important translations are as follows:
verfügbar = available
bereits reserviert = already reserved
Uhrzeit = time slot
aktuelle Woche = this week
and Mo, Di, Mi etc. are shortenings of the days of the week.
I'll quickly explain what it should do, because the picture doesn't really explain everything. It's basically displaying when "someone" is available throughout the day. The data would be pulled as JSON and displayed dynamically for each user and list two weeks. The week we're on, and the future week.
Anyway, I would literally just like to have your opinions on the best way of going about this. My initial thought was: Unix timestamps, find the time difference and convert that into pixels to use as a height for each div. But then it struck me that I wouldn't be able to find out where the div should start. (Maybe it starts at 10:00 like on the picture, how would I determine that)
I thought about doing this in canvas, however have very little experience of Canvas so I avoided that. Shout if you would recommend it though. I'm looking for the ideal solution.
Just to know what to learn would be a big help for me, and any input will be gratefully taken on board!
Thank you for your time,
Peter
Edit: Sorry I forgot to mention those things, thanks for pointing that out:
Reserved time data will also be pulled, the user can decide whether they are available or unavailable during that period of time. I'm not really sure how complicated it would be to have two bars on the same day. For example: unavailable from 06:00 to 12:00, but available from 12:00 to 18:00. So I'm avoiding that for the time being.
Time intervals are 15 mins. For each 15 mins 9px should/could be added to the height.
Thanks for your replies.
you could do it within a <table> and clever css styling... each <td> is 15 minutes and 9px height. the first and the last ones contain start / end time.
I had some similar requirements and solved it with tables and css after I checked out the demo of http://www.project-open.org/ where they used tables sometimes to display calendar / milestone data. Also, the Google Calendar uses tables: https://www.google.com/calendar/
This jquery-plugin might be worth looking at
https://github.com/themouette/jquery-week-calendar
looks like it uses a combination of table(s) and divs to do the layout

Custom Editors in an Ext.js Grid

So this is my first time posting here but I'm more or less stumped. Basically what I have is an ext grid that loads a bunch of data. Among these columns are all these date fields. Start, Finish, Etc. I'm trying to create a date picker to edit these columns. I've experimented with the different ext component editors and I was able to hack together something that mostly worked but what I would really prefer is a way to use my own custom date picker or even better a third party solution like the JQuery UI date picker.
Neither extending nor overriding the editor seemed to do the trick. I'm not so much looking for code but more whether this is even possible with ext and if so maybe to be pointed in the right direction. So has anyone ran into a similar problem? Thanks in advance.
It seems to me that it would be fairly straight forward to extend Ext.form.field.Picker and use the jQuery date picker as the picker part. I've wrapped the FCK editor in an Ext component and it was very easy to do. Picker involves a few more moving parts, but I think it's worth a try.
That being said, the idea of picking a few parts of ExtJS to use in a non-Ext app and then trying to marry other things into Ext is going to be painful. I strongly advise fully embracing ExtJS and then choosing very carefully where you stray away. Another approach might be to use a different grid system (sorry Evan) that plays nicer with jQuery.

Categories