Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <html>
- <head>
- <title>Latihan Moment JS dan Vue Js</title>
- </head>
- <body>
- <div id="app">
- <form>
- <p>form input tanggal lahir</p>
- <input type="date" name="datebirth" v-model="datebirth" v-on:change="handle_age">
- Usia anda : {{handle_age()}} tahun
- <br>
- <span v-if="error_fields">{{error_fields}}</span>
- </form>
- </div>
- </body>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script src="./libs/moment.js"></script>
- <script src="./libs/moment-with-locales.js"></script>
- <script>
- const app = new Vue({
- el:"#app",
- data : {
- datebirth : ``,
- error_fields : ``,
- },
- methods :{
- handle_age() {
- // this.tanggal_lahir;
- let birthday = moment(this.datebirth);
- let date_now = moment(moment().format('YYYY-MM-DD'))
- const current_age = date_now.diff(birthday, 'years');
- if (current_age > 27) {//usia mkasimal 27 tahun
- this.error_fields = "Maaf usia anda terlalu tua, batas usia maksimal adalah 27";
- } else if (current_age < 15) {//usia minimal 15 tahun
- this.error_fields = "Maaf usia anda terlalu muda, batas usia minimal adalah 15";
- } else {
- this.error_fields = ``;
- }
- return (isNaN(current_age))?0:current_age;
- },
- }
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement