oxjs/source/Ox.UI/js/Form/Ox.DateTimeInput.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.DateTimeInput <f:Ox.Element> DateTimeInput Element
    () ->              <f> DateTimeInput Element
    (options) ->       <f> DateTimeInput Element
    (options, self) -> <f> DateTimeInput Element
    options <o> Options object
        ampm <b|false> false is 24h true is am/pm
        format <s|short> options are short, medium, long
        seconds <b|false> show seconds
        value <d> defautls to now
        weekday <b|false> weekday
    self <o>    Shared private variable
    change <!> triggered on change of value
@*/

Ox.DateTimeInput = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                ampm: false,
                format: 'short',
                seconds: false,
                value: Ox.formatDate(new Date(), '%F %T'),
                weekday: false
            })
            .options(options || {});

    self.values = self.options.value.split(' ');
    //Ox.Log('Form', self.values)

    that = Ox.InputGroup({
            inputs: [
                Ox.DateInput({
                    format: self.options.format,
                    id: 'date',
                    value: self.values[0],
                    weekday: self.options.weekday
                }),
                Ox.TimeInput({
                    ampm: self.options.ampm,
                    id: 'time',
                    value: self.values[1],
                    seconds: self.options.seconds
                })
            ],
            separators: [
                {title: '', width: 8}
            ],
            value: self.options.value
        })
        .bindEvent('change', setValue);

    function setValue() {
        self.options.value = [
            self.options('inputs')[0].options('value'),
            self.options('inputs')[1].options('value')
        ].join(' ');
    }

    return that;

};