Как добавить Datepicker в текстовое поле в настраиваемом диалоговом окне TinyMCE - PullRequest
Новая
       16

Как добавить Datepicker в текстовое поле в настраиваемом диалоговом окне TinyMCE

0 голосов
/ 08 мая 2019

У меня есть пользовательская кнопка, и когда я нажимаю, я получаю пользовательское диалоговое окно.пока там все хорошо, теперь мне нужен сборщик даты и времени в этом настраиваемом диалоге для этого текстового поля.я также не заинтересован в том, чтобы использовать jqueryUI bundle для просто datepicker, может кто-нибудь когда-нибудь дать мне лучшее решение для этого.

Вы можете попробовать эту скрипку 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.

1 Ответ

0 голосов
/ 27 мая 2019

Я мог бы сделать это, используя плагин выбора диапазона дат ниже 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.
...