<style>
/* Style for the calendar container */
#calendar {
margin-bottom: 20px; /* Adjust as needed */
}
/* Style for labels */
#calendar label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
/* Style for select boxes */
#calendar select {
width: 150px; /* Adjust width as needed */
padding: 8px;
margin-bottom: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* Style for the search button */
#calendar button {
padding: 10px 20px;
background-color: #007bff; /* Change color to your preference */
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* Hover effect for button */
#calendar button:hover {
background-color: #0056b3; /* Darker shade of primary color */
}
</style>
<div id="calendar">
<label for="month">Select a month:</label>
<select id="month">
<option value="1" />January
<option value="2" />February
<option value="3" />March
<option value="4" />April
<option value="5" />May
<option value="6" />June
<option value="7" />July
<option value="8" />August
<option value="9" />September
<option value="10" />October
<option value="11" />November
<option value="12" />December
</select>
<label for="year">Select a year:</label>
<select id="year">
<script>
var year = new Date().getFullYear();
for (var i = year - 5; i <= year + 5; i++) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
<button onclick="search()">Search</button>
</div>
<script>
function search() {
var month = document.getElementById('month').value;
var year = document.getElementById('year').value;
var searchUrl = '/search?updated-min=' + year + '-' + month + '-01T00:00:00Z&updated-max=' + year + '-' + month + '-31T23:59:59Z';
window.location.href = searchUrl;
}
</script>
Rate This Article
Thanks for reading: CALENDER SEARCH FOR BLOGSPOT, Sorry, my English is bad:)