Блог

Я пытался преобразовать этот 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>
  

Любая помощь будет высоко оценена