{"id":1247,"date":"2026-07-02T18:48:16","date_gmt":"2026-07-02T11:48:16","guid":{"rendered":"http:\/\/www.solidres.com\/blog\/?p=1247"},"modified":"2026-07-02T18:48:16","modified_gmt":"2026-07-02T11:48:16","slug":"a-modern-date-picker-for-solidres-one-search-bar-the-way-guests-expect-it","status":"publish","type":"post","link":"https:\/\/www.solidres.com\/blog\/2026\/07\/02\/a-modern-date-picker-for-solidres-one-search-bar-the-way-guests-expect-it\/","title":{"rendered":"A modern date picker for Solidres \u2014 one search bar, the way guests expect it"},"content":{"rendered":"\n<p>We&#8217;ve replaced the ageing jQuery UI date picker with a fast, dependency-free, OTA-style range picker \u2014 the same single-tap check-in \u2192 check-out flow your guests already know from the major travel-booking sites.<\/p>\n\n\n\n<p>For years, every date field in Solidres \u2014 the booking funnel, the search modules, the admin reservation screens \u2014 was powered by the jQuery UI date picker. It did the job, but it was showing its age: two separate calendars for check-in and check-out, a heavy pile of JavaScript, no dark mode, and accessibility gaps that never sat well with modern web standards.<\/p>\n\n\n\n<p>So we rebuilt it. Meet the <strong>modern date picker<\/strong> \u2014 and the unified search bar it now lives in. Available in Solidres v4.2.0.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.solidres.com\/blog\/wp-content\/uploads\/2026\/07\/modern_datepicker.png\"><img loading=\"lazy\" width=\"1024\" height=\"853\" src=\"https:\/\/www.solidres.com\/blog\/wp-content\/uploads\/2026\/07\/modern_datepicker-1024x853.png\" alt=\"\" class=\"wp-image-1248\" srcset=\"https:\/\/www.solidres.com\/blog\/wp-content\/uploads\/2026\/07\/modern_datepicker-1024x853.png 1024w, https:\/\/www.solidres.com\/blog\/wp-content\/uploads\/2026\/07\/modern_datepicker-300x250.png 300w, https:\/\/www.solidres.com\/blog\/wp-content\/uploads\/2026\/07\/modern_datepicker-768x640.png 768w, https:\/\/www.solidres.com\/blog\/wp-content\/uploads\/2026\/07\/modern_datepicker.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Preview of the modern date picker in various places<\/figcaption><\/figure>\n\n\n\n<h4>One picker, not two<\/h4>\n\n\n\n<p>The biggest change is the one your guests will feel first. Instead of two disconnected calendars, there&#8217;s now a <strong>single range picker<\/strong>: tap your check-in date, and the valid check-out window lights up instantly \u2014 respecting availability, minimum and maximum stay length, and any booking rules you&#8217;ve set. Tap check-out, and you&#8217;re done. Two months show on desktop, one on mobile.<\/p>\n\n\n\n<p>Crucially, the calendar is <strong>availability-aware<\/strong>: a guest can never select a range that spans a night you&#8217;re already booked or have blocked. Fewer dead-end bookings, fewer support emails.<\/p>\n\n\n\n<h4>Lighter, faster, no jQuery<\/h4>\n\n\n\n<p>The old picker pulled in jQuery, jQuery UI, a base theme, and <strong>68 separate locale files<\/strong> \u2014 well over half a megabyte before a guest could pick a date. The new picker is a single zero-dependency library of around <strong>15 KB gzipped<\/strong>. That&#8217;s a meaningful cut to what every visitor downloads, and one less legacy dependency to maintain.<\/p>\n\n\n\n<h4>Accessible and dark-mode ready<\/h4>\n\n\n\n<p>The new calendar was built to today&#8217;s standards, not 2012&#8217;s:<\/p>\n\n\n\n<ul><li><strong>Full keyboard control<\/strong> \u2014 arrow keys to move, Enter to select, Esc to close, with a visible focus ring throughout.<\/li><li><strong>Screen-reader friendly<\/strong> \u2014 the month, focused day, disabled dates, and selected range are all announced properly (WCAG 2.1 AA).<\/li><li><strong>Automatic dark mode<\/strong> \u2014 it follows the visitor&#8217;s system preference and your template&#8217;s theme, with no hard-coded colours to clash.<\/li><\/ul>\n\n\n\n<h4>A search bar that finally feels like one<\/h4>\n\n\n\n<p>We didn&#8217;t stop at the calendar. The sprawling room \/ adult \/ child drop-downs have been folded into a single <strong>guests &amp; rooms popover<\/strong> with friendly plus\/minus steppers \u2014 one per room \u2014 summarised in plain language (&#8220;2 adults \u00b7 2 children \u00b7 1 room&#8221;). Paired with the slimmed date field, every search surface now reads as one cohesive <strong>[ Dates ] [ Guests &amp; rooms ] [ Search ]<\/strong> bar \u2014 the pattern travellers recognise from every major booking site \u2014 that folds gracefully into a stacked card on narrow screens and in sidebars.<\/p>\n\n\n\n<h4>Nothing to configure \u2014 and a safety net if you need it<\/h4>\n\n\n\n<p>The modern picker is the <strong>default for every site<\/strong>, new and upgraded alike \u2014 there&#8217;s nothing to switch on. Your existing booking rules, availability logic, and submitted data are all untouched; this is a front-of-house upgrade, not a change to how bookings work.<\/p>\n\n\n\n<p>Run a heavily customised template? A new \u201c<strong>Datepicker engine<\/strong>\u201d option in Solidres Configuration lets you flip back to the <strong>Legacy<\/strong> picker in a single click. We&#8217;re keeping that option around for several releases, so there&#8217;s a long, safe window to update any custom overrides at your own pace.<\/p>\n\n\n\n<p>Modern by default, legacy on tap, and a booking experience that finally matches today&#8217;s leading travel sites \u2014 that&#8217;s the new Solidres date picker. Upgrade, and your guests get it automatically.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve replaced the ageing jQuery UI date picker with a fast, dependency-free, OTA-style range picker \u2014 the same single-tap check-in \u2192 check-out flow your guests already know from the major travel-booking sites. For years, every date field in Solidres \u2014 the booking funnel, the search modules, the admin reservation screens \u2014 was powered by the [&#8230;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts\/1247"}],"collection":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/comments?post=1247"}],"version-history":[{"count":1,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts\/1247\/revisions"}],"predecessor-version":[{"id":1249,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts\/1247\/revisions\/1249"}],"wp:attachment":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/media?parent=1247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/categories?post=1247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/tags?post=1247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}