bennyxguo / vuejs-countdown-timer Goto Github PK

⏱ Vue 2 event countdown and timer component

Home Page: https://gh.bennyxguo.com/vuejs-countdown-timer/

License: MIT License

Vue 5.80% JavaScript 46.88% HTML 47.33%

vue2 vuejs2 vue-component countdown-timer event-countdown

vuejs-countdown-timer's Introduction

G'day, mate! 👋 I am Benny a professional web developer, who ❤️ to develop open source themes and applications. I have being a programmer for over 8 years, and have extensive experiences in both frontend and backend development.

✨ `Skills & Tools`

Frontend:
Backend:
Dev Tools:

📜 `Experiences`

Built a CMS system from ground up.
Built fully customized ERP system for B2B and ecommence-shop.
Built a Financial Risk Control System.
Built themes and website for companies.
Built Android and IOS APP with Ionic and Angular.
Lead a tech team of 20+ engineers.

🏆 `Achievements`

Built Obsidian.md theme recieved theme of the year for 2020.
Professional tech blogger on CSDN.
Star Blogger top 200 on CSDN in 2020.
Built Obsidian theme for Hexo recieved high feedback.

🔭 `Working on`

Hexo theme Aurora
Obsidian.md theme Obsidianite
Aurora UI Components - WIP
Hexo theme Obsidian
Side Projects
and other npm packages...

✍🏻 `My blogs`

BLOG | DEV.TO | CSDN | 掘金 | 知乎

💬 `Join my community`

vuejs-countdown-timer's People

Contributors

Stargazers

Watchers

Forkers

david-cahill diadal pamekar nneuid lanceden tetreault fransrudolfbanjarnahor vijayk2017 kushal-twopeople

vuejs-countdown-timer's Issues

end_callback function triggered on mounted.

