Question

我写了一个这样的插件：

!function ($) {
var DateRangeBindInput = function(element, options)
{
    this.element = element;
    this.inputStartSelector = "";
    this.inputEndSelector = "";
    this.rangeOptions = "";
    this.containerElement = "";

    if (typeof options.inputStartSelector == "string")
    {
        this.inputStartSelector = options.inputStartSelector;
    }

    if (typeof options.inputEndSelector == "string")
    {
        this.inputEndSelector = options.inputEndSelector;
    }

    if (typeof options.rangeOptions == "object")
    {
        this.rangeOptions = options.rangeOptions;
    }

    if (typeof options.containerElement == "string")
    {
        this.containerElement = options.containerElement;
    }

    this.initiateData();
}

DateRangeBindInput.prototype = {
    constructor: DateRangePicker,
    initiateData: function(){
        for (var team in this.rangeOptions) {
            this.rangeOptions[team][0] = new Date(this.rangeOptions[team][0]);
            this.rangeOptions[team][1] = new Date(this.rangeOptions[team][1]);
        }
        $(this.containerElement).find(this.inputStartSelector).val(formatDateString(this.rangeOptions['Last 30 days'][0]));
        $(this.containerElement).find(this.inputEndSelector).val(formatDateString(this.rangeOptions['Last 30 days'][1]));
        var startDate = this.rangeOptions['Last 30 days'][0];
        var endDate = this.rangeOptions['Last 30 days'][1];
        $(this.element).daterangepicker({
                    ranges: this.rangeOptions,
                    opens: 'right',
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    startDate: startDate,
                    endDate: endDate,
                    showDropdowns: true,
                    locale: {
                        applyLabel: 'Apply',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom Range',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        firstDay: 1
                    },
                    showWeekNumbers: true,
                    dateLimit: false
                },
                function(start, end) {
                    var st_date = '';
                    if (start != null && end != null) {
                        st_date = start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY');
                        $(this.containerElement).find(this.inputStartSelector).val(start.format('MM/DD/YYYY'));
                        $(this.containerElement).find(this.inputEndSelector).val(end.format('MM/DD/YYYY'));
                    } else {
                        $(this.containerElement).find(this.inputStartSelector).val('');
                        $(this.containerElement).find(this.inputEndSelector).val('');
                    }
                    $(this.element).find("span").html(st_date);
                }
            );
    },
    getDateRange: function(){
        var objReturn = new Object();
        objReturn.startDate = $(this.containerElement).find(this.inputStartSelector).val();
        objReturn.endDate = $(this.containerElement).find(this.inputEndSelector).val();
        return objReturn;
    }
}

$.fn.daterangebindinput = function(options)
{
    this.each(function(){
        var el = $(this);
        if (!el.data('daterangebindinput'))
        {
            el.data('daterangebindinput', new DateRangeBindInput(el, options));
        }
    })
    return this;
}
}(window.jQuery);

然后我创建了一个实例：

$('#myDateRangeBindInput').daterangebindinput({
    inputStartSelector : "#startDate",
    inputEndSelector: "#endDate",   
    rangeOptions:{"Today":["10\/28\/2014","10\/28\/2014"],"Yesterday":["10\/27\/2014","10\/27\/2014"],"This week":["10\/27\/2014","10\/28\/2014"],"Last 7 days":["10\/22\/2014","10\/28\/2014"],"Last week (Mon - Sun)":["10\/20\/2014","10\/26\/2014"],"Last 14 days":["10\/15\/2014","10\/28\/2014"],"This month":["10\/01\/2014","10\/28\/2014"],"Last 30 days":["09\/27\/2014","10\/27\/2014"],"Last month":["09\/01\/2014","09\/30\/2014"]};,
    containerElement: "#myContainer"
});

如何调用函数getDateRange。基本上我可以这样做：

$("#myDateRangeBindInput").data('daterangebindinput').getDateRange();

但我看到它看起来很难看。还有另一种方法可以调用getDateRange函数。也许我可以在DateRangeBindInput类中编写更多函数。但我只想要以下内容：

 $("#myDateRangeBindInput").getDateRange();

感谢您的帮助。

Answer 1

我知道如何让它美丽：

$.fn.daterangebindinput = function(options)
{
    //Just add this code block
    if (typeof options == "string")
    {
        if (options == "getDateRange" && (typeof $(this).data('daterangebindinput') == "object"))
        {
            return $(this).data('daterangebindinput').getDateRange();
        }
        else return null;
    }
    else
    this.each(function(){
        var el = $(this);
        if (!el.data('daterangebindinput'))
        {
            el.data('daterangebindinput', new DateRangeBindInput(el, options));
        }
    })
    return this;
}

我只是打电话：

$('#myDateRangeBindInput').daterangebindinput('getDateRange');

（JQuery插件）如何调用函数？

1 个答案: