Add date picker support

[dosier]

This is a feature request for https://next.material-ui.com/components/date-picker/

Btw nice job with the lib, really enjoying it 👍

[cfnz]

Thanks for the comment :-)

I am not sure which way to go yet for date time picker. The link you reference is for the alpha version 5. The current version date time picker refers to the @material-ui/pickers library (i.e. another third party library). It looks like for the upcoming version 5, Material UI may be doing a picker component themselves, although it is still in the Lab in the version 5 alpha. So not sure on when that will be done.

As a side note, though not as nice as the above @material-ui/pickers, I have previously used a textField as a date field which uses the native browser/OS date picker... Something like the following (it has some UTC stuff in there which you might not need, and also looking at the allDayEvent param, you probably don't need that... I can't recall why I handle that differently :-)... it uses the Klock library for date and time functions):

fun RBuilder.dateField(label: String, initialDateTimeUtc: DateTime?, allDayEvent: Boolean = false,
                               onChange: (newDateMsUtc: DateTime) -> Unit) {
    val dateTimeUtc = initialDateTimeUtc ?: DateTime.now()
    val localDateTime = dateTimeUtc.local
    val time = TimeSpan((localDateTime.local.timePortionInMilliseconds()).toDouble())

    mTextField(label, if (allDayEvent) dateTimeUtc.format("yyyy-MM-dd") else localDateTime.format("yyyy-MM-dd")) {
        css(dateFieldStyle)
        attrs.type = "date"
        attrs.inputLabelProps = object : RProps { val shrink = true }
        attrs.onChange = { event ->
            // We want to convert to utc and add the time back
            val utcDateTime = PatternDateFormat("yyyy-MM-dd")
                .tryParse(event.targetInputValue)
                ?.plus(time)
                ?.minus(localDateTime.offset.time)
                ?.utc ?: DateTime.now()
            onChange(utcDateTime)
        }
    }
}

Then you can use it like this: dateField("Start Date", event.startDateTimeUtc, event.allDayEvent, onChange = { updateStartDate(it) })

[kileha3]

Kudos @cfnz , this lib is superb. We are currently using it on our project at UstadMobile. We really needed date pickers so I had to come up with a quick solution which can be found here The code might need some fine-tuning for production-ready but it works.

Don't forget to add dependencies on your Gradle file

implementation npm("moment","$version_npm_moment")
implementation npm("@date-io/moment","$version_npm_moment_io")
implementation npm("@material-ui/pickers","$version_npm_picker_ui")

Usage

  mDateTimePicker(
    label = textLabel,
    ruleSet = ruleSetRef,
    error = isError,
    helperText = textHelper,
    value = Date(),
    inputVariant = MFormControlVariant.outlined,
    pickerType = MDateTimePickerType.datetime,
    onChange = { mills, isUtc ->
        console.log(mills, isUtc)
    }
)

I'll be happy to work on a pull request if this is found useful. @dosier , @cfnz

[cfnz]

Thanks for that, yes, pull requests welcome.

I am also about to release a working branch on the wrapper for version 5 of Matarial UI (or MUI as it is now called). The convention is a bit different and it makes wrapping the components a bit easier, so I can look at moving this work to this branch and adjusting it to make it work.

Also, an interesting development, there is now a kotlin-mui wrapper listed under the kotlin wrappers github website... this is an automated build reading the typescript types and converting them to kotlin. Some areas are not as well typed as custom kotlin code like in Muirwik, but it does have all the components including "the lab" components which includes all the date and time pickers... just thought I would mention it.

[kileha3]

I'll try my best to put a PR together in a few days @cfnz

[kileha3]

Hi @cfnz , any plan to update your wrappers to the latest Kotlin wrapper versions.

[cfnz]

There is a MatarialUI-5 branch which will probably swap to become master at some point. It has later versions (though not the latest yet).