{"id":98155,"date":"2018-03-05T07:00:00","date_gmt":"2018-03-05T22:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/?p=98155"},"modified":"2019-12-18T07:30:25","modified_gmt":"2019-12-18T15:30:25","slug":"20180305-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20180305-00\/?p=98155","title":{"rendered":"Inadvertently designing a horrible time and date picker"},"content":{"rendered":"<p>Perhaps inspired by the tongue-in-cheek competition to design <a href=\"https:\/\/uxdesign.cc\/the-worst-volume-control-ui-in-the-world-60713dc86950\"> the worst volume control<\/a>, an internal tool here at Microsoft managed to create the worst time and date picker:<\/p>\n<div style=\"width: 17em; color: gray; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; padding: 5px; border: solid 1px black;\">\n<div style=\"background-color: #f5f5f5; border: 0; width: 100%; text-align: center; position: relative;\">\n<div style=\"position: absolute; width: 100%; top: 0; text-align: left;\">Prev<\/div>\n<div><b>January 2017<\/b><\/div>\n<div style=\"position: absolute; width: 100%; top: 0; text-align: right;\">Next<\/div>\n<\/div>\n<table style=\"text-align: center; color: #bbb; width: 100%;\">\n<tbody>\n<tr style=\"color: gray;\">\n<th>S<\/th>\n<th>M<\/th>\n<th>T<\/th>\n<th>W<\/th>\n<th>T<\/th>\n<th>F<\/th>\n<th>S<\/th>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<td>3<\/td>\n<td>4<\/td>\n<td>5<\/td>\n<td>6<\/td>\n<td>7<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>9<\/td>\n<td>10<\/td>\n<td style=\"color: #808080;\">11<\/td>\n<td>12<\/td>\n<td>13<\/td>\n<td>14<\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>16<\/td>\n<td>17<\/td>\n<td>18<\/td>\n<td>19<\/td>\n<td>20<\/td>\n<td>21<\/td>\n<\/tr>\n<tr>\n<td>22<\/td>\n<td>23<\/td>\n<td>24<\/td>\n<td>25<\/td>\n<td>26<\/td>\n<td>27<\/td>\n<td>28<\/td>\n<\/tr>\n<tr>\n<td>29<\/td>\n<td>30<\/td>\n<td>31<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table style=\"width: 100%; color: gray;\">\n<tbody>\n<tr>\n<td><b>Time<\/b><\/td>\n<td>04:29<\/td>\n<\/tr>\n<tr>\n<td><b>Hour<\/b><\/td>\n<td style=\"position: relative;\">\n<div style=\"position: absolute; background-color: white; border: solid 1px #ccc; top: 0; left: 22.22%; width: 16px; height: 18px;\">\u00a0<\/div>\n<div style=\"height: 10px; background-color: #d5d5d5;\">\u00a0<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td><b>Minute<\/b><\/td>\n<td style=\"position: relative;\">\n<div style=\"position: absolute; background-color: white; border: solid 1px #ccc; top: 0; left: 49.15%; width: 16px; height: 18px;\">\u00a0<\/div>\n<div style=\"height: 10px; background-color: #d5d5d5;\">\u00a0<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Okay, the date-picking part isn&#8217;t so bad (aside from the fact that everything is varying <a href=\"http:\/\/memory-alpha.wikia.com\/wiki\/Shades_of_Gray_(episode)\"> shades of gray<\/a>), but using sliders to select the time?<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Perhaps inspired by the worst possible volume control.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[26],"class_list":["post-98155","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-other"],"acf":[],"blog_post_summary":"<p>Perhaps inspired by the worst possible volume control.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/98155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=98155"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/98155\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=98155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=98155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=98155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}