Question

我正在使用bootstrap日期时间选择器来选择一年。从选择列的表格中，我使用所选年份更新日期时间选择器。选择器显示所选项目的正确日期，但是当想要更改日期时，当年份超出之前显示的年份范围时，它无法显示年份选择器中的选定值。关闭它并再次打开它时，现在选择了年份。

例如，如果我选择2015年第一次和2016年之后，它可以正常工作，因为它在显示年份值的相同范围内。当我下次选择例如2001时，没有选择任何内容。然后关闭并再次打开将选择它。

我附加了一些代码，但是为了运行代码片段，“bootstrap-datetimepicker.js”CDN需要替换为修改了一个问题的编辑版本，在关闭年视图并再次打开之后它将恢复为日视图。（见https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1850）

我在代码中通过在第937行注释掉'currentViewMode = 0'来修复此问题，但无法发布代码，因为这会超出允许的字符数限制。

首次使用应用程序并点击选择器时，它会选择当前年份：

从表格中选择另一年并打开具有更新年份的年份选择器时，如果它在值范围内，则会正确选择它：

但是，当选择不在同一范围内的年份时，打开拣货员时，不会选择任何内容：

然而，当关闭视图时（不点击任何年份或其他任何内容，只需单击视图外部以关闭它）并再次打开它，现在选择正确的年份（并正确更新年份范围）：

$(function () {

    var table = $("#test-table")
        .DataTable(
        {
            "pagingType": "full_numbers",
            "order": [[0, "desc"]],
            "searching": false,
            "paginate": false
        });


    $("#test-table tbody")
        .on("click",
            "tr",
            function () {

                if ($(this).hasClass("selected")) {

                    $(this).removeClass("selected").removeClass("selected");
                } else {

                    table.$("tr.selected").removeClass("selected").removeClass("selected");


                    var date = this.getElementsByClassName("date-value")[0].innerText;
                    var item1 = this.getElementsByClassName("item1-value")[0].innerText;

                    var dateArr = date.split(" ");
                    var year = dateArr[1];
                    var month = getMonth(dateArr[0]);
                    var day = new Date(year, month, 0).getDate();                   

                    var m = moment(day + "." + (Number(month)) + "." + year, ["DD.MM.YYYY", "DD.MM.YYYY"]);
                    $("#yearPicker").data("DateTimePicker").date(m);

                    $("#Item1Val").val(item1);
                    $(this).addClass("selected").siblings();

                }
            });

    function getMonth(strMonth) {
        var months = [
            "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
            "November", "December"
        ];

        return months.indexOf(strMonth) + 1;


    }

    $("#button")
        .click(function () {

            table.row(".selected").remove().draw(false);
        });


    var decDate = new Date(new Date().getFullYear(), 11, 31);
    $("#yearPicker")
        .datetimepicker({
            viewMode: "years",
            format: "YYYY",
            defaultDate: decDate

        });


    $(function () {
        $("#yearPicker")
            .datetimepicker({
                defaultDate: new Date()
            })
            .on("dp.change",
                function () {
                    table.$("tr.selected").removeClass("selected");
                    $(this).addClass("selected").siblings().removeClass("selected");
                    $("#Item1Val").val(0);
                });

    });

});

.datepicker {
    z-index: 1030;
}

.calendar-icon {
    width: inherit;
}

.table-striped tbody tr.selected td {
    background-color: #b0bed9
}

.alert-error {
    float: right;
    background-color: #fcf8e3;
    color: #b54f4f;
    font-weight: bold;
    font-size: 1.2em;
    border: solid 2px #efc4c4;
    padding: 1.2em;
    border-radius: 1em;
    border-top-right-radius: 0;
    margin: 1.5em;
    margin-right: 15em;
    width: 50%;
}

.alert-error ul {
    list-style-type: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker-standalone.min.css"></script>



<div class="container-fluid">
    <div id="home-page" class="row">
        <br/>
        <div class="test-data">
            <table id="test-table" class="table table-striped">
                <thead>
                <tr><th class="date-col">Date</th><td>Values</td></tr>
                </thead>
                <tbody>
                        <tr>
                            <td>
                                <div class="date-value">
                                    <span class="hidden">2002</span>December 2002
                                </div>
                            </td>
                            <td>
                                <div class="test-values">
                                    <div class="hidden">
                                        44
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6 col-md-4">Item</div>
                                        <div class="col-lg-6 col-md-8 item1-value">44</div>
                                    </div>                                   
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <div class="date-value">
                                    <span class="hidden">2004</span>December 2004
                                </div>
                            </td>
                            <td>
                                <div class="test-values">
                                    <div class="hidden">
                                        4
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6 col-md-4">Item</div>
                                        <div class="col-lg-6 col-md-8 item1-value">4</div>
                                    </div>                                   
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <div class="date-value">
                                    <span class="hidden">2012</span>December 2012
                                </div>
                            </td>
                            <td>
                                <div class="test-values">
                                    <div class="hidden">
                                        0
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6 col-md-4">Item</div>
                                        <div class="col-lg-6 col-md-8 item1-value">0</div>
                                    </div>                                   
                                </div>
                            </td>

                        </tr>
                </tbody>

            </table>
        </div>
		<form action="/Home/AddChartData" method="post">            
			<div class="row">
				<br/>
				<div class="col-md-4">
					<div class="form-group">

						<div class='input-group date' id="yearPicker">
							<input data-val="true" data-val-date="The field yearPicker must be a date." data-val-required="The yearPicker field is required." name="yearPicker" type="text" class="form-control">
							<span class="input-group-addon calendar-icon">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>

						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div id="test-update-form">
						<div class="row">
							<div class="col-lg-6">Item</div>
							<div class="col-lg-6"><input Value="0" class="form-control" data-val="true" data-val-number="The field Item1Val must be a number." data-val-required="The Item is required" id="Item1Val" max="100" min="0" name="Item1Val" step=".01" type="number" value="0" /></div>
						</div>
					</div>
				</div>						
			</div>
		</form>        
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js" integrity="sha256-I8vGZkA2jL0PptxyJBvewDVqNXcgIhcgeqi+GD/aw34=" crossorigin="anonymous"></script>

未正确选择年份的Bootstrap datetimepicker问题

0 个答案: