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...
Related
I was thinking of having some double arrows that allow year scrolling similar to the month scrolling ones. Other ideas on how to reach the main goals are more than welcome.
GitHub link:
https://github.com/Hacker0x01/react-datepicker
You can look this example. You need to pass showMonthDropdown and showYearDropdown for the DatePicker to display select dropdowns for year and month.
do you want something like this.
just add this code to your react calendar :
dateFormatCalendar="YYYY"
For picking a date and time I use a datetimepicker (bootstrap-datetime-picker).
The widget allows showing date and time "side-by-side".
It all works great and picking is no problem.
But, the time part of the widget uses arrows to increment/decrement hours and minutes. These arrow buttons are hidden and only show when you hover over the area the arrow button is.
I tried to search the CSS for the "hover" setting, so I can change the behavior of it. I want it to show all the time, not only if hovered over.
Any ideas where and how to change these settings?
you can try:
.timepicker .glyphicon-chevron-up{ background-color: #eee; }
If you mean that DateTimePicker,
inspect the code of page, in console type
var picker = $('.bootstrap-datetimepicker-widget');
$(picker).appendTo('body')
Explore the code of datetime picker element at the bottom of the page
I am using demo sample located https://jsfiddle.net/OlegKi/90qmjean/3/
Some reason datepicker is not rendering? also i need to set dateformat to
ISO8601Long:"Y-m-d H:i:s"
But with original date formatter shows selected date as 'Y-3-14 H:i:s'
see the screenshot for details:enter image description here
The problem, which you described in comments above, is the following: you are wonder why the Bootstrap datetimepicker, used in the demo http://jsfiddle.net/OlegKi/duooa5oy/1/, don't close the calendar window after choosing the date.
First of all, I want to stress, that it's the default behavior of the Bootstrap datetime picker. You can try any demo on the page http://eonasdan.github.io/bootstrap-datetimepicker/ to verify that. The reason of the behavior is easy to understand. The datetimepicker allows to change the time and not only the date. The corresponding control contains 4 buttons, which increase/decrease the time via click on the buttons. I marked the buttons on the picture below:
Thus, what you probably want is closing of the datetimepicker if the date (and not the time) is changed. One can implement the requirements by adding the following lines in the demo:
$(el).bind("dp.change", function (e) {
if (e.date.dayOfYear() !== e.oldDate.dayOfYear()) {
$(this).data("DateTimePicker").hide();
}
});
See the modified date http://jsfiddle.net/OlegKi/duooa5oy/7/
It looks like when i updated boostrap-datepicker to latest version, it worked.
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.
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