Best Way to Code

Problem: I want to customize the JQuery datepicker (in this case, I want to add "Today" button) with minimum effort and keep all the existing JQuery behavior.

Solution: write JQuery plugin

1. Create afterShow event
2. Create your own datepicker function, and call the JQuery UI datepicker function
3. Create option that is exactly the same as JQuery Option

Create afterShow event

    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function (inst) {        
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }

Create datepicker function

   $.fn.MyDatePicker = function (optionObject) {
        var option = GetOption(optionObject);
        $(this).datepicker(
            {
                dateFormat: option.dateFormat,
                changeMonth: option.changeMonth,
                changeYear: option.changeYear,
                afterShow: function () {
                    if (option.showTodayButton) {
                        $("#ui-datepicker-div").append("<div><input type='button' id='butToday' value='Today' /></div>");
                        var textbox = $(this);
                        $("#butToday").click(function () {
                            textbox.val($.datepicker.formatDate(option.dateFormat, new Date()));
                            textbox.datepicker("hide");
                            textbox.blur();
                        });
                    }
                }
            }
        );

    };

copy options

    function default_options() {
        this.showTodayButton = false;
        this.dateFormat = "mm/dd/yy",
        this.changeYear = false,
        this.changeMonth = false
    } 

   function GetOption(option) {

        var opt = new default_options();
        if (option != null) {
            if (option.showTodayButton != null)
                opt.showTodayButton = option.showTodayButton;

            if (option.dateFormat != null)
                opt.dateFormat = option.dateFormat;

            if (option.changeMonth != null)
                opt.changeMonth = option.changeMonth;

            if (option.changeYear != null)
                opt.changeYear = option.changeYear;
        }
        return opt;
    }

----------------------------------------------------------

Complete Code

(function ($) {

    function default_options() {
        this.showTodayButton = false;
        this.dateFormat = "mm/dd/yy",
        this.changeYear = false,
        this.changeMonth = false
    }   

    function GetOption(option) {

        var opt = new default_options();
        if (option != null) {
            if (option.showTodayButton != null)
                opt.showTodayButton = option.showTodayButton;

            if (option.dateFormat != null)
                opt.dateFormat = option.dateFormat;

            if (option.changeMonth != null)
                opt.changeMonth = option.changeMonth;

            if (option.changeYear != null)
                opt.changeYear = option.changeYear;
        }
        return opt;
    }

    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function (inst) {        
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }

    $.fn.MyDatePicker = function (optionObject) {
        var option = GetOption(optionObject);
        $(this).datepicker(
            {
                dateFormat: option.dateFormat,
                changeMonth: option.changeMonth,
                changeYear: option.changeYear,
                afterShow: function () {
                    if (option.showTodayButton) {
                        $("#ui-datepicker-div").append("<div><input type='button' id='butToday' value='Today' /></div>");
                        var textbox = $(this);
                        $("#butToday").click(function () {
                            textbox.val($.datepicker.formatDate(option.dateFormat, new Date()));
                            textbox.datepicker("hide");
                            textbox.blur();
                        });
                    }
                }
            }
        );

    };
}(jQuery));


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <script src="Scripts/MyDatePicker.js"></script>    

    <script type="text/javascript">

        $(function () {
            $("#dtpTest").MyDatePicker({                
                changeYear: true,
                changeMonth:true
            });            
        });

        $(function () {
            $("#dtpTest2").MyDatePicker({
                showTodayButton: true                
            });
        });

    </script>
</head>
<body>
    <input type="text" id="dtpTest" />    
    <input type="text" id="dtpTest2" />    
</body>
</html>