CODEWITHSUNDEEP
javascripthtmljquery-plugins
David Pine
David Pine

Reputation: 24525

XDSoft DateTimePicker -- Disable manual edit

I'm using the xdsoft datetimepicker jQuery plugin. It correctly prevents erroneous and manual entry, however; after a date has been selected and the input element is populated with a value -- you can edit the value. My question is, does anyone know of a way to prevent this behavior without the use of the readonly attribute as that prevents the datetimepicker from working altogether?

I have already tried the readonly attribute as well as binding to keypress events and .preventDefault() -- neither have worked.

Upvotes: 1

Views: 3061

Answers (1)

David Pine
David Pine

Reputation: 24525

Ok, so I figured out the issue. The API actually supports an onChangeDateTime function callback. You can handle this and when the input element loses focus you can ensure that the date is correct if the mindate attribute is supposed to be today.

I have the following in my angular directive:

            var ensureDate = (dp, input) => {
                var attr = element.attr("mindate");
                if (attr && attr == '0') {
                    var date = new Date();
                    date.setHours(0, 0, 0, 0);
                    var now = moment(date);
                    var val = moment(Date.parse(input.val()));

                    if (val.isBefore(now)) {
                        element.val(now.format("M/D/YYYY HH:mm"));
                    }
                }
            }

            if (type) {
                element.datetimepicker({
                    format: 'm/d/Y H:i',
                    formatDate: 'm/d/Y',
                    minDate: attributes.mindate,
                    maxDate: attributes.maxdate,
                    mask: '23:00',
                    defaultTime: '00:00',
                    id: attributes.id + '-picker',
                    onChangeDateTime: ensureDate
                });
            } else {
                element.datetimepicker({
                    timepicker: false,
                    format: 'm/d/Y',
                    formatDate: 'm/d/Y',
                    minDate: attributes.mindate,
                    maxDate: attributes.maxdate,
                    closeOnDateSelect: true,
                    id: attributes.id + '-picker',
                    onChangeDateTime: ensureDate
                });
            }

Upvotes: 1

Related Questions