Question

首先，这是关于Eonasdan的Bootstrap-Datetimepicker插件的，该插件现在在我当前的项目中使用。

在我的项目中，我使用了两种类型的日期格式，即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);
    });
}

现在问题来了。

我想要它，以便当我将数据从后端传递到日期选择器时，它将根据用户选择的格式显示日期。从日期选择器获取值时，它将自动将日期转换为默认格式。我有以下两段代码，在整个项目中广泛使用，而编辑这两段代码将非常麻烦。

// 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

因为我不想编辑上述代码的每一行（有数十万行），所以我修改了原始jQuery的val（）方法来进行转换

(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);

但是在我完成上述操作之后，我注意到它实际上破坏了插件的setter和getter方法。当我使用类似val（'20 .12.2018'）的val（）将日期传递给选择器时，它显示的日期恰好为2018/12/20，但是当我尝试使用datepicker日历更改日期时，日期会变成一个完全不同的日期，例如2011/10/01或其他非原始日期。

我不确定该如何处理，并且我当然不想遍历仅与日期选择器相关的val（）代码的每一行。对于我来说，是否有更好的解决方案，可以将日期从defaultFormat转换为userFormat，反之亦然，而无需遍历数十万行，又无需破坏原始的Eonasdan datetimepicker库？

这是它的jsfiddle-https://jsfiddle.net/pk6gcm10/5/

为两种不同的日期格式修改bootstrap-datetimepicker

0 个答案: