定制的日期选择

图片仅供参考： https://postimg.org/image/xdmqyc1kz/定制的日期选择

我不知道如何实现这一任务。我想过使用插件，但找不到符合我需要的插件。所以我开始尝试做我自己的。我只是无法弄清楚我将如何实现所需的功能。点击箭头将显示更多选项，点击一个选项将显示为蓝色字体。这是箭头滚动功能，我不明白从哪里开始。

$('#pay-period-date').click(function() { 
 
    $('#pay-period-dropdown').css('display', 'block'); 
 
});

#pay-period-dropdown { 
 
    display: none; 
 
    border-style: solid; 
 
    border-color: red; 
 
    width: 301px; 
 
    height: 208px; 
 
} 
 
#pay-period-date-select { 
 
    border-style: solid; 
 
    border-color: blue; 
 
    height: 100%; 
 
    width: 212px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#pay-period-year-select { 
 
    border-style: solid; 
 
    border-color: purple; 
 
    width: 77px; 
 
    height: 100%; 
 
    display: inline-block; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"><span id="pay-period-date">08/28/2016 - 09/03/16</span></a> 
 
<div id="pay-period-dropdown"> 
 
    <div id="pay-period-date-select"></div> 
 
    <div id="pay-period-year-select"></div> 
 
</div>

来源

2016-09-21 Spencer West

我无法评论，因为我没有50美誉还，但还是想等有以这种方式发布。

因此，基本上，您需要一个预定义的日期集合的下拉列表，与相同的表单元素相距1周，与每个集合相隔1天？

来源

2016-09-22 01:33:50 harryparkdotio

是的，代表支付期限。我只是有麻烦想出一个方法来设计这个。日期选择器和其他插件存在处理选择日期，但他们看起来不性感。所以，我的工作是创建类似的功能，但它看起来像提供的图片。我已经开始研究这些功能，但无法提供可靠的方法来完成任务。这里是我所在的地方。 https://jsfiddle.net/itsmespencer/v95webjg/12/ –

我明白点击功能上的箭头键不起作用，但我只是想介绍一下我的思考过程。同样以这种逻辑来说，它将证明是困难的，因为薪酬期可以无限延伸到过去，但只有4个未来。我想知道如何在可见的List Items之前找到最后一个隐藏的元素来显示该选项。如果这是有道理的，让我知道。 –

https://jsfiddle.net/itsmespencer/5080cycd/81/更新小提琴。 –

定制的日期选择

回答

相关问题