Datetime picker with full date (DDD MMM) on one single column

Question

I would like to create a Datetime picker with the following format: I guess I will have to create a custom list with associated values but don't know how to use it in the view within the Datetime picker.

Any clue ?

Answer 1

You can use this plugin - skwas-cordova-plugin-datetimepicker (also see npm link).

Quick Example -

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

var myDate = new Date(); // From model.

cordova.plugins.DateTimePicker.show({
    mode: "datetime", //you want to pick date and time both from spinner
    date: myDate,
    allowOldDates: true,
    allowFutureDates: true,
    minuteInterval: 15,
    locale: "EN",
    okText: "Select",
    cancelText: "Cancel",
    android: {
        theme: 16974126, // Theme_DeviceDefault_Dialog
        calendar: false,
        is24HourView: true
    },
    success: function(newDate) {
        // Handle new date.
        console.info(newDate);
        myDate = newDate;
    },
    cancel: function() {
        console.info("Cancelled");
    },
    error: function (err) {
        // Handle error.
        console.error(err);
    }
});
}

On Lollipop and upwards the date and time pickers changed to calendar and radial pickers. If you want to use spinners (for example to use minuteInterval), choose a theme that shows a date and time picker with spinners, like Theme_DeviceDefault_Light, Theme_Holo_Dialog or the traditional theme.

Then you can set the Theme to a suitable constant int value from here to change the radial default view into spinner view.