Bootstrap-datepicker inline 以短格式获取点击日期
Bootstrap-datepicker inline get Date on click in short format
我是初学者,正在尝试 Bootstrap-Datepicker. I am using it embedded/inline like in this Demo。
它有效,但我希望在单击日期时将所选日期显示在 label/textbox 等中。到目前为止,我只在点击一个按钮后得到了日期,但更糟糕的是它是一条巨大的线,比如
Thu Mar 30.2017 00:00:00 GMT +100 (Mitteleuropäische Zeit)
。
我想要它简单如 30.03.2017
或 30. Mar.2017
.
我该怎么办?
PS。前 2 个解决方案有效,但会返回长线。其他 2 个回馈 undefined
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Date-Picker Plugin -->
<script src="js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datepicker3.css"/>
</head>
<body>
<div id="pickyDate"> </div>
<div>
<input type="text" placeholder="Date shown here" id="showDate"/
</div>
<!-- Testing here -->
<div>
<button type="button" class="btn btn-danger" onClick="showTestDate()">Danger Button</button>
<span class="label label-danger" id="DateTest">Danger Label</span>
<span class="label label-info" id="lbl2">Info Label</span>
<span class="label label-info" id="lbl3">Info Label</span>
</div>
<script>
$(document).ready(function(){
$('#pickyDate').datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
language: "de",
daysOfWeekDisabled: "0,6",
daysOfWeekHighlighted: "4",
todayHighlight: true,
});
})
/* Need it in Format dd mm yyyy */
function showTestDate(){
/** works but output is too long */
var datelist = $('#pickyDate').datepicker('getDate');
document.getElementById("DateTest").innerText = datelist;
var valueDate = $("#pickyDate").datepicker("getDate");
document.getElementById("showDate").value = valueDate;
/** works not 'undefined' */
var ndate = $("#pickyDate").data("datepicker").date;
document.getElementById("lbl2").innerText = ndate;
var myDate=window.document.getElementById("pickyDate").value;
document.getElementById("lbl3").innerText=myDate;
}
</script>
</body>
</html>
更改
format: "dd/mm/yyyy",
在你的脚本中
format: "dd-M-yyyy"
这是有效的 jsFiddle Date Picker Format
希望能满足您的要求。
您必须使用 datepicker('getFormattedDate')
而不是 datepicker('getDate')
。 getDate
返回一个 JavaScript 日期对象,它将在问题中以长格式 mentionend 显示。
将 format
选项更改为 dd.mm.yyyy
以获取带有数字月份的日期或更改为 dd-M-yyyy
以获取缩写的月份名称。
当您选择一个日期时,changeDate
事件会被触发,因此您可以附加一个监听器来更新您的输入、标签等。
这是一个工作示例:
$('#pickyDate').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de",
daysOfWeekDisabled: "0,6",
daysOfWeekHighlighted: "4",
todayHighlight: true,
}).on('changeDate', showTestDate);
function showTestDate(){
var value = $('#pickyDate').datepicker('getFormattedDate');
$("#showDate").val(value);
$("#DateTest").html(value);
$("#lbl2").html(value);
$("#lbl3").html(value);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>
<div id="pickyDate"></div>
<div>
<input type="text" placeholder="Date shown here" id="showDate"/>
</div>
<!-- Testing here -->
<div>
<button type="button" class="btn btn-danger" onClick="showTestDate()">Get date</button>
<span class="label label-danger" id="DateTest">Danger Label</span>
<span class="label label-info" id="lbl2">Info Label</span>
<span class="label label-info" id="lbl3">Info Label</span>
</div>
我是初学者,正在尝试 Bootstrap-Datepicker. I am using it embedded/inline like in this Demo。
它有效,但我希望在单击日期时将所选日期显示在 label/textbox 等中。到目前为止,我只在点击一个按钮后得到了日期,但更糟糕的是它是一条巨大的线,比如
Thu Mar 30.2017 00:00:00 GMT +100 (Mitteleuropäische Zeit)
。
我想要它简单如 30.03.2017
或 30. Mar.2017
.
我该怎么办?
PS。前 2 个解决方案有效,但会返回长线。其他 2 个回馈 undefined
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Date-Picker Plugin -->
<script src="js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datepicker3.css"/>
</head>
<body>
<div id="pickyDate"> </div>
<div>
<input type="text" placeholder="Date shown here" id="showDate"/
</div>
<!-- Testing here -->
<div>
<button type="button" class="btn btn-danger" onClick="showTestDate()">Danger Button</button>
<span class="label label-danger" id="DateTest">Danger Label</span>
<span class="label label-info" id="lbl2">Info Label</span>
<span class="label label-info" id="lbl3">Info Label</span>
</div>
<script>
$(document).ready(function(){
$('#pickyDate').datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
language: "de",
daysOfWeekDisabled: "0,6",
daysOfWeekHighlighted: "4",
todayHighlight: true,
});
})
/* Need it in Format dd mm yyyy */
function showTestDate(){
/** works but output is too long */
var datelist = $('#pickyDate').datepicker('getDate');
document.getElementById("DateTest").innerText = datelist;
var valueDate = $("#pickyDate").datepicker("getDate");
document.getElementById("showDate").value = valueDate;
/** works not 'undefined' */
var ndate = $("#pickyDate").data("datepicker").date;
document.getElementById("lbl2").innerText = ndate;
var myDate=window.document.getElementById("pickyDate").value;
document.getElementById("lbl3").innerText=myDate;
}
</script>
</body>
</html>
更改
format: "dd/mm/yyyy",
在你的脚本中
format: "dd-M-yyyy"
这是有效的 jsFiddle Date Picker Format
希望能满足您的要求。
您必须使用 datepicker('getFormattedDate')
而不是 datepicker('getDate')
。 getDate
返回一个 JavaScript 日期对象,它将在问题中以长格式 mentionend 显示。
将 format
选项更改为 dd.mm.yyyy
以获取带有数字月份的日期或更改为 dd-M-yyyy
以获取缩写的月份名称。
当您选择一个日期时,changeDate
事件会被触发,因此您可以附加一个监听器来更新您的输入、标签等。
这是一个工作示例:
$('#pickyDate').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de",
daysOfWeekDisabled: "0,6",
daysOfWeekHighlighted: "4",
todayHighlight: true,
}).on('changeDate', showTestDate);
function showTestDate(){
var value = $('#pickyDate').datepicker('getFormattedDate');
$("#showDate").val(value);
$("#DateTest").html(value);
$("#lbl2").html(value);
$("#lbl3").html(value);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>
<div id="pickyDate"></div>
<div>
<input type="text" placeholder="Date shown here" id="showDate"/>
</div>
<!-- Testing here -->
<div>
<button type="button" class="btn btn-danger" onClick="showTestDate()">Get date</button>
<span class="label label-danger" id="DateTest">Danger Label</span>
<span class="label label-info" id="lbl2">Info Label</span>
<span class="label label-info" id="lbl3">Info Label</span>
</div>