blocks|key|360456|text|没有单一的答案，它取决于上下文。对于很多地方来说，好的文本控件就足够了。当然，这样的东西仍然可以通过支持粘贴和一些增加/减少操作来提供帮助。也许它甚至可以对值做一些验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360457|还有一些地方需要更多的东西。日历对输入日期很有帮助，可以使用某种滑块来表示时间。(Lotus+Notes日历有一个滑块。)|360458|我的建议是：|360459|想想你需要什么。不要将复杂的窗口小部件放到较少使用的对话框中。|360460|如果您需要这些有用的小部件，请检查您正在使用的库中是否有现成的，并花一些时间看看其他人是如何完成这些工作的。|360461|始终使用支持粘贴的文本控件。|360462|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

There is no single answer, it depends on the context. For many places good text controls are enough. Of course such things can still help by supporting pasting and some increase/decrease actions. Maybe it can even do some validation for the value.

Then there are places that need something more. Calendar can be really helpful for entering dates and some kind of slider could be used for time. (Lotus Notes calendar has a slider.)

My advise is:

Think what you need. Don't put complicated widgets to a less used dialog.

If you need these nice helpful widgets, check if there are ready made in the library you are using and take some time to see how others have done these.

Always have the text controls with support for pasting.

blocks|key|3148478|text|除非您选择的GUI工具箱中有更高级的时间控件，否则表示开始和结束的两个日历控件是最直接的。此外，您还需要决定如何使用这些信息。例如，如果您使用开始日期和间隔来递增该日期，则更改开始日期不会更改间隔的含义。这真的取决于你想做什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3148479|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Unless there is a more advanced time control in your GUI toolkit of choice, two calendar controls representing start and end is the most straightforward. Also, you need to decide how you want to use the information. For example, if you used a start date and an interval to increment that date, changing the start date wouldn't change the meaning of the interval. It really depends on what you're wanting to do.

blocks|key|363041|text|我看到的一种很好的工作方式是使用甘特图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|363042|http://en.wikipedia.org/wiki/Gantt_chart|offset|length|363043|您可以创建单个折线图，然后可以根据控件的宽度或放大程度跨月、日、小时和分钟对其进行缩放。问题是我现在还不知道有什么控件只有一行代码，所以你可能需要创建一个自定义的。你可以寻找一个甘特图控件，然后只做一个任务/项目。|363044|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

One way I've seen work very well is using a gantt chart: 
<a href="http://en.wikipedia.org/wiki/Gantt_chart" rel="nofollow noreferrer">http://en.wikipedia.org/wiki/Gantt_chart</a> 
 
You can create a single line chart and then you can scale it across months, days, hours and minutes depending on how wide or zoomed in you make the control. The problem is I don't know of any control out there right now that does just one line, so you may need to create a custom one. You could possibly look for a gantt chart control and just do one task/item.

blocks|key|363054|text|观察人们对你的时间范围控件做了什么。然后编写它，使其最适合做人们想用它实现的事情。例如，如果输入未来日期只有意义，就不要输入过去的日期。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|363055|Jonathan+Leighton在jquery中做了一个很好的date+inputter+-element，我发现它非常适合输入日期。这是有益的，因为用户既可以通过点击输入日期，也可以直接键入日期。用户还可以直接获得有关在框中键入它的提示。如果你把它和某种时间线-object结合起来，你可能会走得很远。只要避免制作令人困惑或恼人的UI元素即可！|offset|length|363056|entityMap|0|LINK|mutability|MUTABLE|url|http://jonathanleighton.com/projects/date-input^0|0|W|M|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Observe what people are doing with your time range control. Then write it so that it's most suited towards doing what the people want to achieve with it. For instance, leave away past dates if inputting future dates only makes sense.

Jonathan Leighton has made a nice <a href="http://jonathanleighton.com/projects/date-input" rel="nofollow noreferrer">date inputter -element</a> in jquery that I've found very nice for inputting dates. This is beneficial in a way that user can both input the date by clicking or type it in directly. The user also directly gets the hint about typing it into the box. If you couple this with some kind of timeline -object, you may actually go far afar. Just avoid making UI elements that are confusing or angering!

