Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I've been looking around for a decent jQuery plugin that can handle both dates and times. The core UI DatePicker is great, but unfortunately I need to be able to take time in as well.
I've found a few hacks for the DatePicker to work with times, but they all seem pretty inelegant and Google isn't turning up anything nice.
Is there a good jQuery plugin for selecting dates and times in a single UI control with a usable interface?
By far the nicest and simplest DateTime picker option is http://trentrichardson.com/examples/timepicker/.
It is an extension of the jQuery UI Datepicker so it will support the same themes as well it works very much the same way, similar syntax, etc. This should be packaged with the jQuery UI imo.
#David, thanks for the recommendation! #fluid_chelsea, I've just released Any+Time(TM) version 3.x which uses jQuery instead of Prototype and has a much-improved interface, so I hope it now meets your needs:
http://www.ama3.com/anytime/
Any problems, please let me know via the comment link on my website!
In my view, dates and times should be handled as two separate input boxes for it to be most usable and efficient for the user to input. Let the user input one thing at a time is a good principle, imho.
I use the core UI DatePicker, and the following time picker.
This one is inspired by the one Google Calendar uses:
jQuery timePicker:
examples: http://labs.perifer.se/timedatepicker/
project on github: https://github.com/perifer/timePicker
I found it to be the best among all of the alternatives. User can input fast, it looks clean, is simple, and allows user to input specific times down to the minute.
PS:
In my view: sliders (used by some alternative time pickers) take too many clicks and require mouse precision from the user (which makes input slower).
My best experience with a datepicker is with the prototype-based AnyTime. I know that's not jQuery, but it may still be worth the compromise for you. I know absolutely no prototype, and it's still easy enough to work with.
One caveat I've found: it is not forward compatible on some browsers. That is, it did not work with a newer version of prototype on Chrome.
Just to add to the info here, The Fluid Project has a nice wiki write-up overviewing a large number of date and/or time pickers here.
I researched this just recently and have yet to find a decent date picker that also includes a decent time picker. What I ended up using was eyecon's awesome DatePicker, with two simple dropdowns for time. I was tempted to use Timepickr.js though, looks like a really nice approach.
I have ran into that same problem. I actually developed my using server side programming, but I did a quick search to try and help you out and found this.
Seems alright, didn't look at the source too much, but seems to be purely JavaScript.
Take look:
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
Here is the demo page link:
http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm
good luck
This is some code I use to have a user select one
datetimepicker, set the datetime, and have the
other datetimepicker add One Minute to that time.
I needed this for a custom medication control....
Anyway, thought it might help someone else since I could
not find the answer any where online...
(at least not a complete answer)
Keep in mind that the 60000 added, adds one minute.
(60 * 1000 milliseconds)
$('.frdtPicker').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('.todtPicker');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate) {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
}
else {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
$('.frdtPicker').val(dateText); //endDateTextBox.val());
},
onSelect: function(selectedDateTime) {
var start = $(this).datetimepicker('getDate');
$('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});
Take a look at the following JavaScript plugin.
Javascript Calendar with date and time
I've made it to be simple as possible. but it still in its early days.
Let me know the feedback so I could improve it.
Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.
I just bound the click event to pop it up:
$(".arrival-date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
I make one function like this:
function getTime()
{
var date_obj = new Date();
var date_obj_hours = date_obj.getHours();
var date_obj_mins = date_obj.getMinutes();
var date_obj_second = date_obj.getSeconds();
var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
return date_obj_time;
}
Then I use the jQuery UI datepicker like this:
$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );
So, I get the value like this: 2010-10-31 12:41:57
We had trouble finding one that worked the way we wanted it to so I wrote one. I maintain the source and fix bugs as they arise plus provide free support.
http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx
Related
Good Morning everybody,
I am still working on a questionnaire for illiterate people. For that I am using a Text to Speech application (thanks to #JO3-W3B-D3V)
The Problem is that the questionnaire will be developped in several languages, which means, that the text to speech application has to support several languages as well.
SpeechSynthesis.getVoices()
If I understood it correctly, the function above returns a list of all objects representing all the available voices on the current device. Now to my questions:
Is there a way to return a selection of these languages? For example, the listshould not return all 15 languages which are available on the device, but only 4 chosen ones?
Is there a way to add more languages to the device? I am using Chrome. If I understood it correctly Chromes gets the languages from Microsoft and Google. Therefore Chrome should display new language-option if I add a new language to my operation system (Windows 10). Is that assupmtion correct? I am asking because I did that already and nothing changed, so I might be missing something.
Hope my questions make sense :)
Have a great day!
Explained
Okay, so I'll answer this in two parts, considering the fact that you've kinda asked two questions, both are relatively simple & straightforward thankfully.
Question One
You've asked how to get _ chosen languages that you'd like to support, well that's simple, it's as easy as manipulating an array, within my example I've used the reduce function, fairly straightforward stuff.
P.S. For the sake of some form of consistence, I've written this snippet in a very similar fashion to the one that I wrote in the other question that you asked regarding speechSynthesis.
Assumptions
As stated within the code comments, I've written this snippet in such a way that there's no duplicated entries, i.e. within the snippet below, you will end up with a list that only contains one entity that supports the English language. In other words, you won't have both en-GB & en-US, of course you can change this, I just assumed that you'd want this type of feature, of course this is down to you & your requirements entirely.
// IIFE for the sake of it.
(function() {
"use strict";
// This is a simple list of languages that you wish to support.
var supportedLanguages = ['en', 'de', 'es', 'fr'];
var languages = [];
// This is essentially similar to jQuery's $.ready.
var ready = function(callback) {
var d = document,
s = d.readyState;
// DOMContentLoaded was fired
if (s == "complete" || s == "loaded" || s == "interactive") {
callback();
} else {
if (d.addEventListener) {
d.addEventListener("DOMContentLoaded", callback, false);
} else {
d.attachEvent("onDOMContentLoaded", callback);
}
}
};
// This is just a simple function to process whether or not you'd like to
// push a voice onto the array or not.
var shouldPush = function(array, object) {
var language = object.lang || '';
var snipped = language.substring(0, 2);
// Generate a list of all of the known languages.
var languageList = array.map(function(object) {
return object.lang;
});
// Create a list of short hand language names.
var snippedList = languageList.map(function(language) {
return language.substring(0, 2);
});
// Save having a bloated if statement, personally I find this
// more readable.
//
// Only push relevant ones, saves having any duplicated entities, i.e.
// this will not allow for both en-US & en-GB to be among the list,
// this can be altered, this is merely based on an assumption that you
// wouldn't want both en-US & en-GB, etc.
var isToPush = !snippedList.includes(snipped) &&
!languageList.includes(language) &&
supportedLanguages.includes(snipped);
// If true, push to array.
if (isToPush) {
array.push(object);
}
// Then of course return the array object.
return array;
};
// This is essentially the list of voices that you've picked to support.
var getSelectedLanguages = function() {
languages = speechSynthesis.getVoices().reduce(shouldPush, []);
};
// A starting point for this snippet.
var start = function() {
speechSynthesis.onvoiceschanged = function() {
getSelectedLanguages();
console.log(languages);
};
};
// Run the code when ready.
ready(start);
})();
Question Two
I'm not entirely sure if there's a "clean & easy" way to do this, having conducted my own research on the matter I've found that it looks like this would require some form of tinkering. One of the better sources of information that I've found is this question.
Having further looked into this question, it looks like Artyom also suggests that there's no simple way to achieve this, it looks like you can only add a language by installing the language into the operating system, so I'm lead to believe.
Conclusion
One possible idea is that you could, and I emphasise the word could possibly do this via implementing an API of your own, however I can't imagine this would be a solid or reliable implementation, as my conclusion is based on research suggests in order for an additional language to be included, the user is somewhat responsible for that, as it looks like it needs the user to have _ language installed on their OS in order for speechSynthesis to make use of _ language.
I actually find it a little odd that it appears that there's little/no formal documentation on this subject, rather I've just found mostly informal documentation, suggestions and assumptions. This could however be down to my lack of investigation, bear in mind that I've spent ~15 minutes at most looking into this issue.
Sources
A link to flaviocopes.com regarding speechSynthesis.
A link to Artyom.js, a library for speech related APIs.
A link to a previous stack overflow question similar to the second part of this question.
A link to a medium article.
MDN documentation.
A treehouse blog post.
While I may not have the answer that you desire for your second question, I hope that this entire answer has helped in some form or another! :)
I'm coding a (free software) application (the MELT monitor, on GNU/Linux/Debian/x86-64) which embeds its specific web server.
See this question for gory details. If interested, look into commit 880419d370d749 on github then build it, run ./monimelt -Dweb,run -W localhost.localdomain:8086/ and open http://localhost.localdomain:8086/canvedit.html in your Firefox. FWIW I'm now trying to use canvases. Relevant code might go in my webroot/canvasedit.js, but I don't know what to code there yet...
Firefox is version 38 or 42. I don't understand all the details of ConsoleAPI.js which probably is very relevant to my question.
Let suppose I have a prototype
var fooproto = {
// perhaps adding a toString function is enough here?
// I want to show num & sons
};
then I make some objects using it:
var foo1 = Object();
foo1.num = 11;
foo1.__proto__ = fooproto;
var foo2 = Object();
foo2.num = 37;
foo2.sons = [foo1];
foo2.__proto__ = fooproto;
I would like
console.log("foo2=", foo2);
to show something like foo2=Foo#37[Foo#11] on the console (if possible with the italics)
Is there a way to change fooproto to make that work? I guess that some mechanism exist, since console.log is displaying nicely DOM objects.
It is probably a FAQ asked many times, but I was not able after several minutes of searching to find the appropriate search keywords. I don't know what terminology to use
I’m not developing for Firefox and apologies if you’ve already seen this, but I’ve stumbled across this:
Custom output in the Web Console on MDN, and specifically console API
Seems like something that might answer your needs.
In my app I have two date strings:
Say that they are:
date1 = "2014-03-14 18:25:15";
date2 = "2014-03-14 16:26:15";
I get these date strings based on two events that the customer selects. Now I need to show the difference between these two strings in HH:MM:DD format.
What I am currently doing is, posting to PHP using AJAX and then doing the calcuation in the server:
$rDate = new DateTime($date1);
$tDate = new DateTime($date2);
$interval = date_diff($rDate,$tDate);
echo $interval->format('%h:%i:%s');
Then in the AJAX response handler I print it to a div
My problem is that server trip is just too much an overkill for this. How can I achieve the same thing from browser itself? (Javascript/Jquery/MomentJS)...
Any help is greatly appreciated!
I'd suggest looking into Moment.js, which is a very well featured date handling library for Javascript.
Here's the relevant manual link for Moment.js for what you're wanting to do: http://momentjs.com/docs/#/displaying/difference/
Hope that helps.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I have a Visual Studio 2005 site which has been up a running for a while. I have an image (.JPG) on this site that I think I need to apply some JavaScript to or something?
Essentially I have 25 images for the month of December and instead of going into the site daily to change this image to another one I was hoping to be able to complete this by code automatically.
I have some .NET skills but I think that I might needs to use JavaScript to complete this task. Can anyone point me in the right direction or provide me with some sample code that could help?
I think the simplest way would be to rename all images to things like "December1.jpg", "December2.jpg", "December3.jpg" etc. Then server-side you would have this:
<img src="/path/to/images/December<%=DateTime.Now.Day%>.jpg"/>
This would just add the day of the month to your image name. There are fancier ways to do it, but for a one-time-deal, you can't get much simpler than this.
EDIT:
You might also throw in an "if exists" for your images so that on the 26th you don't end up with a 404 image. Something like this:
Change your image to add an id and default it to hidden:
<img id="dayImage" runat="server" Visibility="false" src="/path/to/images/December<%=DateTime.Now.Day%>.jpg"/>
Then on the code behind:
if (File.Exists(#"C:\path\to\images\December" + DateTime.Now.Day + ".jpg"))
{
//this will show the image if it exists on the disk
dayImage.Visibility = true;
}
For more on that go here: http://www.dotnetperls.com/file-exists
The way that I would do it, is to use server-side code, but I think it'll be simpler for everyone to show a JavaScript example. While there are several approaches one might take to accomplish what you're asking, one simple way to do this would be to store the urls to all of the image files as strings in an array, as such:
var urlPath = new Array();
urlPath[0] = "Leave Empty"; //Because there will never be a 0th day of any month...
urlPath[1] = "/Images/nameOfPic1.jpg";
urlPath[2] = "/Images/nameOfPic2.jpg";
urlPath[3] = "/Images/nameOfPic3.jpg";
Then cycle through them by grabbing the date:
var myDate = new Date();
Then get the path to the image based off of getDate():
var currentDate = myDate.getDate();
document.getElementById("imgElement").src=urlPath[currentDate];
Then (depending on how many pics you have for a given month) you can assign a new picture based on the numerical date. Of course, it would, using this example, make sense, to have an amount of pictures equal to the maximum days in a month (31) in order to call them as needed. This way will leave out certain pictures on certain months (months with less than 31 days, however). If you desire to simply cycle through them then do exactly as above, but add this instead of the last two statements (this example assumes you always have 25 pictures):
var currentDate = myDate.getDate();
if(currentDate > 25)
{
currentDate -= 25;
document.getElementById("imgElement").src=urlPath[currentDate];
}
else
{
document.getElementById("imgElement").src=urlPath[currentDate];
}
This isn't totally perfect, as the start of each new month will start the picture list over again, and some pics will be seen more than others. I'm not sure if there is a better way to do this or not, but it should get the job done if your clients aren't too picky. Again, though, I, personally, would use server-side code and set an application variable that is global (for everyone) and would handle this directly and remember the AppState variable (is it clear that I use WebMatrix (C#) yet?) regardless of client-side circumstances.
I hope this helps :)
I am trying to find a time picker widget, compatible with bootstrap styling. I really like the style of the jdewit widget, but it has a tremendous number of bugs. I am trying to finish this project quickly, so I don't want to get bogged down in fixing library bugs.
Can anyone else recommend a slick timepicker that is production ready?
I'm the author of the jdewit/timepicker.
I finally took some time to get through all the reported issues. Hope it meets your needs.
You could try our one https://github.com/Bloafer/bootstrap-timepicker
We are now using this one https://github.com/Eonasdan/bootstrap-datetimepicker as it is being actively developed
I tried to use https://github.com/Bloafer/bootstrap-timepicker, it didn't find it very helpful as it needed to have the time format as HH:MM, whereas mine were being supplied as HH:MM:SS. Also the styling is not the best.
This is also a problem for me, I have tried 4 timepickers and all of them have some kind of issue under bootstrap, I would like to see an answer to this as well
You could try this: https://github.com/jonataswalker/timepicker.js
I'm the author of this thing.
You'd use with something like this:
var timepicker = new TimePicker(['field1', 'field2'], {
theme: 'dark', // or 'blue-grey'
lang: 'pt' // 'en', 'pt' for now
});
timepicker.on('change', function(evt){
console.info(evt);
var value = (evt.hour || '00') + ':' + (evt.minute || '00');
evt.element.value = value;
});