Skip to content

Instantly share code, notes, and snippets.

@there4
Forked from philfreo/gist:3877368
Created April 10, 2013 16:53

Revisions

  1. @philfreo philfreo revised this gist Oct 18, 2012. 1 changed file with 24 additions and 5 deletions.
    29 changes: 24 additions & 5 deletions gistfile1.js
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    // like 'Select' editor, but will always return a boolean (true or false)
    editors.BooleanSelect = editors.Select.extend({
    initialize: function(options) {
    @@ -75,6 +74,13 @@
    maxTime: this.options.schema.maxTime
    });
    return this;
    },

    setValue: function(value) {
    if (!value) value = '';
    this.value = value;
    var ret = editors.Text.prototype.setValue.apply(this, arguments);
    return ret;
    }
    });

    @@ -110,21 +116,33 @@
    var timeOptions = _(options).clone();
    timeOptions.schema = _(this.schema).clone();
    timeOptions.schema.editorAttrs.placeholder = 'Any time';
    timeOptions.model = null;
    this.timeEditor = new this.options.TimeEditor(timeOptions);
    this.timeEditor.$el.removeAttr('name');

    this.$hidden = $('<input>', { type: 'hidden', name: options.key });

    this.value = this.dateEditor.value;
    this.setValue(this.value);
    },

    getValue: function() {
    return this.$hidden.val();
    },

    parseTimeValue: function(value) {
    return time;
    },

    setValue: function(value) {
    this.dateEditor.setValue(value);
    this.timeEditor.setValue(value);
    // pull the time portion of an ISO formatted string
    var time = '';
    if (_.isString(value) && value.indexOf('T') !== -1) {
    var m = moment(value);
    time = m ? m.format('h:mma') : '';
    }
    this.timeEditor.setValue(time);
    },

    updateHidden: function() {
    @@ -133,12 +151,12 @@
    // if no time was chosen, include only the date
    var date = moment(this.dateEditor.getValue());
    var time = this.timeEditor.getValue() ? this.timeEditor.$el.timepicker('getTime') : null;
    if (time) {
    if (date && time) {
    date.hours(time.getHours());
    date.minutes(time.getMinutes());
    }
    var value = date.format();
    if (!time) {
    var value = date ? date.format() : '';
    if (value && !time) {
    value = value.substr(0, value.indexOf('T'));
    }
    this.$hidden.val(value);
    @@ -149,6 +167,7 @@

    this.$el.append(this.dateEditor.render().el);
    this.$el.append(this.timeEditor.render().el);
    this.updateHidden();
    this.$el.append(this.$hidden);
    return this;
    }
  2. @philfreo philfreo created this gist Oct 12, 2012.
    185 changes: 185 additions & 0 deletions gistfile1.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,185 @@

    // like 'Select' editor, but will always return a boolean (true or false)
    editors.BooleanSelect = editors.Select.extend({
    initialize: function(options) {
    options.schema.options = [
    { val: '1', label: 'Yes' },
    { val: '', label: 'No' }
    ];
    editors.Select.prototype.initialize.call(this, options);
    },
    getValue: function() {
    return !!editors.Select.prototype.getValue.call(this);
    },
    setValue: function(value) {
    value = value ? '1' : '';
    editors.Select.prototype.setValue.call(this, value);
    }
    });

    // like the 'Select' editor, except will always return a number (int or float)
    editors.NumberSelect = editors.Select.extend({
    getValue: function() {
    return parseFloat(editors.Select.prototype.getValue.call(this));
    },
    setValue: function(value) {
    editors.Select.prototype.setValue.call(this, parseFloat(value));
    }
    });

    // https://github.com/eternicode/bootstrap-datepicker/
    editors.DatePicker = editors.Text.extend({
    initialize: function(options) {
    editors.Text.prototype.initialize.call(this, options);
    this.$el.addClass('datepicker-input');
    },

    getValue: function() {
    var value = this.$el.val();
    if (value) {
    return moment(value, 'MM/DD/YYYY').format();
    } else {
    return '';
    }
    },

    setValue: function(value) {
    if (value) {
    var formatted = moment(value).utc().format('MM/DD/YYYY');
    this.$el.val(formatted);
    } else {
    this.$el.val('');
    }
    },

    render: function() {
    editors.Text.prototype.render.apply(this, arguments);
    this.$el.datepicker({
    autoclose: true
    });
    return this;
    }
    });

    // https://github.com/jonthornton/jquery-timepicker
    editors.TimePicker = editors.Text.extend({
    initialize: function(options) {
    editors.Text.prototype.initialize.call(this, options);
    this.$el.addClass('timepicker-input');
    },

    render: function() {
    editors.Text.prototype.render.apply(this, arguments);
    this.$el.timepicker({
    minTime: this.options.schema.minTime,
    maxTime: this.options.schema.maxTime
    });
    return this;
    }
    });

    // Show both a date and time field
    // https://github.com/eternicode/bootstrap-datepicker/
    // https://github.com/jonthornton/jquery-timepicker
    editors.DateTimePicker = editors.Base.extend({
    events: {
    'changeDate': 'updateHidden',
    'changeTime': 'updateHidden',
    'input input': 'updateHidden' // so that clearing time works
    },
    initialize: function(options) {
    options = options || {};
    editors.Base.prototype.initialize.call(this, options);

    // Option defaults
    this.options = _.extend({
    DateEditor: editors.DatePicker,
    TimeEditor: editors.TimePicker
    }, options);

    // Schema defaults
    this.schema = _.extend({
    minsInterval: 15,
    minTime: '4:00am',
    maxTime: '11:00pm'
    }, options.schema || {});

    this.dateEditor = new this.options.DateEditor(options);
    this.dateEditor.$el.removeAttr('name');

    var timeOptions = _(options).clone();
    timeOptions.schema = _(this.schema).clone();
    timeOptions.schema.editorAttrs.placeholder = 'Any time';
    this.timeEditor = new this.options.TimeEditor(timeOptions);
    this.timeEditor.$el.removeAttr('name');

    this.$hidden = $('<input>', { type: 'hidden', name: options.key });

    this.value = this.dateEditor.value;
    },

    getValue: function() {
    return this.$hidden.val();
    },

    setValue: function(value) {
    this.dateEditor.setValue(value);
    this.timeEditor.setValue(value);
    },

    updateHidden: function() {
    // update the hidden input with the value we want the server to see
    // if a date and time were chosen, include ISO formatted datetime with TZ offset
    // if no time was chosen, include only the date
    var date = moment(this.dateEditor.getValue());
    var time = this.timeEditor.getValue() ? this.timeEditor.$el.timepicker('getTime') : null;
    if (time) {
    date.hours(time.getHours());
    date.minutes(time.getMinutes());
    }
    var value = date.format();
    if (!time) {
    value = value.substr(0, value.indexOf('T'));
    }
    this.$hidden.val(value);
    },

    render: function() {
    editors.Base.prototype.render.apply(this, arguments);

    this.$el.append(this.dateEditor.render().el);
    this.$el.append(this.timeEditor.render().el);
    this.$el.append(this.$hidden);
    return this;
    }
    });

    editors.Range = editors.Text.extend({
    events: _.extend({}, editors.Text.prototype.events, {
    'change': function(event) {
    this.trigger('change', this);
    }
    }),

    initialize: function(options) {
    editors.Text.prototype.initialize.call(this, options);

    this.$el.attr('type', 'range');

    if (this.schema.appendToLabel) {
    this.updateLabel();
    this.on('change', this.updateLabel, this);
    }
    },
    getValue: function() {
    var val = editors.Text.prototype.getValue.call(this);
    return parseInt(val, 10);
    },

    updateLabel: function() {
    _(_(function() {
    var $label = this.$el.parents('.bbf-field').find('label');
    $label.text(this.schema.title + ': ' + this.getValue() + (this.schema.valueSuffix || ''));
    }).bind(this)).defer();
    }
    });