@parsonsnguyen/react-month-picker
Version:
React month-picker Component
78 lines (75 loc) • 2.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Month Picker jQuery version</title>
<link rel="stylesheet" href="./month-filter.css" type="text/css" />
</head>
<body>
<div class="laGrid__row">
<div class="laGrid__col w100">
<span class="laForm__label labelMonthPicker">@labelMonthPicker</span>
</div>
<div class="laGrid__col w150">
<div class="monthPickerWrp laForm__field">
<div class="monthPicker">
<a
href="javascript:;"
id="btnPrevMonth"
class="prev"
title="Previous Month"
></a>
<span id="lblSelectedMonth" class="lblSelectedMonth">
@selectedDate.ToString("MMM yyyy")</span
>
<a
href="javascript:;"
id="btnNextMonth"
class="next"
title="Next Month"
></a>
</div>
<div class="monthPickerDropDown">
<ul class="monthPickerDropDownInner">
@DisplayMonthsYearsDropdown(selectedDate, minDate, maxDate)
</ul>
</div>
</div>
</div>
<div class="laGrid__col w80" @style_Dislay_for_day>
<label class="laForm__label" for="ddlFromDay">From</label>
</div>
<div class="laGrid__col w60" @style_Dislay_for_day>
<select id="ddlFromDay" class="laForm__field ddlFromDay">
@DisplayDaysInMonth(1, selectedDate, maxDate)
</select>
</div>
<div class="laGrid__col w60" @style_Dislay_for_day>
<label class="laForm__label" for="ddlToDay">To</label>
</div>
<div class="laGrid__col w60" @style_Dislay_for_day>
<select id="ddlToDay" class="laForm__field ddlToDay">
@DisplayDaysInMonth(DateTime.DaysInMonth(selectedDate.Year,
selectedDate.Month), selectedDate, maxDate)
</select>
</div>
<input type="hidden" id="hdfYear" value="2021" />
<input type="hidden" id="hdfMonth" value="9" />
<input type="hidden" id="MaxDate" value="2021-10-31" />
<input type="hidden" id="MinDate" value="2018-01-01" />
</div>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="./month-filter.js"></script>
<script src="./month-filter-example.js"></script>
</body>
</html>