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>
  <meta charset="utf-8">
  <title>Non-Overlapping Date Ranges</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Non-Overlapping Date Ranges</h1>
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
    <p>From: {{view App.DateField dateBinding="from"}} == {{from}}</p>
    <p>To: {{view App.DateField dateBinding="to"}} == {{to}}</p>
  </script>
​
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.6.1/ember.min.js"></script>
​
  <script>
    var App = Ember.Application.create();
​
    App.IndexController = Ember.Controller.extend({
      from: new Date('2014-01-01'),
      to: new Date('2014-01-07'),
      
      fromDidChange: function () {
        if (this.get('from') > this.get('to')) {
          this.set('from', this.get('to'));
        }
      }.observes('from'),
      
      toDidChange: function () {
        if (this.get('to') < this.get('from')) {
          this.set('to', this.get('from'));
        }
      }.observes('to')
    });
​
    // http://discuss.emberjs.com/t/example-building-a-date-input-field/674/6
    App.DateField = Ember.TextField.extend({
      type: 'date',
      hasFocus: false,
​
      init: function () {
        this._super();
        this.updateValue();
      },
​
      updateDate: function () {
        var ms = Date.parse(this.get('value'));
​
        if (ms) {
          this.set('date', new Date(ms));
        }
      }.observes('value'),
​
      updateValue: function () {
        var date;
​
        if (this.get('hasFocus')) {
          return;
        }
​
        date = this.get('date');
​
        if (date instanceof Date) {
          return this.set('value', date.toISOString().substring(0, 10));
        }
      }.observes('date'),
​
      focusIn: function () {
        this.set('hasFocus', true);
      },
​
      focusOut: function () {
        this.set('hasFocus', false);
        this.updateValue();
      }
    });
  </script>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers