TinyMCE EDITOR

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>

<input type="text" id="datepicker"></input>
<textarea rows="10" cols="40" id="editor"></textarea>

CSS

#datepicker {
    display: none;
}

JavaScript

$( document ).ready(function() {
    
tinymce.init({
    selector: "textarea",
        
    toolbar: "insertfile undo redo | styleselect | bold italic | datepicker",
    setup: function(editor) {
        editor.addButton('datepicker', {
            type: 'button',
            classes: 'MyCoolBtn', 
            text: 'Datepicker',
            tooltip : 'Pick a date',
            onClick: function(){
                $('#datepicker').datepicker('show'); 
            },
            //icon: true,
        });
    }    
});

$("#datepicker").datepicker({
    onSelect: function(dateText, inst){
        // insert into editor
        tinymce.activeEditor.execCommand('mceInsertContent', false, dateText);
    },
    
    beforeShow: function(input, inst){
        // change position
        // see http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control
       
        var $dpBtn = $(".mce-MyCoolBtn");
        var buttonPos = $dpBtn.position();
        
        inst.dpDiv.css({
            // cannot use top: and left: attrs here since they are hard-set inline anyway
            marginTop: buttonPos.top + $dpBtn.height() + 'px', 
            marginLeft: buttonPos.left + 'px'
        });
    }
});
    
});