pickatime

[sakulstra]

There's no usable input type for the daytime :/, would be nice to have sth. integrated like 'pickatime'... as type='time' isn't supported by firefox, yet.

Additionally there is a bug with input type='time' using autoform-materialize. The label isn't going away when typing sth.

[kovacss]

+1

[elie222]

+1

[ericvrp]

Is it really not possible to use a combined datetime picker? A pickaday without time is not often very useful. I kept looking and looking because I fear I might overlook some option/setting.

[mordka]

I encountered the same problem so I worked on a solution which consists of 2 fields - date and time If you have a look at time picker here: http://amsul.ca/pickadate.js/time/ you can notice it can be represented as a select item. So our time property can be a select populated by handcrafted array of time strings:

    time: {
        type: String,
        label: 'Hour',
        autoform: {
            options: function () {
                return getTimesArr().map(function (entry) {
                    return {label: entry, value: entry};
                });
            },
            firstOption: 'Pick a time!'
        }
    },
//get array of times in 24h format
function getTimesArr() {
    var timeArr = [];
    for (var hour = 0; hour < 24; ++hour) {
        ['00', '30'].forEach(function (minutes) {
            var time = hour + ':' + minutes;
            timeArr.push(time)
        });
    }
    return timeArr
}

On update/insert store date and time in Date() object, we can use autoValue on date property e.g.:

    dateEvent: {
        type: Date,
        label: 'Date of the event',
        autoValue: function() {
            if (this.isSet) {
                var date = new Date(this.value);
                var time = this.field('time').value;
                return mergeDateTime(date, time);
            }
        },
        autoform: {
            type: 'pickadate',
            pickadateOptions: {
                format: 'd mmmm, yyyy',
                formatSubmit: 'yyyy-mm-dd'
            }
        }
    },
function mergeDateTime(date, time) {
    var hour = time.split(':')[0];
    var minutes = time.split(':')[1];
    date.setHours(hour);
    date.setMinutes(minutes);
    return date
}

[mozfet]

I will be needing a similar input as this in a commercial project I'm working on right now, and will add such a input to the project. Keep watching this space.

[djhi]

Future work on this package has been transferred here.