JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css" />
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/8968">jQuery UI #8968</a> - In IE8 the month dropdown cannot be changed in the opened window.</p>

<button>Open New Window</button>
<input>

CSS

body { padding: 20px; }
p { margin-top: 0; line-height: 1.4; }

JavaScript

$('button').on('click', function() {
	var p = window.open('', '_blank');
	p.document.write(getPopupHtml());
	p.document.close();
    p.focus();
});

//The month can be changed fine on this datepicker.
$('input').datepicker({ changeMonth: true });

function getPopupHtml() {
  return '<!DOCTYPE html>'
	+ '<html>'
   	+ '<head>'
  	+ '<link href="http:\/\/code.jquery.com\/ui\/jquery-ui-git.css" rel="stylesheet" \/>'
  	+ '<script src="http:\/\/code.jquery.com\/jquery.js"><\/script>'
	+ '<script src="http:\/\/code.jquery.com\/ui\/jquery-ui-git.js"><\/script>'
	+ '</head>'
    + '<script>'
    + 	'window.onload = function() { $("input").datepicker({ changeMonth: true }); };'
    + '<\/script>'
	+ '<body><input><\/body>'
	+ '<\/html>';
}