blocks|key|3361343|text|当我思考这样的问题时，我倾向于从常见的设计模式中寻找灵感。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3361344|Yahoo+Pattern+Library提供some+potential+solutions。|offset|length|3361345|UI+Patterns+site也是give+some+suggestions，值得一看。|3361346|为了更好地衡量，这里是another+solution+at+the+Welie+pattern+library。|3361347|另一个灵感来源可能是其他网站和应用程序。例如，考虑所有需要记录短时间和长时间持续时间的用例。例如，公司TimeSheet记录，公司汽车里程记录软件，任务记录软件，秒表应用程序，日历应用程序等。然后看看他们是如何处理用于捕获时间范围的图形用户界面控件的。|3361348|我个人还没有找到选择日期和时间的最喜欢的解决方案。但是，我想我会想要这样的。|3361349|3361350|用户单击以显示日历弹出窗口，并在弹出窗口中显示2并排显示日历(开始日期/时间和结束日期1显示今天的日期，另一个还显示今天的date.|unordered-list-item|style|BOLD|3361351|Calendar控件，这些控件允许对日期、月份和年份进行常规导航和选择。每个日历下面的|3361352|3361353|是一个hh:mm框，默认为当前时间。|3361354|用户可以使用向上/向下箭头或键入来编辑此时间框中的值。|3361355|Alternatively，在每个日历下面显示一个模拟时钟。设置时间需要两次鼠标单击(单击1表示小时，单击2表示分钟)。|3361356|3361357|希望这能有所帮助|3361358|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/ypatterns/|1|http://developer.yahoo.com/ypatterns/pattern.php?pattern=calendar|2|http://ui-patterns.com/|3|http://ui-patterns.com/pattern/StructuredFormat|4|http://www.welie.com/patterns/showPattern.php?patternID=date-selector^0|0|0|L|0|N|O|1|0|0|G|2|I|L|3|0|B|19|4|0|0|0|0|N|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]|$D|1Q|E|1R|1|1S]]|A|$]]|$1|F|3|G|5|6|7|1T|8|@]|9|@$D|1U|E|1V|1|1W]|$D|1X|E|1Y|1|1Z]]|A|$]]|$1|H|3|I|5|6|7|20|8|@]|9|@$D|21|E|22|1|23]]|A|$]]|$1|J|3|K|5|6|7|24|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|25|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|27|8|@$D|28|E|29|R|S]]|9|@]|A|$]]|$1|T|3|U|5|Q|7|2A|8|@]|9|@]|A|$]]|$1|V|3|-4|5|Q|7|2B|8|@]|9|@]|A|$]]|$1|W|3|X|5|Q|7|2C|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|Q|7|2D|8|@]|9|@]|A|$]]|$1|10|3|11|5|Q|7|2E|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2G|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]]|16|$17|$5|18|19|1A|A|$1B|1C]]|1D|$5|18|19|1A|A|$1B|1E]]|1F|$5|18|19|1A|A|$1B|1G]]|1H|$5|18|19|1A|A|$1B|1I]]|1J|$5|18|19|1A|A|$1B|1K]]]]

I tend to look at common design patterns for inspiration when I'm pondering problems such as this.

The <a href="http://developer.yahoo.com/ypatterns/" rel="noreferrer">Yahoo Pattern Library</a> offers <a href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=calendar" rel="noreferrer">some potential solutions</a>. 

The <a href="http://ui-patterns.com" rel="noreferrer">UI Patterns site</a> also <a href="http://ui-patterns.com/pattern/StructuredFormat" rel="noreferrer">give some suggestions</a>, and is worth a browse.

For good measure, here's <a href="http://www.welie.com/patterns/showPattern.php?patternID=date-selector" rel="noreferrer">another solution at the Welie pattern library</a>.

Another source of inspiration might be other sites and applications. For example, think of all the use-cases where recording short and long time time durations is required. As an example, company TimeSheet recording, company car mileage log software, task recording software, stopwatch applications, calendaring apps, etc. Then see how they've handled the GUI controls for capturing time ranges. 

I haven't personally found a favourite solution for picking date and time. But, I think I'd want something like this.

<ul>
<li>User clicks to show calendar popup</li>
<li>Popup shows 2 side-by-side calendars (start date/time and end date/time)</li>
<li>Calendar 1 shows todays date, and the other also shows todays date.</li>
<li>Calendar controls allow usual navigation and selection of day month year.</li>
<li>Below each calendar is a hh:mm box, which defaults to the current time.</li>
<li>User can edit value in this time box using up/down arrows or by typing. </li>
<li>Alternatively, show an analogue clock below each calendar. It takes 2 mouse clicks to set time( click 1 for hour and click 2 for minutes).</li>
</ul>

Hope this helps

blocks|key|359768|text|用户界面设计很大程度上依赖于应用程序。“最佳”意味着某种可以衡量解决方案的指标。在UI设计中，这样的指标可以是“点击/按键次数多，完成任务需要多少时间？”其中数字越小越好。因此，一旦你定义了你的指标，你就可以开始将解决方案分成好的、更好的和最好的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359769|您还希望减轻用户的认知负担。如果用户必须根据90天的退货政策输入产品可以更换的最后一天，那么要求开始和结束日期将迫使他们进行日期计算，这并不有趣。在这个例子中，带有x天的“增量”的开始日期会给用户带来更少的负担。|359770|根据您的应用程序，您可以在图表上考虑和采用类似于Google+Finance时间范围选择器的方法：http://finance.google.com/finance?q=.dji|offset|length|359771|entityMap|0|LINK|mutability|MUTABLE|url|http://finance.google.com/finance?q=.dji^0|0|0|1D|14|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

User interface design is heavily application dependent. "Best" implies some kind of metric that can measure solutions. In UI design such a metric can be "home many clicks/key-presses does it take to complete the task?" where a smaller number is better. So once you've defined your metric you can start to sort solutions into good, better and best.

You also want to reduce cognitive burden for the user. If the user has to enter the final day on which a product can be exchanged based on a 90-day return policy then asking for start and end date would force them to do date math which is no fun. In this example a start date with a "delta" of x days would place less of a burden on the user.

Depending on you application you could consider and approach like the Google Finance time range selector on their charts: <a href="http://finance.google.com/finance?q=.dji" rel="nofollow noreferrer">http://finance.google.com/finance?q=.dji</a>

blocks|key|359780|text|查看VisualHint+日期控件。它可以通过多种方式进行配置，包括timespan。这将允许您使用一个控件实例来显示开始时间，并使用另一个控件实例来设置时间跨度，直到周期结束。该控件还支持可扩展的基本框架，因此您可以将开始/结束或开始/跨度合并到单个控件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|359781|entityMap|0|LINK|mutability|MUTABLE|url|http://www.visualhint.com/index.php/fieldpackeditor/^0|2|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Check out the <a href="http://www.visualhint.com/index.php/fieldpackeditor/" rel="nofollow noreferrer">VisualHint </a> date control. It can be configured a multitude of ways including a timespan. This would allow you to use one control instance to show the start time and another to set the timespan until the period is complete. The control also supports an extensible base framework so you could possibly combine both start/end or start/span into a single control.

blocks|key|3148743|text|我是一个老式控件的粉丝，早在90年代，我就看到Inventor+(后来的Open+Inventor)在SGI机器(然后是PC等)上使用:无限拨号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3148744|一些屏幕截图，有点偏小，是here。当然，它已经在各种平台上完成了，包括在iphone上类似的事情。|offset|length|3148745|我认为日期/时间选择器可以很好地使用两个刻度盘，每个刻度盘代表日期/时间大小的顺序。在ASCII艺术中，方括号中的每个刻度盘可能看起来如下所示：|3148746|[20+Oct+%7C+21+OCT+%7C+22+Oct+]+[11:15+..+11:30+..+11:45..]|code-block|syntax|javascript|3148747|或使用3：|3148748|[20+Oct+%7C+21+OCT+%7C+22+Oct+]+[11+..+12+..+1pm]+[12:31+..+12:32+..+12:33]|3148749|你可以尝试许多变化(垂直/水平，日期/时间，日期/小时/分钟等)。|3148750|刻度盘虽然很少使用，但对于人类来说是一种自然的交互方式，而且它的无限旋转选项(不像幻灯片总是必须停止)非常适合日期/时间。|3148751|FWIW|3148752|entityMap|0|LINK|mutability|MUTABLE|url|http://www.wheatchex.com/projects/graphics/07_inventor/man.jpg|1|http://ipod.about.com/od/iphoneinterfacegallery/ig/iPhone-Gallery--Widgets/iPhone-Widgets--Timer.htm^0|0|D|4|0|11|6|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]|$D|1B|E|1C|1|1D]]|A|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

I am a fan of an old control I saw used WAY back in the 90's with Inventor (and later Open Inventor) on SGI machines (and then on PCs, etc): an infinite dial.

Some screenshots, a little on the small side, are <a href="http://www.wheatchex.com/projects/graphics/07_inventor/man.jpg" rel="nofollow noreferrer">here</a>. Course, its been done on a variety of platforms since, including similar things on the <a href="http://ipod.about.com/od/iphoneinterfacegallery/ig/iPhone-Gallery--Widgets/iPhone-Widgets--Timer.htm" rel="nofollow noreferrer">iphone</a>.

I think a date/time picker would work well with two dials, each representing an order of date/time magnitude. In ASCII art, with each dial between [square brackets] it might look like:

<pre><code>[20 Oct | 21 OCT | 22 Oct ] [11:15 .. 11:30 .. 11:45..]
</code></pre>

or with 3:

<pre><code>[20 Oct | 21 OCT | 22 Oct ] [11 .. 12 .. 1pm] [12:31 .. 12:32 .. 12:33]
</code></pre>

There are a number of variations you could try (vertical/horizontal, date/time, date/hour/minute, etc).

Dials, though somewhat rarely used, are a natural device for humans to interact with, and their infinite rotation option (unlike a slide which must always stop) suits dates/times well. 

FWIW

blocks|key|360600|text|这里也有一些解决方案：http://quince.infragistics.com/html/PatternView.aspx?name=Date%2BTime%2BRange%2BInput|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|360601|entityMap|0|LINK|mutability|MUTABLE|url|http://quince.infragistics.com/html/PatternView.aspx?name=Date%2BTime%2BRange%2BInput^0|B|27|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Here are also some solutions: <a href="http://quince.infragistics.com/html/PatternView.aspx?name=Date+Time+Range+Input" rel="nofollow">http://quince.infragistics.com/html/PatternView.aspx?name=Date+Time+Range+Input</a>

blocks|key|359870|text|这来得太晚了，而且它本身也不是一个控件。我在一个我再也找不到的博客上读到了这个想法(事实上，我是在试图找到它的过程中找到这篇文章的)。这个想法是用挂钟的比喻。这是我为了好玩而实现的东西。它不是一个功能控件。您可以使用类似于此的内容作为自然捕获时间的起点。最多点击三次，大多数时候是两次。只有刻度盘才能接近。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359871|http://www.viridium.ro/clock-sample/|offset|length|359872|使用支持HTML5的浏览器；即Chrome。|359873|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|10|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

This comes in late, and it's not a control per se. I read this idea on a blog I can't find anymore (in fact, I found this post while trying to find it). The idea is to use the metaphor of a wall clock. Here's what I implemented for the fun of it. It's not a functional control. You could use something like this as a starting point for capturing times naturally. Three clicks at most, two most of the time. Only dials come close.

<a href="http://www.viridium.ro/clock-sample/" rel="nofollow">http://www.viridium.ro/clock-sample/</a>

Use a HTML5-aware browser; that is, Chrome.

I need to let end users specify a time range, to be stored and used internally as a starting date/time and ending date/time. The range could be minutes or it could be days.

Has anyone discovered an interactive control that can handle this elegantly?

Most GUI toolkits have a calendar control, so I could specify "start" with a calendar for the day and a text field for the time...and the same for "end".

I could also replace the "end" controls with a single text field or slider that simply describes how many seconds/minutes/hours after start "end" is.

What I don't like about these ideas is how much clicking, typing, and more clicking is required to describe such a simple concept. Also I have to slap the user's hand if a time is typed in that isn't recognizable as a time.

Is there a cleaner implementation that I'm overlooking?

Best GUI control(s) to describe a time range

HTML5

我需要让最终用户指定一个时间范围，作为开始日期/时间和结束日期/时间在内部存储和使用。范围可以是分钟，也可以是天。有没有人发现了一种可以优雅地处理这种情况的交互式控件？大多数图形用户界面工具包都有一个日历控件，所以我可以指定"start“为当天的日历，并为time...and指定一个文本字段，与"end”相同。我也可以...

问描述时间范围的最佳GUI控件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问描述时间范围的最佳GUI控件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问描述时间范围的最佳GUI控件
EN