jQuery - 移动日期选择器控件

发布于 2024-10-30 13:14:21 字数 1536 浏览 2 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

夜清冷一曲。 2024-11-06 13:14:21

这里有一些很好的功能:

http://dev.jtsage.com/jQM-DateBox/

Here's one that has some good capabilities:

http://dev.jtsage.com/jQM-DateBox/

深居我梦 2024-11-06 13:14:21

有一个实验日历。我使用成功了。

看看这里:
http://jquerymobile.com/test/experiments/ui-datepicker/

There is an experimental calendar. I used it successfully.

Take a look here:
http://jquerymobile.com/test/experiments/ui-datepicker/

雨轻弹 2024-11-06 13:14:21

我正在开发 PhoneGap 应用程序以及我需要日期选择器/日历功能的位置:

基本上在您的页面上添加algon 以及 jQuery Mobile 的 CSS 和 JavaScript 代码:

<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />

<div data-role="content">
    <input name="myminutesdate" id="myminutesdate" type="date" data-role="datebox"
           data-options='{"mode": "calbox","dateFormat":"%m/%d/%Y","calUsePickers": true, "calNoHeader": true,"highDates": ["2012-12-07" , "2012-07-12"] }' ></input>

最重要的是:

$("#minutesPage").live('pageshow',function(event) {
    var today = new Date();

    var date = today.getDate();
    var month = (today.getMonth()+1);
    var year = today.getFullYear();

    var todayStr = month+"/"+date+"/"+year;
    $('#myminutesdate').trigger('datebox', {'method':'set', 'value':todayStr});
});

另外,如果您不想弹出窗口,您可以将其设为静态。

I am developing a PhoneGap application and where I need datepicker/calender capabilities:

Basically on your page you add algon with CSS and JavaScript code for jQuery Mobile:

<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />

<div data-role="content">
    <input name="myminutesdate" id="myminutesdate" type="date" data-role="datebox"
           data-options='{"mode": "calbox","dateFormat":"%m/%d/%Y","calUsePickers": true, "calNoHeader": true,"highDates": ["2012-12-07" , "2012-07-12"] }' ></input>

Most importantly:

$("#minutesPage").live('pageshow',function(event) {
    var today = new Date();

    var date = today.getDate();
    var month = (today.getMonth()+1);
    var year = today.getFullYear();

    var todayStr = month+"/"+date+"/"+year;
    $('#myminutesdate').trigger('datebox', {'method':'set', 'value':todayStr});
});

Also, if you don't want a popup, you can make it static.

温柔女人霸气范 2024-11-06 13:14:21

对于日历视图,请查看日历控件

它可以使用或不使用日期和时间旋转器(仅可以使用日历)。如果您正在寻找的话,它还集成了 jQuery Mobile 主题。

For a calendar view take a look at the Calendar Control

It works with or without date and time spinners (calendar only is possible). It also integrates with jQuery Mobile Themes, if you're looking for that.

柠栀 2024-11-06 13:14:21

当我搜索在移动设备上使用的日期选择器时,我找到了一个(通过 stackoverflow:https://stackoverflow.com/ a/3023446/2100636),适用于 jQuery 和 ui 主题。我将这个问题添加为答案,因为它植根于功能的理念,因此可能值得考虑。它具有我在其他选择器中没有看到的选项,我认为我可以很好地将它融入到响应式/移动设计中。如果我最终使用它,我会更新我的进度。

从他们的网站 http://www.ama3.com/anytime/ 中,以下描述总结它比我能做得更好。它还获得知识共享许可。

首先,请看一下这些日期/时间替代方案:

12-hour or 24-hour clock
custom date/time format (countless possibilities, including JSON and XML)
date-only, time-only, or specific fields!
date/time range limits
era-selection (BCE/CE, BC/AD, etc.)
start week on any day (Sunday, Monday, etc.)
custom base for 2-digit years (1900, 2000, etc.)
UTC offsets and time zones

然后看看这些造型选择:

custom labels/languages
custom CSS styles
jQuery UI Theming
jQuery UI Theme Switcher
jQuery ThemeRoller
pop-up or always-present picker
visible or hidden field

它也是程序员友好的:

easy to implement
easy AJAX validation
easy Date/String conversion, including JSON and XML
create multiple pickers at once
easy removal 
easy to extend

我们不要忘记这些可用性特征:

single-click value selection
double-click select-and-dismiss
WAI-ARIA 1.0 keyboard accessibility
em-based relative-size

While I was searching for a date picker to use on a mobile devices, I found one (via stackoverflow: https://stackoverflow.com/a/3023446/2100636) that works with jQuery and ui theming. I am adding this one as an answer because it may be good to consider because it's rooted in the idea of functionality. It has options I didn't see with other pickers, and I think I can incorporate it into a responsive/mobile design pretty well. I'll update with my progress if I end up using it.

From their website, http://www.ama3.com/anytime/, the description below sums it up better than I can. It's also licensed under Creative Commons.

For starters, take a look at these DATE/TIME ALTERNATIVES:

12-hour or 24-hour clock
custom date/time format (countless possibilities, including JSON and XML)
date-only, time-only, or specific fields!
date/time range limits
era-selection (BCE/CE, BC/AD, etc.)
start week on any day (Sunday, Monday, etc.)
custom base for 2-digit years (1900, 2000, etc.)
UTC offsets and time zones

Then peep these STYLING CHOICES:

custom labels/languages
custom CSS styles
jQuery UI Theming
jQuery UI Theme Switcher
jQuery ThemeRoller
pop-up or always-present picker
visible or hidden field

It's also PROGRAMMER-FRIENDLY:

easy to implement
easy AJAX validation
easy Date/String conversion, including JSON and XML
create multiple pickers at once
easy removal 
easy to extend

And let's not forget those USABILITY FEATURES:

single-click value selection
double-click select-and-dismiss
WAI-ARIA 1.0 keyboard accessibility
em-based relative-size
一张白纸 2024-11-06 13:14:21

http://dev.jtsage.com/jQM-DateBox/

DateBox 非常整洁,对于那些仍在寻找的人来说效果很好。

http://dev.jtsage.com/jQM-DateBox/

The DateBox is very neat and works well for those still looking.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文