0

I am just after a bit of advice really relating to the Flipclock.js plugin.

I have written the following code with a fair amount of assistance to make the clock countdown every day, which as far as I can tell is working well as I have struggled like mad to find solid documentation online for daily timers doing what I desire.

This is for a daily timer to showcase expiry time for a free delivery threshold of 1500 hours, however at weekends this would not be the case. Is it possible to use a conditional to check to see if the current day is Saturday or Sunday, and if so, increase the hours accordingly to display total hours/minutes until 1500 on the Monday?

My last concern is that I am grabbing information based on UST. The UK is currently 1 hour offset, but it won't always be. Is the only feasible solution to use an if only statement and offset the hour based on the dates of daylight saving time - or is there a smoother solution?

Thanks for your help

      var clock;
  
  // Check if it is a weekend or not
      var d = new Date();
      var n = d.getDay();
      if( n == 6 )
       var deadlineHour = 15, offset = 2;
      else if( n == 0)
        var deadlineHour = 15, offset = 1;
      else
        var deadlineHour = 15, offset = 0;

    $(document).ready(function() {

        // Grab the current date
        var currentDate = new Date();

        if(currentDate.getHours() >= deadlineHour) {
            offset = 1;
        }
      
        var opts = {
        clockFace: 'HourlyCounter',
        countdown: true,
        callbacks: {
            stop: function() {
                clock.setTime(24 * 60 * 60);
                clock.start();
            }
        }
    };
    opts.classes = {
        active: 'flip-clock-active',
        before: 'flip-clock-before',
        divider: 'flip-clock-divider',
        dot: 'flip-clock-dot',
        label: 'flip-clock-label',
        flip: 'flip',
        play: 'play',
        wrapper: 'flip-clock-small-wrapper',
    };  

        var futureDate = new Date(
            currentDate.getFullYear(), 
            currentDate.getMonth(), 
            currentDate.getDate() + offset, 
            deadlineHour
        );

        // 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, opts);

    });
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript' src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">
    
<br/><div class="clock"></div>
user4329628
  • 41
  • 1
  • 8
  • After having looking at this: http://stackoverflow.com/questions/3551795/how-to-determine-if-date-is-weekend-in-javascript I have amended the above, and I think it works well :) Any feedback would be greatly appreciated if I have missed something. This way it should offset 2 days at the weekend so the deadline becomes 1500 on Monday – user4329628 Jun 07 '16 at 11:40
  • Seeing as I had no input on this I have had to try to solve it myself. It's taken some time but I have the above code working now for anybody else trying to find a solution to this I have updated this so it's at least hopefully of some use to you. In short, I have added classes to style the clock as per API, altered the stop function for the new API and added offsets with a filter to target day 6 and 0 (Sat and Sun) and offset the timer on depending on these days. There is probably a better way but this is what I have come up with my little knowledge. Hope it helps somebody. – user4329628 Jun 09 '16 at 09:12

0 Answers0