I want to have a datetime picker with default value (Date.now) but I am restricted javascript only (no jquery).
I managed to pull it off with a hack, is there a better way to do this?
HTML
<input type="text" id="inputDate">
Javascript
var dateField = document.getElementById("inputDate");
var date = new Date();
dateField.setAttribute("type", "datetime-local");
dateField.setAttribute("value", date.toISOString().slice(0, 19));
I wonder if this works in all browsers, only tried it in Chrome.
Here you have a link that may be helpful for you. It shows you the browsers that accept the inputs with type "date".
http://caniuse.com/#feat=input-datetime
In order to make it more "crossbrowser", you should consider to use jQuery-UI datepicker (http://jqueryui.com/datepicker/). It is really easy to use.
The new input types to HTML5 are new, which makes them very restrictive and hard to use. They are hard to manipulate, style and customize.
I would use an html simple textbox with a "man-made" down arrow that you can click and populate your calendar (or whatever you would like to show). This can all be done with simple javascript and textBox.
I have a calendar datepicker pure javascript which I use over and over again because I can make it do whatever I would like it to do.
Related
All,
I'm sure this is simple to do, but I've been banging my head against the wall for awhile and still don't ahve the answer. I have a SharePoint form that has two People Picker objects on them, and I'd like to get the value for both of them.
Using JQuery, I can do $("textarea[title='People Picker']").val(), but that only gives me the value for the first control.
Is there a way to do something in JQuery like (using C# pseudo-code)
HTMLTags.Where(a => a.Type=="dr").Where(a => A.SubString("<nobr>Name of my People Picker") != null).Select(a => a.textarea.title="People Picker").First().val().
Basically, what I am trying to do in jQuery is get all DR elements, look for any elements that contain the Name of my People Picker text, and then go through the text of this datarow until I find the People Picker text area and then return that value.
Thanks.
EDIT: I'll add that while I know my way around C#, I'm still pretty new to js and jquery.
EDIT: Using SharePoint 2007. Supposed to upgrade to SharePoint 2010 by early next year.
This for first textarea
$("textarea[title='People Picker']:first").val();
This for last textarea
$("textarea[title='People Picker']:last").val();
This for second textarea
$("textarea[title='People Picker']:eq(1)").val();
This for third textarea
$("textarea[title='People Picker']:eq(2)").val();
etc
I am using jquery-1.11.0 and jquery-ui datepicker to achieve a dropdown datepick on my textfield.
However, for Thailand, there is something call the Buddhist year which adds 543 to our current phyiscal year. How can I achieve this with the jquery datepicker? I have tried the follow sites but due to different jquery version, it seems to have a weird behaviour.
https://code.google.com/p/jquery-ui-datepicker-extension-buddhist-era/
http://www.anassirk.com/articles/1
http://keith-wood.name/calendarsPickerRef.html
What you describe is fairly trivial with leveraging the datepicker's yearSuffix option, which allows you to insert unescaped html. Something like:
In stylesheet:
.ui-datepicker-year { display:none; }
In onChangeMonthYear:
inst.settings.yearSuffix = year + 543;
See jsfiddle here
Disclaimer: At some point someone will probably realize what a terrible idea it is to append unescaped html to your widget's titlebar, and this will become unusable. Should be fine for 1.11.0/1.10.4.
Disclaimer2: I know absolutely nothing about Buddhist years. This simply changes the visible year to year+543. It handles absolutely no corner cases
So I have to collect a date and time from the user. I want to be able to set both from a single picker. I found this nice one by curious solutions here. Our site uses jQuery, jQuery mobile, and Knockout. When I use the datepicker to select the date my knockout binded variable is not updating, even though the value of the input box has changed. If I use jQuery to get the value it shows up just fine.
So my question: Can someone help me figure out how to get my knockout binding to update?
I've already tried setting the valueUpdate to input, and afterkeydown with no luck.
Here is a link to a fiddle I made that demonstrates the problem: http://jsfiddle.net/TrueEddie/eg6zM/
In the plugin, when the value of the element is set it needs to trigger the change event.
Something like:
_setValueOfElement: function(sElemValue)
{
var dtPickerObj = this;
var $oElem = $(dtPickerObj.dataObject.oInputElement);
if(dtPickerObj._compare($oElem.prop("tagName"), "INPUT"))
$oElem.val(sElemValue);
else
$oElem.html(sElemValue);
//ADDED THIS LINE
$oElem.change();
return sElemValue;
},
The plugin doesn't seem to have any eventing built-in, so doesn't look like there is a good way to react to the value being set otherwise.
I dont want to use HTML drop down for AM PM time picker in 12 hours format...can any one give me LInk regarding this.I want Jquery/Javascript/CSS based AM PM picker
Here is a solution that does what you want, though tbthorpe is right, it might be good to make the two spans I use into radio buttons, and style those so they work the same as my solution.
http://jsfiddle.net/csaltyj/PPQQ8/
What you could do is, have radio buttons with a class on it, and use jQuery to hide those and replace them with the clickable spans which actually trigger the radio button clicks. Probably a better solution for accessibility.
Here's a more robust time picker than just AM/PM - it's a jQuery plugin. Presumably, you could pare down the js/css and have it just let you pick am or pm.
http://fgelinas.com/code/timepicker/
I found this trying to find a decent time picker which supports US AM/PM style and doesn't use a drop down. The best tool for me was anytime. http://www.ama3.com/anytime/
example code (assuming you have loaded jQuery and the AnyTime script)
$("#field2").AnyTime_picker( {
format: "%h:%i %p",
labelTitle: "Time",
labelHour: "Hour",
labelMinute: "Minute"
} );
supporting html
<input type="text" id="field2" value="" readonly="">
Example fiddle:
http://jsfiddle.net/brianlmerritt/Lzn7fnnw/2/
And it looks like this...
Greetings
I have extended my admin add screen (tabularinline) by using the http://www.djangosnippets.org/snippets/1594/
Now I have a field in my model:
start = models.CharField(max_length=5)
this is intended as a special time format, it will be in a HH:MM format such as 16:30 . Now I want to implement a way that site auto assigns ":" between those numbers and for that I have found this jquery application: http://digitalbush.com/projects/masked-input-plugin/
When I check my admin add panel by firebug, I see that the field that I want to implement this masking function is:
<input id="id_outage_set-0-start" class="vTextField" type="text" maxlength="5" name="outage_set-0-start"/>
where "id_outage_set-0-start" is increased each time I add new.
Now I am looking for a way to implement these 2 together, I am a jquery newbie thus really lost at it.
Regards
This should apply the mask plugin to all inputs with an id that begins with id_outage_set. Is that what you are after?
jQuery(function($){
$("input[id*='id_outage_set']").mask("99/99/9999",{placeholder:" "});
});
A good approach would be to define your own Widget, whose HTML rendering applies the JQuery mask.
Stuart Langridge gives some infos on how to change a field widget in the Admin interface : http://www.kryogenix.org/days/2008/03/28/overriding-a-single-field-in-the-django-admin-using-newforms-admin
That would be a good idea to package this into a small django app.