Question

我有一个自定义按钮，当我单击时，我会得到一个自定义对话框。直到一切都好为止，现在我需要一个用于该文本框的自定义对话框的日期时间选择器。我也对使用datequery的jqueryUI包不感兴趣，可以一次为我提供更好的解决方案。

您可以尝试使用这种小提琴https://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

我可以使用以下网址中的日期范围选择器插件来完成此操作 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.

如何将Datepicker添加到自定义对话框TinyMCE上的文本框中

1 个答案: