JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<script src="http://www.exmoor-nationalpark.gov.uk/__data/asset_types/calendar_event/js/date_chooser.js"></script>
<div class="date"><label>*Date and time - (please note 12hour clock)</label> 

		<!-- start -->
		<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 1ex">
			<tbody><tr>
				<td class="sq-backend-data" style="vertical-align: bottom; white-space: nowrap">&nbsp;Occurs on&nbsp;
							<input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_start_day" id="calendar_event_single_0_start_day" size="2" value="24" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);">

		<select class="sq-form-field" name="calendar_event_single_0_start_month" id="calendar_event_single_0_start_month" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);">
				<option value="1">Jan</option>
		<option value="2">Feb</option>
		<option value="3">Mar</option>
		<option value="4">Apr</option>
		<option value="5">May</option>
		<option value="6">Jun</option>
		<option value="7">Jul</option>
		<option value="8">Aug</option>
		<option value="9">Sep</option>
		<option selected="selected" value="10">Oct</option>
		<option value="11">Nov</option>
		<option value="12">Dec</option>
		</select>

		<input class="sq-form-field" type="text" name="calendar_event_single_0_start_year" id="calendar_event_single_0_start_year" size="5" value="2014" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);">
						</td>
				<td class="sq-backend-data" style="white-space: nowrap">
					&nbsp;&nbsp;		<input class="sq-form-field" type="checkbox" value="1"...

JavaScript

setupDay(['single', 'recurring']);

function setupDay(types) {
          
    for (var i = 0; i < types.length; i++) {
        var type = types[i];
        var monthStart = $('#calendar_event_'+type+'_0_start_month').val();
        var yearStart = $('#calendar_event_'+type+'_0_start_year').val();
        var monthEnd = $('#calendar_event_'+type+'_0_end_month').val();
        var yearEnd = $('#calendar_event_'+type+'_0_end_year').val();
        var daysStart = daysInMonth(monthStart, yearStart);
        var daysEnd = daysInMonth(monthEnd, yearEnd);
        selectForDaysInMonth(daysStart, true, 'start', type);
        selectForDaysInMonth(daysEnd, true, 'end', type);
        eventChange('start', type);
        eventChange('end', type);
    }
    
}

function selectForDaysInMonth(days, today, startEnd, type) {
    $('#zss_event_day_'+startEnd+'_'+type).remove();
    var sel = $('<select id="zss_event_day_'+startEnd+'_'+type+'">').insertAfter('#calendar_event_'+type+'_0_'+startEnd+'_day');
    for (i = 0; i < days; i++) {
        var val = i+1;
        sel.append($("<option>").attr('value',val).text(val));
    }
    if (today) {
        var d = new Date().getDate()+1;
        $('#zss_event_day_'+startEnd+'_'+type).val(d);
    }
    eventChange(startEnd, type);
}

// Binds an events to the select field
function eventChange(startEnd, type) {
    //$('#calendar_event_'+type+'_0_'+startEnd+'_day').hide();
    $('#zss_event_day_'+startEnd+'_'+type).change(function() {
       $('#calendar_event_'+type+'_0_'+startEnd+'_day').val($(this).val());
    });
    $('#calendar_event_'+type+'_0_'+startEnd+'_month').change(function() {
        var month = $(this).val();
        var year = $('#calendar_event_'+type+'_0_'+startEnd+'_year').val();
        var days = daysInMonth(month, year);
        selectForDaysInMonth(days, false, startEnd, type);
        $('#calendar_event_'+type+'_0_'+startEnd+'_day').blur();
    });
   ...