我有以下 html:
<div class="form-group">
@Html.LabelFor(x => x.StartDate)
@Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yyyy}", new { type = "text", @class = "flatpickrStart form-control", @id = "absenceStartDate", @Required = true })
@Html.ValidationMessageFor(x => x.StartDate, null, new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(x => x.EndDate)
@Html.TextBoxFor(m => m.EndDate, "{0:dd-MM-yyyy}", new { type = "text", @class = "flatpickrEnd form-control", @id = "absenceEndDate", @Required = true })
@Html.ValidationMessageFor(x => x.EndDate, null, new { @class = "text-danger" })
</div>
和脚本:
function InitializeDateTimePickers() {
$(".flatpickrStart, .flatpickrEnd").flatpickr({
dateFormat: "dd-MM-yyyy H:i:s",
enableTime: true,
weekNumbers: true,
altInput: true,
altFormat: "F j, Y - h:i",
time_24hr: true
});
}
以我的codepen为例: https://codepen.io/andrelange91/pen/YOgwaJ
选择工作正常,但是当我选择了一个值时, 我得到的价值在某些地方似乎是双倍的。
例如,我使用选择器选择此:2018 年 9 月 21 日 - 8:00 返回的值是这样的:2121-SepSep-18181818 08:00:0
我有办法获得正确的日期时间格式吗? 第一次使用这个插件,目前还没找到解决办法。
无需编写两次代码。只写一次
$(".flatpickrStart, .flatpickrEnd").flatpickr({
dateFormat: "d-M-y H:i:s", //change format also
enableTime: true,
weekNumbers: true,
altInput: true,
altFormat: "F j, Y - h:i",
time_24hr: true
});
你的问题将会得到解决。
工作片段:-
$(".flatpickrStart, .flatpickrEnd").flatpickr({
dateFormat: "d-M-y H:i:s",
enableTime: true,
weekNumbers: true,
altInput: true,
altFormat: "F j, Y - h:i",
time_24hr: true
});
$(".flatpickrEnd").on("change", function() {
$("#endValue").text($(this).val());
});
$(".flatpickrStart").on("change", function() {
$("#startValue").text($(this).val());
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="StartDate">Start Dato</label>
<input required="True" class="flatpickrStart form-control " id="absenceStartDate" name="StartDate" type="text" value="">
</div>
<div class="form-group">
<label for="EndDate">Slut Dato</label>
<input required="True" class="flatpickrEnd form-control" id="absenceEndDate" name="EndDate" type="text" value="">
</div>
</div>
<div class="col-6">
<h2>Selected values: </h2>
<p>start: <span id="startValue"></span></p>
<p>end: <span id="endValue"></span></p>
</div>
</div>
</div>
注意:我也更改了链接中的文本输出代码,也请检查一下。