Advertisement
juliarnasution

form tanggal lahir vue moment

Dec 10th, 2019
234
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  3. <html>
  4. <head>
  5.     <title>Latihan Moment JS dan Vue Js</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <form>
  10.         <p>form input tanggal lahir</p>
  11.         <input type="date" name="datebirth" v-model="datebirth" v-on:change="handle_age">
  12.         Usia anda : {{handle_age()}} tahun
  13.         <br>
  14.         <span v-if="error_fields">{{error_fields}}</span>
  15.     </form>
  16.     </div>
  17. </body>
  18. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19. <script src="./libs/moment.js"></script>
  20. <script src="./libs/moment-with-locales.js"></script>
  21.     <script>
  22.         const app = new Vue({
  23.             el:"#app",
  24.             data : {
  25.                 datebirth : ``,
  26.                 error_fields : ``,
  27.             },
  28.             methods :{
  29.                 handle_age() {
  30.                     // this.tanggal_lahir;
  31.                     let birthday = moment(this.datebirth);
  32.                     let date_now = moment(moment().format('YYYY-MM-DD'))
  33.                     const current_age = date_now.diff(birthday, 'years');
  34.  
  35.                     if (current_age > 27) {//usia mkasimal 27 tahun
  36.                         this.error_fields = "Maaf usia anda terlalu tua, batas usia maksimal adalah 27";
  37.                     } else if (current_age < 15) {//usia minimal 15 tahun
  38.                        this.error_fields = "Maaf usia anda terlalu muda, batas usia minimal adalah 15";
  39.                    } else {
  40.                        this.error_fields = ``;
  41.                    }                    
  42.                    return (isNaN(current_age))?0:current_age;
  43.                },
  44.            }
  45.        });
  46.    </script>
  47. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement