I have downloaded and tried the jQuery DatetimePicker control from http://plugins.jquery.com/datetimepicker/. This is v2.3.7.
And in the download there is an image attached here which shows the selectors on both hours and minutes. But I haven't been able to find anything in the documentation on how to achieve that. Could someone please point out how to achieve this?
$('#' + subgridid_complete).datetimepicker({
format: 'mm/dd/yy H:i',//'d.m.Y H:i',
//inline: true
mask:true,
});
This is what I get using the code above. Notice that the Hour and minute are not independently selectable.
Many thanks
No example on the page shows a freely choosable time. You can use 'step' to specify for example a 15 minute step in the time scroll-bar.
You can also switch to the trentrichardson.com/examples/timepicker (a jquery-ui-addon). Here, the Time can be chosen, like in that example: trentrichardson.com/examples/timepicker
If you want 15 minute intervals try:
step: 15,
From the documentation >> For time only
jQuery('#datetimepicker5').datetimepicker({
datepicker:false,
allowTimes:[
'12:00', '13:00', '15:00',
'17:00', '17:05', '17:20', '19:00', '20:00'
]
});
For datepicker with date and time use:
jQuery('#datetimepicker4').datetimepicker({
format:'d.m.Y H:i'
});
datetimepicker4 and datetimepicker5 are textbox id on which you want to open calendar
Have you seen this? http://xdsoft.net/jqplugins/datetimepicker/
This contains few examples on how to use the datetimepicker, and also use moment.js with this.
I tried that before, too. No example on the documenation page shows a freely choosable time.
So I switched to jquerUI-timepicker. Here, the Time can be freely chosen. Many examples are provided.
Related
So I'm using FullCalendar v4 library for reservation system, and I need to override DayHeader while using day-mode (timeGridDay or timeGridWeek with duration set to {days: 1}). Basically I have this sketch:
I want to get day-mode system (as I told) with week-based DayHeader (because I use days labels in my JavaScript code for day switching). I want just to display single day in calendar, with preserving header (header that displays 7 days).
I was trying to override header to duration: {days: 7}, copy header using jQuery .html() method, and then change duration to {days: 1} and paste header using .html() on the same div. But changing duration using method from GitHub destroy cells style alignment, so it does not display nicely as you were using duration: {days: 1} on Calendar init.
What can I do? Thanks in advance for solutions.
#EDIT:
I want to mention that the answer how to restyle FullCalendar (set automatically width for DayHeader cells (labels)) after changing durations is also adequate for me and fits into my wished solution - so if you have something in mind, tell me.
So, I resolved my problem by using this code:
if(view.viewSpec.type === 'customDayGrid'){
let views = calendar.getOption('views');
views.customDayGrid.duration.days = 1;
calendar.setOption('views', views);
}
setTimeout(() => {
$(headerSel).html(getHeaderHTML);
calendar.updateSize();
}, 100)
I wish I didn't used setTimeout but I don't know how to resolve it different way - but it works, so I think it closes my issue.
I'm working with jQuery FlipClock. Plugin is here
My question, is it possible to adding the full date together with time?
As my below code, it's only show me the time.
I just wondering if it's possible to show the full date and time.
Example,
var date = new Date();
clock = $('.clock2').FlipClock(date, {
clockFace: 'TwentyFourHourClock',
showSeconds: true
});
HTML
<div class="clock2"></div>
So the output will be, example: 25-JAN-2021 08:30:00
*It's for clock, not for counter.
There isn't a FlipClock.Face which shows date built in to the plugin. If you want to display the date, you'll need to write your own.
A good place to start is the Face you're currently using.
I have an input with a datepicker. It works properly, but when I insert a date before 01/01/100 it shows me 19xx.
For example, if I insert 01/01/0001 the calendar shows me 01/01/1901
I have read that I have to use yearRange in my script, but it doesn't work for me :(
<script type="text/javascript">
$( document ).ready(function() {
$("#fromDatePickerEnabled_input").datepicker({
yearRange: '1:9999'
});
});
</script>
How can I make that it shows me the year right?
It's already reported / discussed bug in the jQuery forums, since 2016, and unfortunately there aren't any fixes yet ...
In short: Looks like jQuery Datepicker doesn't work correctly with dates which years are less than 1000.
I tried passing different options to Datepicker (as changeYear, shortYearCutoff, yearRange), but no one fixes the problem. Even enabling changeYear: true and manually selecting the year, doesn't result in a correct Date.
It's an option to switch to bootstrap-datepicker, which doesn't have such problems with lower years.
Here you can play with it: bootstrap-datepicker playground
I'm trying to use materialize date picker (http://materializecss.com/forms.html). With that, I want to popup the date picker when I click on an icon. I have implemented two implementations where the only difference between the two is putting an alert('clicked') with the code.
without the alert('clicked'): http://jsfiddle.net/1bnnkhbw/
with the alert('clicked'): http://jsfiddle.net/1bnnkhbw/1/
The second one works while the first one doesn't.. (in chrome)!!!
Anybody knows the reason for this behavior?
And a way to make the 1st one work?
I think I found a solution for you man check this out:
<i id="icon">click</i>
<input class="datepicker" style="display:none;" value="click"></input>
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
$('#icon').click(function(event){
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
console.log("test1");
});
Fiddle: http://jsfiddle.net/k2qtzp7p/1/
Code taken from here and here
I have to use bootstrap-datepicker.js for my project but it doesn't work well with mask.
problem 1:
It you you are tabbing through fields it will auto populate the date field with today's date. Ideally it won't populate it at all.
Problem 2:
It's difficult to blank-out a the date field once it's populated.
first name: <input type="text">
birthdate: <input type="text" class="date">
city: <input type="text">
js:
$(function() {
$(".date").mask("99/99/9999");
$('.date').datepicker({
format: 'mm/dd/yyyy'
});
});
The problem is all originates from the fact that mask is populating the field with example format characters( "_ _ / _ _ / _ _ _ _" ) during focus and when the focus leaves datepicker is attempting to parse the example characters BEFORE mask has a chance to remove them. datepicker can't parse these special characters into a date therefore it is selecting today's date.
I think that if I can figure out a way to remove the example characters before bootstrap-datepicker attempts to parse them my problem would be fixed.
I would provide a jsfiddler example but I can't figure out how to add bootstrap-datepicker.js and jquery.maskedinput.js on their site.
Thanks for your help.
I stumbles across this option:
$('.date').datepicker({
format: 'mm/dd/yyyy',
forceParse: false
});
Surprising that force parse is true by default. darn bootstrap. Problem fixed.
Late answer but this was the only one that worked for me after deconstructing the sequence of events handled by both plugins (as of this date).
var $date = $('.date');
$date.datepicker({
format: 'mm/dd/yyyy'
});
$date.mask("99/99/9999");
$date.on('keyup', function(){
if ($date.val() == '__/__/____'){
// this only happens when a key is released and no valid value is in the field. Eg. when tabbing into the field, we'll make sure the datepicker plugin does not get '__/__/____' as a date value
$date.val('');
}
});
Long Explanation
Turns out that the datepicker plugin calls an update function on keyup, which in this case is the keyup event triggered when you release the TAB key. This update function calls a DPGlobal.parseDate() function that roughly behaves like this:
DPGlobal.parseDate(''); // returns new Date(); aka. now
DPGlobal.parseDate('10/10/1983'); // returns a Date instance that points to 10/10/1983
DPGlobal.parseDate('__/__/____'); // is generated by the maskedinput plugin and is interpreted as an ilegal date, so the datepicker goes back to the origin of unix time, 1970
This could easily be fixed by changing the parseDate function on the datepicker lib but this is a big no no if you want to keep your code maintainable. We are left then with a hackish way to intercept the foul value and correct it before maskedinput hands it over to the datepicker.
Hope it helps!
Try use other class name to datepicker and mix in your html
$(function() {
$(".date").mask("99/99/9999");
$('.date2').datepicker({
format: 'mm/dd/yyyy'
});
});
birthdate: <input type="text" class="date date2">