#javascript #jquery #reactjs #datepicker
#javascript #jquery #reactjs #datepicker
Вопрос:
Я пытался преобразовать этот datepicker в простой html в react, но мне не повезло с этим. Ожидается, что я получу то, что я хочу, и у меня есть это в react, что я получаю. Я также прилагаю javscript, который используется с ним
/* Datepicker */
DatePicker();
function DatePicker() {
$(".awe-calendar:not(.from, .to)").datepicker({
prevText: '<i class="lotus-icon-left-arrow"></i>',
nextText: '<i class="lotus-icon-right-arrow"></i>',
buttonImageOnly: false
});
/* Datepicker from - to */
$(".awe-calendar.from").datepicker({
prevText: '<i class="lotus-icon-left-arrow"></i>',
nextText: '<i class="lotus-icon-right-arrow"></i>',
buttonImageOnly: false,
minDate: 0,
onClose: function (selectedDate) {
var newDate = new Date(selectedDate),
tomorrow = new Date(newDate.getTime() 24 * 60 * 60 * 1000),
nextDate = (tomorrow.getMonth() 1) '/' tomorrow.getDate() '/' tomorrow.getFullYear();
$(".awe-calendar.to").datepicker("option", "minDate", nextDate).focus();
}
});
$(".awe-calendar.to").datepicker({
prevText: '<i class="lotus-icon-left-arrow"></i>',
nextText: '<i class="lotus-icon-right-arrow"></i>',
buttonImageOnly: false,
minDate: 0,
onClose: function (selectedDate) {
//$(".awe-calendar.from").datepicker( "option", "maxDate", selectedDate );
}
});
}
И код react:
<section className="section-check-availability">
<div className="container">
<div className="check-availability">
<div className="row">
<div className="col-lg-3">
<h2>CHECK AVAILABILITY</h2>
</div>
<div className="col-lg-9">
<form id="ajax-form-search-room" action="search_step_2.php" method="post" noValidate="novalidate">
<div className="availability-form">
<div className="awe-calendar-wrapper"><input type="text" name="departure" className="awe-calendar to hasDatepicker valid" placeholder="Departure Date" /><i className="lotus-icon-calendar" /></div>
<div className="awe-calendar-wrapper"><input type="text" name="departure" className="awe-calendar to hasDatepicker valid" placeholder="Departure Date" /><i className="lotus-icon-calendar" /></div>
<select className="awe-select bs-select-hidden" name="adults">
<option>Adults</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div className="btn-group bootstrap-select awe-select"><button type="button" className="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Adults"><span className="filter-option pull-left">Adults</span>amp;nbsp;<span className="caret" /></button><div className="dropdown-menu open"><ul className="dropdown-menu inner" role="menu"><li data-original-index={0} className="selected"><a tabIndex={0} className style={{}} data-tokens="null"><span className="text">Adults</span><span className="glyphicon glyphicon-ok check-mark" /></a></li><li data-original-index={1}><a tabIndex={0} className style={{}} data-tokens="null"><span className="text">1</span><span className="glyphicon glyphicon-ok check-mark" /></a></li><li data-original-index={2}><a tabIndex={0} className style={{}} data-tokens="null"><span className="text">2</span><span className="glyphicon glyphicon-ok check-mark" /></a></li><li data-original-index={3}><a tabIndex={0} className style={{}} data-tokens="null"><span className="text">3</span><span className="glyphicon glyphicon-ok check-mark" /></a></li></ul></div></div>
<div className="vailability-submit">
<button className="awe-btn awe-btn-13">FIND THE BEST RATE</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Любая помощь будет высоко оценена