如何在 datetimepicker 上显示 3 个月？答案

【问题标题】：How can I have 3 months displayed on datetimepicker?如何在 datetimepicker 上显示 3 个月？
【发布时间】：2018-07-10 03:12:12
【问题描述】：

使用 datetimepicker，如何显示 3 个月？使用 datepicker 将使用 numberOfMonths: 3，如下所示：

$(".dateField").datepicker({
    format: 'yyyy-mm-dd hh:ii',
    todayBtn : true,
    numberOfMonths: 3, 
    showCurrentAtPos: 1
});

但是使用 datetimepicker 它不起作用：

$(".datetimeFields").datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    todayBtn : true,
    numberOfMonths: 3, 
    showCurrentAtPos: 1
});

【问题讨论】：

您使用的是哪个日期时间选择器？

标签： jquery datepicker datetimepicker

【解决方案1】：

此代码对我来说运行良好，显示 3 个月。

$(".datepicker").datepicker({
    showOn: 'button',
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    numberOfMonths: 3,
    showCurrentAtPos: 2,
    changeYear: true,
    autoclose: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<input type="text" class="datepicker" /><br/>
<style>
    .ui-datepicker {font-size:60%; }
</style>

或者你可以通过

解决您的日期时间问题，将此代码复制为 html 记事本并在浏览器上运行，您的问题已在此处解决，并将此解决方案标记为有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        </head>
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
        <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
        <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>


<body>
<div class="example-container">
        <p>Set the min/max date numerically:</p>
        <div>
            <input type="text" name="datetime1" id="datetime1" value="" />
        </div>                  

<script>
    $('#datetime1').datetimepicker({
      format: 'yyyy-mm-dd hh:ii',  
       numberOfMonths: 3

    });
</script>

    </div>  


    </body> 
</html>

【讨论】：