Javascript 如何将JQuery Datepicker月和年显示更改为下拉菜单？_Javascript_Html_Jquery_Css_Datepicker

Javascript 如何将JQuery Datepicker月和年显示更改为下拉菜单？

javascript html jquery css

Javascript 如何将JQuery Datepicker月和年显示更改为下拉菜单？,javascript,html,jquery,css,datepicker,Javascript,Html,Jquery,Css,Datepicker,我刚刚开始在JQuery中进行一个日历项目，在那里我可以在想象的事件中选择约会，而且我想将当前年份和月份选择菜单从当前表单更改为下拉选择菜单，因为我想使日期之间的转换更容易，以便更容易找到喜欢的约会我希望实现的目标示例：我的问题是我怎样才能改变它 body { background: #20262E; padding: 20px; font-family: Helvetica; } .popover { left: 5% !important; top: 120%

我刚刚开始在JQuery中进行一个日历项目，在那里我可以在想象的事件中选择约会，而且我想将当前年份和月份选择菜单从当前表单更改为下拉选择菜单，因为我想使日期之间的转换更容易，以便更容易找到喜欢的约会

我希望实现的目标示例：

我的问题是我怎样才能改变它

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}


.popover
{
  left: 5% !important;
  top: 120% !important;
}


.btn 
{
    margin: 1%;
}


#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}


.popover button{
  background: #f48024;
}

.popover button:hover{
  background:#fcb67c;
}

.popover button:focus{
  background: #052049;
}

.popover button:focus:active{
  background: #052049;
}

.arrow {
  
  visibility: hidden;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}





<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>

</head>

<body>

    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>

<script>

$('.date-picker-2').popover({
    html : true, 
    
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }

});

$(".date-picker-2").datepicker({
 minDate: new Date(),
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Available Appointments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});

</script> 
</body>
</html>

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
波弗先生
{
左：5%！重要；
排名：120%！重要；
}
.btn
{
利润率：1%；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}
.popover按钮{
背景#f48024；
}
.popover按钮：悬停{
背景#fcb67c；
}
.popover按钮：焦点{
背景：#052049；
}
.popover按钮：焦点：活动{
背景：#052049；
}
.阿罗{
可见性：隐藏；
}
.ui状态突出显示.ui小部件内容.ui状态突出显示.ui小部件标题.ui状态突出显示{
边框：1px实心#dad55e；
背景#fffa90；
颜色：#777620；
}
$（'.date-picker-2'）.popover({
是的，
内容：函数（）{
返回$（“#example-popover-2-content”）.html（）；
},
标题：函数（）{
返回$（“#example-popover-2-title”）.html（）；
}
});
$（“.date-picker-2”）.datepicker({
minDate:新日期（），
onSelect:函数（日期文本）{
$（'#example-popover-2-title'）.html（“可用约会”）；
var html='8:00 am–9:00 am
10:00 am–12:00 pm
12:00 pm–2:00 pm'；
$（'example-popover-2-content'）.html（'Available times'+dateText+'
'+html）；
$（'.date-picker-2'）.popover（'show'）；
}
});

我在日期选择器中添加了以下行：变化月：对，变化年：是的

$(".date-picker-2").datepicker({
     minDate: new Date(),
     changeMonth: true,
     changeYear: true,
        onSelect: function(dateText) { 
            $('#example-popover-2-title').html('<b>Available Appointments</b>');
            var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
            $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
            $('.date-picker-2').popover('show');
        }
    });

$（.date-picker-2”）.datepicker({
minDate:新日期（），
变化月：对，
变化年：是的，
onSelect:函数（日期文本）{
$（'#example-popover-2-title'）.html（“可用约会”）；
var html='8:00 am–9:00 am
10:00 am–12:00 pm
12:00 pm–2:00 pm'；
$（'example-popover-2-content'）.html（'Available times'+dateText+'
'+html）；
$（'.date-picker-2'）.popover（'show'）；
}
});