Javascript/Jquery 日期选择器答案

【问题标题】：Javascript/Jquery date pickerJavascript/Jquery 日期选择器
【发布时间】：2009-09-07 20:51:54
【问题描述】：

我正在寻找一个简单的集成日期选择器对象，当有人专注于特定文本框时会触发该对象。当用户单击或关注文本框时，应弹出日期选择器界面，上面显示当前日期，用户可以轻松选择日期。完成后，文本框的日期应为 YYYY-MM-DD 格式（mysql 日期格式）。

这也应该可以使用 2 个文本框来选择开始和结束日期。

有什么想法吗？

【问题讨论】：

标签： javascript jquery datepicker

【解决方案1】：

你见过jquery UI的datepicker吗？它可以完成上述所有操作。

HTML

<input type="text" id="datepicker" size="30"/>

JavaScript

$('#datepicker').datepicker( { dateFormat: 'yy-mm-dd' } );

【讨论】：

【解决方案2】：

如果你想要“简单集成”，我谦虚地建议你试试我的 javascript 时间选择器，我希望你觉得它有用。它看起来像这样：

这里是链接：

【讨论】：

【解决方案3】：

你可以试试Zebra_Datepicker, a lightweight datepicker jQuery plugin

这是一个可以回答您两个问题的示例。假设您有两个文本框，一个带有开始日期，一个带有结束日期，如下所示：

<input type="text" name="start_date" id="start_date">
<input type="text" name="end_date" id="end_date">

现在，在您的 JavaScript 文件中，在您包含 jQuery、Zebra_Datepicker 及其关联的 CSS 文件之后，您将使用如下内容：

$(document).ready(function() {
    $('#start_date').Zebra_DatePicker({
        direction:  true,            // future-only calendar, starting today
        format:     'YYYY-MM-DD',    // the format you want
        pair:       $('#end_date')   // we pair the two elements
    });    
    $('#end_date').Zebra_DatePicker({
        direction:  true,            // future-only calendar, starting today
                                     // (unless a date is selected in the other
                                     // element when the date picker will become
                                     // future-only, starting that particular date)
        format:     'YYYY-MM-DD'     // the format you want
    });    
});

【讨论】：