jQuery FlipClock TwentyFourHourClock show with full date - javascript

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.

Related

jquery datepicker defaultdate will not automatically set to next available date when graphical calendar is persistent on a page

The jquery datepicker defaultdate will not automatically set to next available date when the graphical calendar is persistent on a page. the initial date the calendar selects can be a date that i have disabled. Many suggestions on workaround work when the calendar is a popup to an input field, but do not work when the calendar is persistently shown as a div. doesn't matter if the dates disabled are by noWeekends, by the day of week, or individually set days, the initial date value can be a disabled and unclickable date. I am using the alternate1 input field (which i normally hide) to pass data onto a PHP page. What i have almost works, but the next available date shows as highlighted when minDate happens to land on an available date, but when minDate lands on an unselectible date, the highlight is hidden. The temporary fix i used of setDate null - clears the initial selection value regardless of the highlight, so a visitor may think the a date is already selected when it is not. My PHP page reports back to the visitor that they have to go back and actually select a date. My use of datepicker is geared toward mobile, so popup or flyout calendar to make use of well known workarounds is unfavorable, the calendar GUI needs to be persistent on the page. To recreate my issue for yourself, on the jsfiddle, comment out the last javascript line, disallow a date mid-week in the var selections, and then set the minDate so that it will land on the disallowed date. you'll notice the alternate1 input gets prefilled with the disallowed date.
html code:
<div id="dp1"></div>
<input type="text" id="alternate1" name="alternate1"/> <!-- style="display:none;" this is the field that passes on to php -->
javascript code:
var selections = [
"2017-07-29",
"2017-07-30",
"2017-08-05",
"2017-08-06",
"2017-08-12",
"2017-08-13",
"2017-08-19",
"2017-08-20",
"2017-08-26",
"2017-08-27",
"2017-09-02",
"2017-09-03",
"2017-09-04",
"2017-09-09",
"2017-09-10",
"2017-09-16",
"2017-09-17",
"2017-09-23",
"2017-09-24",
"2017-09-30",
"2017-10-01",
"2017-10-07",
"2017-10-08",
"2017-10-09",
"2017-10-14",
]
function bansingle(date) {
var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ selections.indexOf(excerpt) == -1 ]
}
// somehow combine this function later.
//function bandow(date) {
// var day = date.getDay();
// return [(day != 0 && day != 6)];
// }
$('#dp1').datepicker({
beforeShowDay: bansingle,
altField:'#alternate1',
altFormat: 'm-d-yy',
fielddateFormat: 'm-d-yy',
minDate: "+0d",
//maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value
Here is the jsfiddle it does contain more dates and a little CSS. I recommend opening it in a new tab, to be able to return to this page after editing code.
the progress of my other question here has negated the need for an answer to this question. pursuing multiple changes to input, styling, and options - will workaround this question's problem.

Angular UI bootstrap datepicker

I'm using Angular UI bootstrap's datepicker , and when I change programmatically the date the view doesn't change, when I'm in 30 Novembre and I programmatically change the date to 2 December, the date change but the view still fixed in November, here's how I code the next date button.
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt.setFullYear($scope.dt.getFullYear()+1);
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt.setMonth($scope.dt.getMonth()+1);
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt.setDate($scope.dt.getDate() + 1);
}
$scope.changedValue();
};
Html :
<uib-datepicker ng-model="dt" id="dp" datepicker-mode="mode" init-date="initDate" show-weeks=false max-mode="maxMode" min-date="minDate" max-date="maxDate" min-mode="minMode" class="well well-sm" ng-change="changedValue(viewmodel.dt)"></uib-datepicker>
how can I simulate a refresh view everytime I change the date programmatically on the datepicker ?
you need to convert again to date. The function set... only returns the timestamp:
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt = new Date($scope.dt.setFullYear($scope.dt.getFullYear()+1));
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt = new Date($scope.dt.setMonth($scope.dt.getMonth()+1));
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt = new Date($scope.dt.setDate($scope.dt.getDate() + 1));
}
$scope.changedValue();
};
To make your overall experince with angular dates better, you should look into moment .js
http://momentjs.com/
It allows you to create, format, add and subtract dates easily and with minimal issues. Using the default date.set functions can cause a lot of issues.
I have a set up like this using moments with no issues

Angular UI Bootstrap Datepicker - show specific date on Calendar open

I am using Angular UI Bootstrap dirrective for Datepicker. I have list of dates, that I set in calendar as active (i.e. other dates are disabled).
Here is my date list - ["10/16/2015", "11/20/2015", "12/18/2015"]
UI Datepicker always open current date/month. How can I make, so calendar would open on specific date, even if this date is from previous year?
I found option defaultViewDate option, but it seems that it doesn't work (at least I didn't find this method in tpl library)
Any ideas how I can make that?
Thanks!
Given Angular UI's documentation on its datepicker, the calendar adapts to a date set on the ng-model, so all you'd have to do is create a date:
new Date(year, month, day, hours, minutes, seconds, milliseconds);
See w3schools for more on that.
Set the model to that and you should be good to go. Let us know if it works.
EDIT:
To set the initial date when no date is specified, use init-date by creating a default date on the scope of the parent controller.
angular.module("yourModule").controller("parentCtrl", function($scope) {
$scope.initialDate = new Date(2000, 5, 4);
}
And the HTML:
<div ng-controller="parentCtrl">
<datepicker init-date="initialDate"></datepicker>
</div>
Hope it helps.

How to get hours and minutes selector in jQuery DateTimePicker control

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.

Customization months in jQuery UI datepicker

I need to customize each month in ui datepicker. This means that for each month will show a different background image. I think to do the next:
<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>
How can I get current month name and add it as a class to datepicker's container?
Greatly appreciate any help!
You can use the month number, e.g. .month1 - .month12 or .monthJanuary - .monthDecember (or some other format) for this...personally I'd stick with numbers for other cultures, but you can adapt this answer for both ways. Use the onChangeMonthYear event of the datepicker like this:
$('#datepicker').datepicker({
onChangeMonthYear: function(year, month, inst) {
//Month number (1-12) is month
//Month name you can get by $("#datepicker .ui-datepicker-month").text()
$(this).closest("div.calendar-container")
.removeClass().addClass("calendar-container month" + month);
}
});
And set it initially when the page loads (after creating the datepicker), since I'm using the month number in the above, it would look like this:
$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));
If you were using names instead, use:
$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());
Whichever option you go with, just create the 12 classes with the background images/styling you want. You can test it out here. If you wanted the background to actually be on the datepicker itself, not that .calendar-container <div> you'd just add that to the CSS selector to make it more specific, for example:
.month1 .ui-datepicker-inline { background: url(January.jpg); }
You can test out that version here.

Categories

Resources