How to add date picker to textbox on custom dialog TinyMCE
Ramesh Babu
I have a custom button and when i click it i get a custom dialog. Everything was fine until there, now I need a datetime picker next to the custom dialog for that textbox. I'm also not interested in using jqueryUI package just for datepicker can give me a better solution.
You can try this fiddle 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.
Ramesh Babu
I can do this using the date range picker plugin at the following URL http://www.daterangepicker.com/
This is the following code
//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.