JSFiddle - React, Tailwind, and code Playground
HTML
<button></button>
<input class="calendar"></input>
JavaScript
$(document).ready(function () {
$('button').button({
label: 'Open window',
})
.click(function() {
var p = window.open('', '_blank', 'width=400,height=300');
p.document.write(getPopupHtml());
p.document.close();
p.focus();
});
$('.calendar').datepicker({
dateFormat: 'yy-mm-dd',
showWeek: true,
changeMonth: true,
changeYear: true,
constrainInput: true,
showSecond: true
});
});
function getPopupHtml() {
return '<!DOCTYPE html><html><head>'
+ '<link type="text\/css" href="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.12\/themes\/redmond\/jquery-ui.css" rel="stylesheet" \/>'
+ '<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js"><\/script>'
+ '<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.9.2\/jquery-ui.min.js"><\/script>'
+ '<script type="text\/javascript">'
+ 'window.onload = function() {'
+ ' $("input").datepicker({'
+ ' dateFormat: "yy-mm-dd",'
+ ' showWeek: true,'
+ ' changeMonth: true,'
+ ' changeYear: true,'
+ ' constrainInput: true,'
+ ' showSecond: true'
+ ' });'
+ '};'
+ '<\/script>'
+ '<\/head><body>'
+ '<input></input>'
+ '<\/body><\/html>';
}