Модификация bootstrap-datetimepicker для двух разных форматов даты - PullRequest
Новая
       18

Модификация bootstrap-datetimepicker для двух разных форматов даты

0 голосов
/ 31 января 2019

Для начала речь идет о плагине Eonasdan Bootstrap-Datetimepicker, который сейчас используется в моем текущем проекте.

В моем проекте я использовал 2 типа формата даты: defaultFormat и userFormat.userFormat используется для отображения даты в формате, который хочет пользователь.defaultFormat - это формат, который может принимать только серверная часть, и обычно это следующий формат.

DD.MM.YYYY

Выбор даты следующий: 

<div class="col-xs-4 padding-sides-none noborderleft">
    <div class='input-group date' id='datetimepicker' style="width:100%;" >
        <input type='text' id="date" name="date" class="form-control" data-date-format="DD.MM.YYYY" style="width:100%"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    <script type="text/javascript">
        $(function () {
            var datepicker = $('#datetimepicker').datetimepicker();
        });
    </script>
</div>

Формат даты-данных, который я контролировал, когда страница впервые загружалась с использованием следующего кода (да, я использую Lodash) 

function setDateFormat(){
    var datepickers = $('[data-date-format]'),
        dateFormat = *insert any user format here*;

    _.forEach(datepickers, function(picker){
        $(picker).attr('data-date-format', dateFormat);
    });
}

Теперь возникает проблема.

Я хочу, чтобы при передаче данных из бэкэнда в средство выбора даты она отображала дату в соответствии с выбранным пользователем форматом.А при получении значения из средства выбора даты оно автоматически преобразует дату в формат по умолчанию.У меня есть следующие 2 фрагмента кода, которые широко используются в проекте, и редактирование этих 2 будет полной болью.

// Assuming the date from backend is 20.12.2018, and user date format is YYYY/MM/DD
$(picker).val('20.12.2018') ==> // in picker, it will show as 2018/12/20
$(picker).val() ==> // it will get the date from picker as 20.12.2018, not 2018/12/20

Поскольку я не хочу редактировать каждую строку приведенного выше кода (их сотни тысяч), поэтому я изменил метод val () исходного jQuery, чтобы выполнить преобразование 

(function ($) {
    var original_val = jQuery.fn.val;
    jQuery.fn.val = function( value ) {
        var elem = this[0], val = undefined,
            standardDateFormat = 'DD.MM.YYYY',
            customDateFormat = /*Any user specific format in here*/;

        // *** Early exit when used as a getter
        if (!arguments.length) {
            if (elem){
                var elementVal = elem.value;
                if (elem.hasAttribute('data-date-format')){
                    if (elementVal === "Invalid date" || elementVal.trim() === ''){
                        return original_val.call(this);
                    } else {
                        return moment( original_val.call(this), customDateFormat ).format(standardDateFormat);
                    }
                } else {
                    return original_val.call(this);
                }
            } else {
                return original_val.call(this);
            }
        } else {
            // Set for value first, if its undefined
            val = value ? value : "";

            if (elem){
                // For any date input with data-date-format input on it
                if ( elem.hasAttribute('data-date-format') ){
                    return original_val.call(this, moment(val).format(customDateFormat));
                } else {
                    return original_val.call(this, val);
                }
            }
        }
    }

})(jQuery);

Но потом, после того, как я это сделал, я заметил, что это на самом деле нарушает методы установки и получения плагина.Когда я передаю дату сборщику, используя val (), например val ('20 .12.2018 '), он показывает дату точно так же, как 2018/12/20, но когда я пытаюсь изменить дату, используя календарь datepicker, датустановится совершенно другой датой, например 2011/10/01 или чем-то, что не является первоначальной датой.

Я не уверен, что с этим делать, и, конечно, я не хочу проходить каждую строку кода val (), относящуюся только к средству выбора даты.Есть ли для меня лучшее решение для преобразования даты из defaultFormat в userFormat и наоборот, без необходимости проходить сотни тысяч строк и без нарушения исходной библиотеки Eonasdan datetimepicker?

Вот jsfiddle для нее- https://jsfiddle.net/pk6gcm10/5/

...