So when you load the component, because of what TriDiamond stands on his pull request. (#7) the end_callback functionn will be triggered.

I fixed by adding another check at the end_callback function.
if(this.currentTime < this.endsAt) return;

methods: {
            yourCallBackFunction() {
                if(this.currentTime < this.endsAt) return;
               ....
            }
        },

Don`t work on Safari MacOS and Safari iOS

In the demo the timer works, but when I copy the example code and open it in Safari, the timer is not displayed.
Safari v12.1

show time without date

in this custom attributes i try to show only minute with second but i can't:

<vue-countdown-timer
    @start_callback="startCallBack('event started')"
    @end_callback="endCallBack('event ended')"
    :start-time="start_time"
    :end-time="end_time"
    :interval="1000"
    :minutes-txt="'minutes'"
    :seconds-txt="'seconds'">
</vue-countdown-timer>

output:

 00 : 00 : 59 minutes 09 seconds

it should be:

59 minutes 09 seconds

what is the time zone of this component?

I need to know what time zone this component use

Basic usage failing import

Please see following sandbox: https://codesandbox.io/s/happy-meninsky-jf73z?file=/src/main.js

For some reason, the import is failing and component is not usable.

Any suggestion?

Initialize timer on mounted or created hook to set starttime and endtime dynamically from ajax

The provided solution in documentation is no clean way to handle this issue.

watch remaining seconds

is there a way, to watch the remaining seconds?

I want to trigger class if remaining seconds below 5 minutes

this my components

<template>
  <vue-countdown-timer
    :start-time="startDate"
    :end-time="endDate"
    :interval="1000"
    :end-text="'Meet ended!'"
    @start_callback="startCallBack('event started')"
    @end_callback="endCallBack('event ended')"
  >
    <template slot="countdown" slot-scope="scope">
      <div class="text-white-80">
        <b-icon-clock-history></b-icon-clock-history> Durasi
        <span v-if="scope.props.days > 0" class="ct-num">{{ scope.props.days }}:</span
        ><span v-if="scope.props.hours > 0" class="ct-num">{{ scope.props.hours }}:</span
        ><span class="ct-num">{{ scope.props.minutes }}:</span><span class="ct-num">{{ scope.props.seconds }}</span>
      </div>
    </template>

    <template slot="end-text" slot-scope="scope">
      <span style="color: green">{{ scope.props.endText }}</span>
    </template>
  </vue-countdown-timer>
</template>

<script>
import { BIconClockHistory } from 'bootstrap-vue'
export default {
  name: 'Countdown',
  components: {
    BIconClockHistory,
  },
  props: {
    startDate: {
      type: String,
      required: true,
    },
    endDate: {
      type: String,
      required: true,
    },
  },
  methods: {
    startCallBack(x) {
      this.$emit('start', x)
    },
    endCallBack(x) {
      this.$emit('end', x)
    },
  },
}
</script>

<style>
.text-white-80 {
  color: rgba(255, 255, 255, 0.8) !important;
}
.ct-num {
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}
</style>

update show zero or update endtime

hello..

if i use showzero = false .. countdown not update after rebind end-time..
forexample :

show-zero : false.... 59 seconds...58 seconds...
set new end date to 2 minutes.. countdown not showing minutes label...

how can i do this ?
i hope you undestand me..


:day-txt="(scope.props.days == '01') ? 'Day' : 'Days'"
  :hour-txt="(scope.props.hours == '01') ? 'Hr' : 'Hrs'"
  :minutes-txt="(scope.props.minutes == '01') ? 'Min' :'Mins'"

getting did you register the component correctly? error

Unknown custom element: - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.

After installing the package i imported that into my app.js:

timer.vue file content:

<template>
    <vue-countdown-timer
        @start_callback="startCallBack('event started')"
        @end_callback="endCallBack('event ended')"
        :start-time="'2018-10-10 00:00:00'"
        :end-time="1481450115"
        :interval="1000"
        :start-label="'Until start:'"
        :end-label="'Until end:'"
        label-position="begin"
        :end-text="'Event ended!'"
        :day-txt="'days'"
        :hour-txt="'hours'"
        :minutes-txt="'minutes'"
        :seconds-txt="'seconds'">
    </vue-countdown-timer>
</template>

<script >
export default {
    name: 'Timer',
    methods: {
        startCallBack: function(x) {
            console.log(x);
        },
        endCallBack: function(x) {
            console.log(x);
        },
    },
};
</script>

app.js file content:

import Vue from 'vue'

import VueCountdownTimer from 'vuejs-countdown-timer';

Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)

import Timer from './components/partials/timer.vue'

new Vue({
    store,
    components: {
        Timer,
        //
    }, computed: {}, mount: {}
}).$mount('#app')

and after that i try to use into html template as:

<login inline-template>
    <div class="page-content">
        <div class="content-wrapper">
            ...
        </div>

        <Timer></Timer>

    </div>
</login>

my login.js content:

import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";

export default {
    data() {
        return {
            //
        }
    }
}

Removing day and hour display

How do i completely remove day and hour display

Currently i am having

            <vue-countdown-timer
                            v-if="!resend_active"
                            @start_callback="resend_active= false"
                            @end_callback="resend_active = true"
                            :start-time="new Date()"
                            :end-time="new Date().setMinutes(new Date().getMinutes()+2)"
                            :interval="1000"
                            :day-txt="null"
                            :hour-txt="null"
                            :minutes-txt="':'"
                            :seconds-txt="''"
                    >
                    </vue-countdown-timer>

I have tried seting them as null but they still display as 00 00

How to reset countdown on click

in my case i want to re-countdown at click without refresh the page

Template or render function not defined

I get this error:

"[Vue warn]: Failed to mount component: template or render function not defined."

Here is how I tried to use it.

<template>
  <vue-countdown-timer
    :start-time="'2018-10-10 00:00:00'"
    :end-time="1481450115"
    :interval="1000"
    :start-label="'Until start:'"
    :end-label="'Until end:'"
    label-position="begin"
    :end-text="'Event ended!'"
    :day-txt="'days'"
    :hour-txt="'hours'"
    :minutes-txt="'minutes'"
    :seconds-txt="'seconds'"
  >
  </vue-countdown-timer>
</template>
  
<script>
import VueCountdownTimer from 'vuejs-countdown-timer'

export default {
  components: {
    VueCountdownTimer
  },
  name: 'Timer'
}
</script>

time don't display on safari

not working on safari browser why

Set only minutes

I want to set only minutes. Is that possible? for example a timer for 15 min.

bennyxguo / vuejs-countdown-timer Goto Github PK

vuejs-countdown-timer's Introduction

✨ Skills & Tools

📜 Experiences

🏆 Achievements

🔭 Working on

✍🏻 My blogs

💬 Join my community