javascript - Display Datetime picker on tiny mce plugin -

i using j-query tinymce plugin editor . going fine . need add custom button can insert date date picker . did

added button in toolbar . , working show dates in text area outside editor . want show datepicker below button . here current code .

setup: function(editor) {   editor.addbutton('datepicker', {     type: 'button',     class: 'mycoolbtn',     text: 'datepicker',     tooltip: 'pick date',     onclick: function() {       $('#datepicker').datepicker('show')     },     icon: true,   }); } 

here screenshot better understanding

here's solution:

$(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 date',          onclick: function() {            $('#datepicker').datepicker('show');          },          //icon: true,        });      }    });      $("#datepicker").datepicker({      onselect: function(datetext, inst) {        // insert 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: , left: attrs here since hard-set inline anyway          margintop: buttonpos.top + $dpbtn.height() + 'px',          marginleft: buttonpos.left + 'px'        });      }    });    });

#datepicker {    display: none;  }

<script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">    <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>

note usage of datepicker options beforeshow , onselect , check out comments.

just in case jsfiddle