{"id":9,"date":"2026-06-16T09:19:36","date_gmt":"2026-06-16T09:19:36","guid":{"rendered":"https:\/\/demo.mybooking.se\/?page_id=9"},"modified":"2026-06-16T09:19:36","modified_gmt":"2026-06-16T09:19:36","slug":"tf-search-form","status":"publish","type":"page","link":"https:\/\/demo.mybooking.se\/?page_id=9","title":{"rendered":"TF Search Form"},"content":{"rendered":"\n\t\t\t\t\t<!-- Start Fullwidth Wrap -->\n\t\t\t<div class=\"tf_tf_booking-widget-wrap\" data-fullwidth=\"true\">\n\t\t\t\t<div class=\"tf_custom-container\">\n\t\t\t\t\t<div class=\"tf_custom-inner\">\n\n\t\t\t\t\t\t\t\t\t\t<div id=\"tf-booking-search-tabs\" class=\" default-form tf-search-tabs__design--1 \">\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t<!-- Booking Form Tabs -->\n\t\t\t\t\t\t<div class=\"tf-booking-form-tab design-1 tf-multiple-tabs\">\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"tf-tablinks tf_btn tf_btn_small tf_btn_secondary  active\" data-form-id=\"tf-hotel-booking-form\">Hotel<\/button>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"tf-tablinks tf_btn tf_btn_small tf_btn_secondary \" data-form-id=\"tf-room-booking-form\">Room<\/button>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t<!-- Booking Form tabs mobile version -->\n\t\t\t\t\t\t\t<div class=\"tf-booking-form-tab-mobile\">\n\t\t\t\t\t\t\t\t<select name=\"tf-booking-form-tab-select\" id=\"\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<option value=\"tf-hotel-booking-form\">Hotel<\/option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<option value=\"tf-room-booking-form\">Room<\/option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/select>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<!-- Booking Forms -->\n\t\t\t\t\t\t<div class=\"tf-booking-forms-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"tf-hotel-booking-form\" style=\"display:block\" class=\"tf-tabcontent \">\n\t\t\t\t\t\t\t\t\t            <form class=\"tf_booking-widget  default-form \" id=\"tf_hotel_aval_check\" method=\"get\" autocomplete=\"off\" action=\"https:\/\/demo.mybooking.se\/?page_id=8\">\n                <div class=\"tf_homepage-booking\">\n\t\t\t\t\t                        <div class=\"tf_destination-wrap\">\n                            <div class=\"tf_input-inner\">\n                                <div class=\"tf_form-row\">\n                                    <label class=\"tf_label-row\">\n                                        <span class=\"tf-label\">Location:<\/span>\n                                        <div class=\"tf_form-inner\">\n                                            <div class=\"tf-search-form-field-icon\">\n                                                <i class=\"fas fa-search\"><\/i>\n                                            <\/div>\n\t\t\t\t\t\t\t\t\t\t\t                                                <input type=\"text\" name=\"place-name\" required id=\"tf-destination-adv\"\n                                                       class=\"tf-advance-destination tf-preview-destination\" placeholder=\"Enter Location\">\n                                                <input type=\"hidden\" name=\"place\" id=\"tf-place-destination\" placeholder=\"Enter Location\">\n                                                <div class=\"tf-hotel-locations tf-hotel-results\">\n                                                    <ul id=\"ui-id-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                    <\/ul>\n                                                <\/div>\n\t\t\t\t\t\t\t\t\t\t\t                                        <\/div>\n                                    <\/label>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\t\t\t\t\t\n                    <div class=\"tf_selectperson-wrap\">\n                        <div class=\"tf_input-inner\">\n                        <span class=\"tf_person-icon tf-search-form-field-icon\">\n                            <i class=\"fas fa-user\"><\/i>\n                        <\/span>\n                            <div class=\"adults-text\">1 Adults<\/div>\n\t\t\t\t\t\t\t                                <div class=\"person-sep\"><\/div>\n                                <div class=\"child-text\">0 Children<\/div>\n\t\t\t\t\t\t\t                            <div class=\"person-sep\"><\/div>\n                            <div class=\"room-text\">1 Room<\/div>\n                        <\/div>\n\n                        <div class=\"tf_acrselection-wrap\">\n                            <div class=\"tf_acrselection-inner\">\n                                <div class=\"tf_acrselection\">\n                                    <div class=\"acr-label\">Adults<\/div>\n                                    <div class=\"acr-select\">\n                                        <div class=\"acr-dec\">-<\/div>\n                                        <input type=\"number\" name=\"adults\" id=\"adults\" min=\"1\" value=\"1\" readonly>\n                                        <div class=\"acr-inc\">+<\/div>\n                                    <\/div>\n                                <\/div>\n\t\t\t\t\t\t\t\t                                    <div class=\"tf_acrselection\">\n                                        <div class=\"acr-label\">Children<\/div>\n                                        <div class=\"acr-select\">\n                                            <div class=\"acr-dec \">-<\/div>\n                                            <input type=\"number\" name=\"children\" id=\"children\" min=\"0\" value=\"0\">\n                                            <div class=\"acr-inc \">+<\/div>\n                                        <\/div>\n                                    <\/div>\n\t\t\t\t\t\t\t\t                                <div class=\"tf_acrselection\">\n                                    <div class=\"acr-label\">Rooms<\/div>\n                                    <div class=\"acr-select\">\n                                        <div class=\"acr-dec\">-<\/div>\n                                        <input type=\"number\" name=\"room\" id=\"room\" min=\"1\" value=\"1\">\n                                        <div class=\"acr-inc\">+<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\t\t\t\t\t\t\t\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"tf_selectdate-wrap\">\n                        <div class=\"tf_input-inner\">\n                            <div class=\"tf_form-row\">\n                                <label class=\"tf_label-row\">\n                                    <span class=\"tf-label\">Check-in &amp; Check-out date<\/span>\n                                    <div class=\"tf_form-inner\">\n                                        <div class=\"tf-search-form-field-icon\">\n                                            <i class=\"far fa-calendar-alt\"><\/i>\n                                        <\/div>\n                                        <input type=\"text\" name=\"check-in-out-date\" id=\"check-in-out-date\" onkeypress=\"return false;\"\n                                               placeholder=\"Check-in - Check-out\" required>\n                                    <\/div>\n                                <\/label>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n\t\t\t\t\t                        <div class=\"tf_selectdate-wrap tf_more_info_selections\">\n                            <div class=\"tf_input-inner\">\n                                <label class=\"tf_label-row\" style=\"width: 100%;\">\n                                    <span class=\"tf-label\">More<\/span>\n                                    <span style=\"text-decoration: none; display: block; cursor: pointer;\">Filter  <i class=\"fas fa-angle-down\"><\/i><\/span>\n                                <\/label>\n                            <\/div>\n                            <div class=\"tf-more-info\">\n                                <h3 class=\"tf_advance_search_form_price_filter_label\">Filter Price<\/h3>\n                                <div class=\"tf-filter-price-range\">\n                                    <div class=\"tf-hotel-filter-range\"><\/div>\n                                <\/div>\n\n                                <h3 class=\"tf_advance_search_form_feature_filter_label\" style=\"margin-top: 20px\">Hotel Features<\/h3>\n\t\t\t\t\t\t\t\t\n                                <h3 style=\"margin-top: 20px\" class=\"tf_advance_search_form_type_filter_label\">Hotel Types<\/h3>\n\t\t\t\t\t\t\t\t                            <\/div>\n                        <\/div>\n\t\t\t\t\t\n                    <div class=\"tf_submit-wrap\">\n                        <input type=\"hidden\" name=\"type\" value=\"tf_hotel\" class=\"tf-post-type\"\/>\n\t\t\t\t\t\t                        <button class=\"tf_btn tf-submit\" type=\"submit\">Search<\/button>\n                    <\/div>\n\n                <\/div>\n\n            <\/form>\n\n            <script>\n                (function ($) {\n                    $(document).ready(function () {\n\n                        \/\/ flatpickr First Day of Week\n\t\t\t\t\t\twindow.flatpickr.l10ns.default.firstDayOfWeek = 0;window.flatpickr.l10ns.default.rangeSeparator = ' - ';\n\t\t\t\t\t\tconst regexMap = {\n                            'Y\/m\/d': \/(\\d{4}\\\/\\d{2}\\\/\\d{2}).*(\\d{4}\\\/\\d{2}\\\/\\d{2})\/,\n                            'd\/m\/Y': \/(\\d{2}\\\/\\d{2}\\\/\\d{4}).*(\\d{2}\\\/\\d{2}\\\/\\d{4})\/,\n                            'm\/d\/Y': \/(\\d{2}\\\/\\d{2}\\\/\\d{4}).*(\\d{2}\\\/\\d{2}\\\/\\d{4})\/,\n                            'Y-m-d': \/(\\d{4}-\\d{2}-\\d{2}).*(\\d{4}-\\d{2}-\\d{2})\/,\n                            'd-m-Y': \/(\\d{2}-\\d{2}-\\d{4}).*(\\d{2}-\\d{2}-\\d{4})\/,\n                            'm-d-Y': \/(\\d{2}-\\d{2}-\\d{4}).*(\\d{2}-\\d{2}-\\d{4})\/,\n                            'Y.m.d': \/(\\d{4}\\.\\d{2}\\.\\d{2}).*(\\d{4}\\.\\d{2}\\.\\d{2})\/,\n                            'd.m.Y': \/(\\d{2}\\.\\d{2}\\.\\d{4}).*(\\d{2}\\.\\d{2}\\.\\d{4})\/,\n                            'm.d.Y': \/(\\d{2}\\.\\d{2}\\.\\d{4}).*(\\d{2}\\.\\d{2}\\.\\d{4})\/\n                        };\n                        const dateRegex = regexMap['Y\/m\/d'];\n\n                        $(\"#tf_hotel_aval_check #check-in-out-date\").flatpickr({\n                            enableTime: false,\n                            mode: \"range\",\n                            dateFormat: \"Y\/m\/d\",\n                            altInput: true,\n                            altFormat: 'Y\/m\/d',\n                            minDate: \"today\",\n\n                            \/\/ flatpickr locale\n\t\t\t\t\t\t\tlocale: Object.assign({}, window.flatpickr.l10ns[\"default\"], { rangeSeparator: \" - \" }),\n                            onReady: function (selectedDates, dateStr, instance) {\n                                instance.element.value = dateStr.replace(\/(\\d{4}\\\/\\d{2}\\\/\\d{2}).*(\\d{4}\\\/\\d{2}\\\/\\d{2})\/g, function (match, date1, date2) {\n                                    return `${date1} - ${date2}`;\n                                });\n                            },\n                            onChange: function (selectedDates, dateStr, instance) {\n                                instance.element.value = dateStr.replace(\/(\\d{4}\\\/\\d{2}\\\/\\d{2}).*(\\d{4}\\\/\\d{2}\\\/\\d{2})\/g, function (match, date1, date2) {\n\t\t\t\t\t\t\t\t\treturn `${date1} - ${date2}`;\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tinstance.altInput.value = instance.altInput.value.replace( dateRegex, function (match, d1, d2) {\n\t\t\t\t\t\t\t\t\treturn `${d1} - ${d2}`;\n\t\t\t\t\t\t\t\t});\n                            }\n                        });\n\n                    });\n                })(jQuery);\n            <\/script>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"tf-room-booking-form\" class=\"tf-tabcontent \" >\n\t\t\t\t\t\t\t\t\t            <form class=\"tf_booking-widget  default-form  tf-advanced-search-enabled\" id=\"tf_room_aval_check\" method=\"get\" autocomplete=\"off\" action=\"https:\/\/demo.mybooking.se\/?page_id=8\">\n                <div class=\"tf_homepage-booking\">\n\n                    <div class=\"tf_selectperson-wrap\">\n                        <div class=\"tf_input-inner\">\n                        <span class=\"tf_person-icon tf-search-form-field-icon\">\n                            <i class=\"fas fa-user\"><\/i>\n                        <\/span>\n                            <div class=\"adults-text\">1 Adults<\/div>\n\t\t\t\t\t\t\t                                <div class=\"person-sep\"><\/div>\n                                <div class=\"child-text\">0 Children<\/div>\n\t\t\t\t\t\t\t                            <div class=\"person-sep\"><\/div>\n                            <div class=\"room-text\">1 Room<\/div>\n                        <\/div>\n\n                        <div class=\"tf_acrselection-wrap\">\n                            <div class=\"tf_acrselection-inner\">\n                                <div class=\"tf_acrselection\">\n                                    <div class=\"acr-label\">Adults<\/div>\n                                    <div class=\"acr-select\">\n                                        <div class=\"acr-dec\">-<\/div>\n                                        <input type=\"number\" name=\"adults\" id=\"adults\" min=\"1\" value=\"1\" readonly>\n                                        <div class=\"acr-inc\">+<\/div>\n                                    <\/div>\n                                <\/div>\n\t\t\t\t\t\t\t\t                                    <div class=\"tf_acrselection\">\n                                        <div class=\"acr-label\">Children<\/div>\n                                        <div class=\"acr-select\">\n                                            <div class=\"acr-dec\">-<\/div>\n                                            <input type=\"number\" name=\"children\" id=\"children\" min=\"0\" value=\"0\">\n                                            <div class=\"acr-inc\">+<\/div>\n                                        <\/div>\n                                    <\/div>\n\t\t\t\t\t\t\t\t                                <div class=\"tf_acrselection\">\n                                    <div class=\"acr-label\">Rooms<\/div>\n                                    <div class=\"acr-select\">\n                                        <div class=\"acr-dec\">-<\/div>\n                                        <input type=\"number\" name=\"room\" id=\"room\" min=\"1\" value=\"1\">\n                                        <div class=\"acr-inc\">+<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"tf_selectdate-wrap\">\n                        <div class=\"tf_input-inner\">\n                            <div class=\"tf_form-row\">\n                                <label class=\"tf_label-row\">\n                                    <span class=\"tf-label\">Check-in &amp; Check-out date<\/span>\n                                    <div class=\"tf_form-inner\">\n                                        <div class=\"tf-search-form-field-icon\">\n                                            <i class=\"far fa-calendar-alt\"><\/i>\n                                        <\/div>\n                                        <input type=\"text\" name=\"check-in-out-date\" id=\"check-in-out-date\" onkeypress=\"return false;\"\n                                               placeholder=\"Check-in - Check-out\" required>\n                                    <\/div>\n                                <\/label>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n\t\t\t\t\t                        <div class=\"tf_selectdate-wrap tf_more_info_selections\">\n                            <div class=\"tf_input-inner\">\n                                <label class=\"tf_label-row\" style=\"width: 100%;\">\n                                    <span class=\"tf-label\">More<\/span>\n                                    <span style=\"text-decoration: none; display: block; cursor: pointer;\">Filter  <i class=\"fas fa-angle-down\"><\/i><\/span>\n                                <\/label>\n                            <\/div>\n                            <div class=\"tf-more-info\">\n                                <h3 class=\"tf_advance_search_form_price_filter_label\">Filter Price<\/h3>\n                                <div class=\"tf-filter-price-range\">\n                                    <div class=\"tf-room-filter-range\"><\/div>\n                                <\/div>\n\n\t\t\t\t\t\t\t\t<h3 class=\"tf_advance_search_form_feature_filter_label\" style=\"margin-top: 20px\">Room Features<\/h3>\n\t\t\t\t\t\t\t\t\n                                <h3 class=\"tf_advance_search_form_feature_filter_label\" style=\"margin-top: 20px\">Room Types<\/h3>\n\t\t\t\t\t\t\t\t                            <\/div>\n                        <\/div>\n\t\t\t\t\t\n                    <div class=\"tf_submit-wrap\">\n                        <input type=\"hidden\" name=\"type\" value=\"tf_room\" class=\"tf-post-type\"\/>\n\t\t\t\t\t\t                        <button class=\"tf_btn tf-submit\" type=\"submit\">Search<\/button>\n                    <\/div>\n\n                <\/div>\n\n            <\/form>\n\n            <script>\n                (function ($) {\n                    $(document).ready(function () {\n\n                        \/\/ flatpickr First Day of Week\n\t\t\t\t\t\twindow.flatpickr.l10ns.default.firstDayOfWeek = 0;window.flatpickr.l10ns.default.rangeSeparator = ' - ';\n\t\t\t\t\t\tconst regexMap = {\n                            'Y\/m\/d': \/(\\d{4}\\\/\\d{2}\\\/\\d{2}).*(\\d{4}\\\/\\d{2}\\\/\\d{2})\/,\n                            'd\/m\/Y': \/(\\d{2}\\\/\\d{2}\\\/\\d{4}).*(\\d{2}\\\/\\d{2}\\\/\\d{4})\/,\n                            'm\/d\/Y': \/(\\d{2}\\\/\\d{2}\\\/\\d{4}).*(\\d{2}\\\/\\d{2}\\\/\\d{4})\/,\n                            'Y-m-d': \/(\\d{4}-\\d{2}-\\d{2}).*(\\d{4}-\\d{2}-\\d{2})\/,\n                            'd-m-Y': \/(\\d{2}-\\d{2}-\\d{4}).*(\\d{2}-\\d{2}-\\d{4})\/,\n                            'm-d-Y': \/(\\d{2}-\\d{2}-\\d{4}).*(\\d{2}-\\d{2}-\\d{4})\/,\n                            'Y.m.d': \/(\\d{4}\\.\\d{2}\\.\\d{2}).*(\\d{4}\\.\\d{2}\\.\\d{2})\/,\n                            'd.m.Y': \/(\\d{2}\\.\\d{2}\\.\\d{4}).*(\\d{2}\\.\\d{2}\\.\\d{4})\/,\n                            'm.d.Y': \/(\\d{2}\\.\\d{2}\\.\\d{4}).*(\\d{2}\\.\\d{2}\\.\\d{4})\/\n                        };\n                        const dateRegex = regexMap['Y\/m\/d'];\n\n                        $(\"#tf_room_aval_check #check-in-out-date\").flatpickr({\n                            enableTime: false,\n                            mode: \"range\",\n                            dateFormat: \"Y\/m\/d\",\n                            altInput: true,\n                            altFormat: 'Y\/m\/d',\n                            minDate: \"today\",\n\n                            \/\/ flatpickr locale\n\t\t\t\t\t\t\tlocale: Object.assign({}, window.flatpickr.l10ns[\"default\"], { rangeSeparator: \" - \" }),\n                            onReady: function (selectedDates, dateStr, instance) {\n                                instance.element.value = dateStr.replace(\/(\\d{4}\\\/\\d{2}\\\/\\d{2}).*(\\d{4}\\\/\\d{2}\\\/\\d{2})\/g, function (match, date1, date2) {\n                                    return `${date1} - ${date2}`;\n                                });\n                            },\n                            onChange: function (selectedDates, dateStr, instance) {\n                                instance.element.value = dateStr.replace(\/(\\d{4}\\\/\\d{2}\\\/\\d{2}).*(\\d{4}\\\/\\d{2}\\\/\\d{2})\/g, function (match, date1, date2) {\n\t\t\t\t\t\t\t\t\treturn `${date1} - ${date2}`;\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tinstance.altInput.value = instance.altInput.value.replace( dateRegex, function (match, d1, d2) {\n\t\t\t\t\t\t\t\t\treturn `${d1} - ${d2}`;\n\t\t\t\t\t\t\t\t});\n                            }\n                        });\n\n                    });\n                })(jQuery);\n            <\/script>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<!-- Close Fullwidth Wrap -->\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"tf-search-form","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":0,"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.mybooking.se\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}