{"id":2535,"date":"2016-10-13T23:33:54","date_gmt":"2016-10-13T13:33:54","guid":{"rendered":"http:\/\/codemyui.com\/?p=2535"},"modified":"2018-05-17T09:52:56","modified_gmt":"2018-05-16T23:52:56","slug":"time-picker-ui-changing-backgrounds-pm","status":"publish","type":"post","link":"https:\/\/codemyui.com\/time-picker-ui-changing-backgrounds-pm\/","title":{"rendered":"Time Picker UI With Changing Backgrounds For AM &amp; PM"},"content":{"rendered":"<p>This simple user interface for <a href=\"https:\/\/codemyui.com\/tag\/time-picker\/\">time picker<\/a> is designed by Josh Bivens. There are three vertical sliders that you can use to pick the hour, minute and AM\/PM. When you switch between AM\/PM the background colour changes providing a nice visual cue.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/f1bab570399aeb7c2fde04ae0f5cd2d3\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='505' data-theme-id='0' data-slug-hash='jAkjzo' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Alarm Clock UI by Josh Bivens (@joshbivens) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This simple user interface for time picker is designed by Josh Bivens. There are three vertical sliders that you can use to pick the hour, minute and AM\/PM. When you switch between AM\/PM the background colour changes providing a nice visual cue.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/time-picker-ui-changing-backgrounds-pm\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":2906,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[13170349,12161561],"class_list":["post-2535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-input-field","tag-time-picker","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/time-picker-ui-with-changing-backgrounds-for-am-pm.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":10965,"url":"https:\/\/codemyui.com\/staff-appointment-booking-form\/","url_meta":{"origin":2535,"position":0},"title":"Staff Appointment Booking Form","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"This staff appointment booking form was designed by Nathan Taylor. You get a list of staff members and you can click on one of them to pick a date and time and put in a booking appointment with them. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"calendar\"","block_context":{"text":"calendar","link":"https:\/\/codemyui.com\/tag\/calendar\/"},"img":{"alt_text":"Staff Appointment Booking Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":165,"url":"https:\/\/codemyui.com\/name-tag-sign-up\/","url_meta":{"origin":2535,"position":1},"title":"Name Tag Sign Up","author":"Hima Vincent","date":"September 21, 2015","format":false,"excerpt":"This is a very interesting sign-up form that looks like a name tag which is an amazing way to make your website standout from others. Designed by Josh Bivens If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"CodeMyUI.com","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/name-tag-sign-up.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/name-tag-sign-up.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/name-tag-sign-up.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/name-tag-sign-up.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26505,"url":"https:\/\/codemyui.com\/css-only-date-picker-with-calendar-dropdown\/","url_meta":{"origin":2535,"position":2},"title":"CSS Only Date Picker With Calendar Dropdown","author":"Saijo George","date":"June 26, 2018","format":false,"excerpt":"Loving this sweet date picker by Shaw in pure CSS. When you click on the input field it draws out a calendar grid and on picking a day the date moves into the input field and the drop-down disappears in a smooth animation. Will work great on booking forms. If\u2026","rel":"","context":"In \"calendar\"","block_context":{"text":"calendar","link":"https:\/\/codemyui.com\/tag\/calendar\/"},"img":{"alt_text":"CSS Only Date Picker With Calendar Dropdown","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/CSS-Only-Date-Picker-With-Calendar-Dropdown.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/CSS-Only-Date-Picker-With-Calendar-Dropdown.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/CSS-Only-Date-Picker-With-Calendar-Dropdown.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/CSS-Only-Date-Picker-With-Calendar-Dropdown.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28566,"url":"https:\/\/codemyui.com\/card-ui-inspired-checkbox-and-radio-button-with-background-fill-on-click\/","url_meta":{"origin":2535,"position":3},"title":"Card UI Inspired Checkbox and Radio Button with Background Fill on Click","author":"Saijo George","date":"October 24, 2019","format":false,"excerpt":"Need some material design inspired checkbox and radio button in card UI style for your next project? With this pure CSS code snippet by Buddy Reno you can do just that. When you make a section there is a background colour applied to the card with a circle expanding from\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Card UI Inspired Checkbox and Radio Button with Background Fill on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Card-UI-Inspired-Checkbox-and-Radio-Button-with-Background-Fill-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Card-UI-Inspired-Checkbox-and-Radio-Button-with-Background-Fill-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Card-UI-Inspired-Checkbox-and-Radio-Button-with-Background-Fill-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Card-UI-Inspired-Checkbox-and-Radio-Button-with-Background-Fill-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24892,"url":"https:\/\/codemyui.com\/comicbook-inspired-hand-drawn-borders\/","url_meta":{"origin":2535,"position":4},"title":"Comicbook Inspired Hand Drawn Borders","author":"Hima Vincent","date":"November 1, 2017","format":false,"excerpt":"Here are some pure CSS borders that looks like it was pulled from a comic book, it has got that distinct hand-drawn look and feel to it. If you are going for a comic book inspired layout for your page you will love this. If you are having trouble with\u2026","rel":"","context":"In \"comic book\"","block_context":{"text":"comic book","link":"https:\/\/codemyui.com\/tag\/comic-book\/"},"img":{"alt_text":"Comicbook Inspired Hand Drawn Borders","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/comicbook-inspired-hand-drawn-borders.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/comicbook-inspired-hand-drawn-borders.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/comicbook-inspired-hand-drawn-borders.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/comicbook-inspired-hand-drawn-borders.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15400,"url":"https:\/\/codemyui.com\/ui-brightness-control\/","url_meta":{"origin":2535,"position":5},"title":"UI for Brightness Control","author":"Hima Vincent","date":"May 9, 2017","format":false,"excerpt":"You don't often see a brightness control on a website but if you ever need to show one this UI designed by Mariusz Dabrowski could just what you need. When you click on the button in the bottom right it reveals as range slider that you can interact with to\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"UI for Brightness Control","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/ui-for-brightness-control.gif?fit=880%2C400&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/ui-for-brightness-control.gif?fit=880%2C400&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/ui-for-brightness-control.gif?fit=880%2C400&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/ui-for-brightness-control.gif?fit=880%2C400&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=2535"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2535\/revisions"}],"predecessor-version":[{"id":26033,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2535\/revisions\/26033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/2906"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=2535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=2535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=2535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}