I'm working on a website were I'd like to use a countdown to a special event. I've now installed the flipclock.js script and it's up and working. But, it generates incorrect date formats, like attached image:
As you can see, the days, minutes and seconds are working as expected, but the "hour" is showing 93. I've used the following code to implement the flipclock.js:
var date = new Date(2018, 11, 8, 12, 0, 0);
var now = new Date();
var diff = (date.getTime() - now.getTime()) / 1000;
console.log(date);
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(diff);
clock.setCountdown(true);
clock.start();
Does anyone know why it's doing like this? I haven't changed anything in the
Just in case someone is still looking for the solution... Here's the content of the link that NoLifeKing refers to in the comments section.
It looks like this issue occurs if you do the following:
clock = $('.clock').FlipClock({
'autoStart': false,
'clockFace': 'DailyCounter',
'countdown': true,
});
clock.setTime(diff);
clock.start();
as opposed to what is done below:
clock = $('.clock').FlipClock(diff, {
'autoStart': true,
'clockFace': 'DailyCounter',
'countdown': true,
});
Related
I am facing some issue with a jQuery plugin which I have used in my project to show countdown. Locally it is working fine but when I deploy it on Netlify others things works except the countdown. I am giving the code for your better understanding.
(Note: It is a basic index file & I have used the plugin by downloading.)
Index.html
<!-- Countdown attachments-->
<link rel="stylesheet" href="Assets/flipclock.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Assets/flipclock.min.js"></script>
<!-- ------ -->
<div class="clock"></div>
<script>
var clock;
$(document).ready(function () {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 1, 0); /* yyyy,mm,dd formate*/
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
</script>
It looks like this:
click here
But it should look like this:
click here
I am using (jquery-simple-datetimepicker) for a small restaurant application. the restaurant timing is from 6 am to 12 am. My issue is the time interval starts from 00:00 to 23:30 in the dropdown but, it should show the time interval of 1 hour.
for example, if the current time is 10 am the interval should start from after 6 hours that is 4:00, 5:00 till 12:00 am. and if the time is 7: pm or after then it should show time for next day that is 6:00,7:00 till 12: am.
will I able to achieve in this plugin or do you prefer any other customizable plugins?
here is my code
$('#datetimepicker2').appendDtpicker({
todayButton: true,
step: 60,
closeOnSelected: true,
minuteInterval: 30,
onSelect: function() {},
onInit: function(handler) {
var picker = handler.getPicker();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Date-Time-Picke-Plugin-Simple-Datetimepicker/jquery.simple-dtpicker.js"></script>
<link type="text/css" href="https://www.jqueryscript.net/demo/jQuery-Date-Time-Picke-Plugin-Simple-Datetimepicker/jquery.simple-dtpicker.css" rel="stylesheet">
<input type="text" name="date9" id="datetimepicker2">
can anyone help me out, please?
Try minuteInterval 60?
$('#datetimepicker2').appendDtpicker({
todayButton: true,
step: 60,
closeOnSelected: true,
minuteInterval: 60,
minTime: "06:00",
maxTime: "23:59",
onSelect: function() {},
onInit: function(handler) {
var picker = handler.getPicker();
}
});
I have a countdown until marvel movies have their premier and would like to have a button "Book Tickets" that is unclickable when counting down, and then make it clickable when the countdown has reached 0. How do I do that?
I have tried to make if-statements, but something is wrong.
var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
clockFace: 'DailyCounter',
countdown: true
});
You can see the countdown I currently have on: http://www.student.city.ac.uk/~aczc972/
The callback seems to work well with alerts, even though the alert comes at second 1 and not 0, although I just need to find a way of changing the behaviour of the button.
This is the new code
var clock = $('.clock3').FlipClock(new Date("April 10, 2019 12:27:00"), {
clockFace: 'DailyCounter',
countdown: true,
callbacks: {
stop: function() {
alert("Hello! I am an alert box!!");
}
}
});
It's hard to figure what code to put in for your button since there isn't one available on your website. Here's a potential solution: http://jsfiddle.net/kdyzxLbt/
var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
clockFace: 'DailyCounter',
countdown: true
});
setTimeout(function(){
checktime();
}, 1000);
function checktime(){
t = clock.getTime();
if(t<=0){
$('#myBtn').removeAttr('disabled');
}
setTimeout(function(){
checktime();
}, 1000);
}
Basically it starts your clock and checks the time every second. If the time is less than or equal to 0 it enables your button.
Source: Countdown flipclock and reset after counting to zero
why don't you bind a click handler on clock2 flip-clock-wrapper and then simply exit the function if the current datetime is less than July 5, 2019 ?
$('#clock2').off().on('click', function () { your code here } )
or maybe just had a normal button and do the same logic in the click handler ?
I am using the flip clock and I set the countdown which is working but when 'I refresh the page, it starts from initial.
For example, I set 25 days yesterday. If I refresh the browser then it should display 24 today but when I refresh the browser then it again starts from 25.
Would you help me in this?
Jquery plugin link http://flipclockjs.com/
var clock;
$(document).ready(function() {
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(2.16e+6);
clock.setCountdown(true);
clock.start();
});
<link href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
I checked on the internet and there was an SO Question answering this. Basically you need to calculate the time difference between the current and future dates and supply it to the function, refer the below code.
Please refer to the link below for the original answer.
SO Answer
var clock;
$(document).ready(function() {
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
var future = new Date(Date.UTC(2017, 10, 17, 5, 15, 0));
var current = new Date();
var difference = future.getTime() / 1000 - current.getTime() / 1000;
clock.setTime(difference);
clock.setCountdown(true);
clock.start();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
I can't make FlipClock.js work. I want to, for example, make a 10 days countdown.
I made this fiddle but the flipclock doesn't appear - http://jsfiddle.net/9hYef/
Html:
<html>
<head>
<link rel="stylesheet" href="/assets/css/flipclock.css">
</head>
<body>
<div class="your-clock"></div>
<script src="/assets/js/libs/jquery.js"></script>
<script src="/assets/js/flipclock/flipclock.min.js"></script>
</body>
</html>
JavaScript:
var clock = $('.your-clock').FlipClock({
clock.setCountdown(true);
clock.setTime(3600);
clock.setCountdown(true);
});
Try getting the current date and compare with the desired date:
var huh = new Date(Date.UTC(2014, 9, 17, 5, 15, 0));
var duh = new Date();
var wha = huh.getTime()/1000 - duh.getTime()/1000;
var clock = $('.clock').FlipClip(wha, { // <-- DID YOU MEAN FlipClock
clockFace: 'DailyCounter',
countdown: true
});
Flipclock() takes various options, but you'll need to make it a json array
var clock = $('.clock').FlipClock({
countdown: true
});
What they don't mention very well is that the first parameter can be the start offset, like so
var clock = $('.clock').FlipClock(3600*24*10, {
countdown: true
});
You can find more working example of this in the faces section of the docs - http://flipclockjs.com/faces
Here is a working JSFiddle http://jsfiddle.net/bensjones/swjo7wjt
How I made this work is by using the references section (on the left) rather than putting it in the code areas. This will often confuse the issue and, many times, JSFiddle itself.