Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
</head>
​
<body>
​
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <label>Date</label>
        <input type="text" class="form-control" v-input-mask mask="99/99/9999" v-model="date">
        <p>{{ date | myDate 'dd/mm/yyyy' }}</p>
      </div>
    </div>
  </div>
​
  <hr>
​
  <div class="container">
    <pre>{{ $data | json }}</pre>
  </div>
​
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
</body>
​
</html>
 
Vue.directive('input-mask', {    
  params: ['mask'],
  
  bind: function () {   
    $(this.el).inputmask({
      mask: this.params.mask
    });
    
  },
});
​
Vue.filter('my-date', function(value, formatString) {
​
    if(value !== undefined)
        return '';
​
    if(formatString !== undefined)
        return moment(value).format(formatString);
​
    return moment(value).format('DD/MM/YYYY');
​
});
​
var vm = new Vue({
  el: 'body',
  data: {
    date: '2015-06-26',
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gustavobissollipro
0viewers