javascript - jQuery 日期选择器 : Convert select dropdown into ul

coder 2023-08-06 原文

我正在使用 jquery-ui datepicker 组件，但是 month 和 year 下拉列表是 select 标签。

我需要以 select 元素无法实现的方式设置它们的样式，因此我想将它们转换为 ul 元素。

任何帮助将不胜感激 - 这是一个带有 jquery-ui datepicker 的入门 jsFiddle https://jsfiddle.net/GeekOnGadgets/wra3pcsv/

最佳答案

以下代码可能对您有所帮助。你可以在这个 jsFiddle 中看到结果.

// Replace a select element by a ul element
var convertToList = function (inst, className) {
    var $selectElement = inst.dpDiv.find('.' + className);
    var $listElement = $('<ul class="{0} dateList"></ul>'.replace('{0}', className + '-list')).appendTo($selectElement.parent());
    $selectElement.children(' option').each(function () {
        // Replace each option of the select element by a li element
        $listElement.append('<li class="dateListItem" value="{0}">{1}</li>'.replace('{0}', $(this).val()).replace('{1}', $(this).text()));
    });
    $listElement.find('.dateListItem').click(function () {
        // When an item is clicked, set the corresponding value in
        // the original select element and trigger the change event
        $selectElement.val($(this).val());
        $selectElement.change();
    }).each(function () {
        // Add the selectedValue class to the selected item
        if ($(this).val() == $selectElement.val()) {
            $(this).addClass('selectedValue');
        }
    });
};

// Replace the month and year select elements
var convertToDatePickerWithLists = function (inst) {
    setTimeout(function () {
        inst.dpDiv.addClass('datePickerWithLists');
        convertToList(inst, 'ui-datepicker-month');
        convertToList(inst, 'ui-datepicker-year');
    }, 0);
};

// Associate the datepicker to the text input element
$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    beforeShow: function (input, inst) {
        // Modify the datepicker when it is initially displayed
        convertToDatePickerWithLists(inst);
    },
    onChangeMonthYear: function (year, month, inst) {
        // Modify the datepicker every time the month/year is changed
        convertToDatePickerWithLists(inst);
    }
});

以下是各种类的 CSS 样式:

.datePickerWithLists .ui-datepicker-year,
.datePickerWithLists .ui-datepicker-month
{
    display: none; /* Hide the original select elements */
}

.datePickerWithLists .ui-datepicker-header
{
    height: 20em;
    background: #D0D0D0;
}

.dateList
{
    display: inline-block;
    list-style: none;
    font-size: 12px;
    vertical-align: top;
    margin: 0px;
    padding: 8px 0px 0px 0px;
    text-align: center;
    width: 40%;
}

.dateListItem
{
    line-height: 1.4em;
    cursor: pointer;
}

.dateListItem.selectedValue
{
    background-color: black;
    color: white;
}

更新

在讨论了GeekOnGadgets的具体需求后，对代码和样式进行了适配，如图this jsfiddle所示。 .

关于javascript - jQuery 日期选择器 : Convert select dropdown into ul，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39383140/

javascript dropdown datepicker 39 code jquery html css

有关javascript - jQuery 日期选择器 : Convert select dropdown into ul的更多相关文章

ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2
我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。最佳答案我不太明白你的问题。我假设您想检查
ruby - 检查日期是否在过去 7 天内 - 2
我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？最佳答案你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/
ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2
这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build
ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
ruby - Rails 3 的 RGB 颜色选择器 - 2
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。最佳答案也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
ruby-on-rails - ruby 日期方程不返回预期的真值 - 2
为什么以下不同？Time.now.end_of_day==Time.now.end_of_day-0.days#falseTime.now.end_of_day.to_s==Time.now.end_of_day-0.days.to_s#true 最佳答案因为纳秒数不同:ruby-1.9.2-p180:014>(Time.now.end_of_day-0.days).nsec=>999999000ruby-1.9.2-p180:015>Time.now.end_of_day.nsec=>999999998
ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
sql - 查询忽略时间戳日期的时间范围 - 2
我正在尝试查询我的Rails数据库(Postgres)中的购买表，我想查询时间范围。例如，我想知道在所有日期的下午2点到3点之间进行了多少次购买。此表中有一个created_at列，但我不知道如何在不搜索特定日期的情况下完成此操作。我试过:Purchases.where("created_atBETWEEN?and?",Time.now-1.hour,Time.now)但这最终只会搜索今天与那些时间的日期。最佳答案您需要使用PostgreSQL'sdate_part/extractfunction从created_at中提取小时

javascript - jQuery 日期选择器 : Convert select dropdown into ul

有关javascript - jQuery 日期选择器 : Convert select dropdown into ul的更多相关文章

随机推荐