如何将日期选择器添加到自定义对话框 TinyMCE 上的文本框

Question

我有一个自定义按钮，当我点击时，我会看到一个自定义对话框。直到一切都很好，现在我需要在该文本框的自定义对话框旁边有一个日期时间选择器。我也没有兴趣使用 jqueryUI bundle for datepicker 可以给我一个更好的解决方案。

你可以试试这个fiddlehttps://jsfiddle.net/1qngde28/


var dialogConfig =  {
  title: 'Date Picker Missing',
  body: {
    type: 'panel',
    items: [
      {
        type: 'input',
        name: 'title',
        label: 'Enter Title'
      },
      {
        type: 'input',
        name: 'DateTime',
        label: 'Datetime DD/MM/YYYY'
      }
    ]
  },
  buttons: [
    {
      type: 'cancel',
      name: 'closeButton',
      text: 'Cancel'
    },
    {
      type: 'submit',
      name: 'submitButton',
      text: 'Insert',
      primary: true
    }
  ],
  initialData: {
    title: '',
    DateTime: ''
  },
  onSubmit: function (api) {
    var data = api.getData();


    tinymce.activeEditor.execCommand('mceInsertContent', false, '<p>My ' + data.title +' at: <strong>' + data.DateTime + '</strong></p>');
    api.close();
  }
};

tinymce.init({
  selector: 'textarea.petMachine',
  toolbar: 'dialog-example-btn',
  setup: function (editor) {
    editor.ui.registry.addButton('dialog-example-btn', {
      text:'[Insert]',
      onAction: function () {
        editor.windowManager.open(dialogConfig)
      }
    })
  }
});

`````````````````````````

Date Picker on DateTime Text box.

Thanks in Advance.

Answer 1

我可以使用下面的日期范围选择器插件来做到这一点 URL http://www.daterangepicker.com/

下面是代码

//at Items /component declartion for form
{
   type: 'htmlpanel',
   html: '<input type="text" id="datepickerstart" class=" datepicker tox-textfield" readonly="readonly"></p>',
}


//at function

function _onAction() {

/* dialogue code here ..... */


                //Calling date picker
                $('.datepicker').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    timePicker: true,
                    startDate: moment().startOf('hour')

                }, function (start, end, label) {
                    //alert($("#datepickerstart").val());
                });             
            }


//at calling function of dialogue
editor.ui.registry.addMenuItem('xxxxxx', {
                text: 'xxxxxx',
                context: 'insert',
                onAction: _onAction
            });


// Include js and css of datepicker at where editor is been used which will automatically recognize the daterangepicker function.

如何将日期选择器添加到自定义对话框 TinyMCE 上的文本框

how to add Datepicker to a text box on custom dialogue box TinyMCE

tinymce

tinymce-plugins