Show/Hide Content Based On A Given Time Range - Timed-Content

Install & Download:

# NPM
$ npm i vue-timed-content --save

Description:

An easy-to-use component for timed content that enables you to show & hide web content based on a given time range.

How to use it:

1. Import the Timed-Content component.

import TimedContent from “vue-timed-content”;

2. Register the component.

export default {
  name: "App",
  components: {
    TimedContent
  },
  // ...
};

3. Add the timed content to your app and determine the start & end dates as follows:

<timed-content :from="from" :to="to">
  <p>This content can only be shown
    <br>
    between {{ from }} and {{ to }}
  </p>
  <p>Secrect content</p>
</timed-content>

export default {
  name: "App",
  components: {
    TimedContent
  },
  data() {
    return {
      from: "2019-01-14 01:23:11",
      to: "2020-12-25 14:12:11"
    };
  }
};

4. Timezone is supported as well.

<timed-content :from="from" :to="to" timezone="America/Santo_Domingo">
  <p>This content can only be shown
    <br>
    between {{ from }} and {{ to }}
  </p>
  <p>Secrect content</p>
</timed-content>

5. Events.