js怎么实现滚动的时间选择器？

Question

如图。请问这种可以滚动选择的时间选择怎么实现呀，还有怎么取到选好的时间值判断他的星座和生肖呀，麻烦各位大佬上一下代码，十分感谢！

Answer 1

你好，用心一天时间 给你解答的。基于http://www.jq22.com/jquery-info10900 给你修改的，星座已经加上。这里不能传文件，我就全部加在一个 index文件里了，然而这里字符有限制，不能放么多，我就写在博客面了，专门为你这个回答写的。根据时间告诉星座！你直接复制过去就可以运行了。

希望采纳！

请移步：
Mobiscroll插件-根据时间选择弹出星座
https://blog.csdn.net/lllomh/article/details/90703262

Answer 2

http://www.jq22.com/jquery-info1732

Answer 3

http://www.jq22.com/jquery-info10900

http://www.jq22.com/jquery-info18357

Answer 4

<script type="text/javascript">
/* 生效的实现参考星座 */
// 星座对应的月份（自行百度）
var constellation = [
    {start: '1-21', end: '2-20', cst: '星座1'},
    {start: '2-21', end: '3-20', cst: '星座2'},
    {start: '3-21', end: '4-20', cst: '星座3'},
    {start: '4-21', end: '5-20', cst: '星座4'},
    {start: '5-21', end: '6-20', cst: '星座5'},
    {start: '6-21', end: '7-20', cst: '星座6'},
    {start: '7-21', end: '8-20', cst: '星座7'},
    {start: '8-21', end: '9-20', cst: '星座8'},
    {start: '9-21', end: '10-20', cst: '星座9'},
    {start: '10-21', end: '11-20', cst: '星座10'},
    {start: '11-21', end: '12-20', cst: '星座11'},
    {start: '12-21', end: '1-20', cst: '星座12'},
]

$(function(){
    // juqery日期选择插件
    $('#beginTime').date(null, function(data) {
        // data:选中的日期
        console.log(data)
        var year = data.split('-')[0]
        var selectDate = new Date(data)
        var curCst = constellation.find((item) => {
            var start = new Date(year + '-' + item.start)
            var end = new Date(year + '-' + item.end)
            return start <= selectDate && end >= selectDate
        }) || constellation[11]
        // curCst: 选中的日期对应的星座
        console.log(curCst)
    });

    $('#endTime').date({theme:"datetime"});

});


</script>