부트 스트랩 날짜 시간 선택기에서 시간 비활성화
PHP / HTML5 및 JavaScript로 만든 웹 애플리케이션에서 부트 스트랩 날짜 시간 선택기를 사용하고 있습니다. 나는 현재 여기에서 하나를 사용하고 있습니다 : http://tarruda.github.io/bootstrap-datetimepicker/
시간없이 컨트롤을 사용하면 작동하지 않습니다. 빈 텍스트 상자 만 표시됩니다.
날짜 시간 선택기에서 시간을 제거하고 싶습니다. 이에 대한 해결책이 있습니까?
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({ pickTime: false });
});
</script>
아래 스 니펫을 확인하십시오.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
// Bootstrap DateTimePicker v4
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
</div>
문서 및 기타 기능에 대한 자세한 내용은 http://eonasdan.github.io/bootstrap-datetimepicker/ 를 참조하십시오 . 작동합니다.
i18n 지원 업데이트
moment.js의 현지화 된 형식을 사용합니다.
L날짜 만LT시간 만L LT날짜 및 시간
moment.js 문서 ( https://momentjs.com/docs/#/displaying/format/ ) 에서 다른 현지화 된 형식을 참조하십시오.
나는 여기에 게시 된 모든 솔루션을 시도했지만 그중 어느 것도 나를 위해 일하지 않았습니다. 내 jQuery에서 다음 코드 줄을 사용하여 시간을 비활성화 할 수있었습니다.
$('#datetimepicker4').datetimepicker({
format: 'YYYY-MM-DD'
});
이렇게하면 형식이 날짜로만 설정되고 시간이 완전히 비활성화됩니다. 도움이 되었기를 바랍니다.
이것은 Eonasdan의 Bootstrap Datetimepicker입니다.
우선에 대한 id속성을 제공 한 <input>다음 <input>부모 컨테이너가 아닌 해당 항목에 대해 직접 datetimepicker를 초기화합니다 .
<div class="container">
<input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
$(function() {
// Bootstrap DateTimePicker v3
$('#datetimepicker').datetimepicker({
pickTime: false
});
// Bootstrap DateTimePicker v4
$('#datetimepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
v3의 경우 : Ck Maurya 의 답변과 반대 :
pickDate: false날짜를 비활성화하고 시간 만 선택할 수 있습니다.pickTime: false시간을 비활성화하고 원하는 날짜 만 선택할 수 있습니다.
v4의 경우 : Bootstrap Datetimepicker는 이제 형식을 사용하여 시간 구성 요소가 있는지 확인합니다. 시간 구성 요소가 없으면 시간을 선택할 수 없으며 시계 아이콘을 숨길 수 없습니다.
와의 업데이트로 인해 이것을 알아 내려고 시간을 보냈습니다 DateTimePicker. moment.js 문서를 기반으로 한 형식으로 입력 합니다 . 다른 답변이 보여준 것을 사용할 수 있습니다.
$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });
또는 moment.js가 제공하는 현지화 된 형식 중 일부를 사용하여 다음과 같이 날짜 만 수행 할 수도 있습니다.
$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });
이를 사용하면 로케일에 따라 시간 ( LT) 또는 날짜 ( L) 만 표시 할 수 있습니다. datetimepicker에 대한 문서는 moment.js형식을 통해 제공된 입력 (날짜 또는 시간 만)에 자동으로 적응한다는 것이 명확하지 않았습니다 . 이것이 여전히 찾고있는 사람들에게 도움이되기를 바랍니다.
$('#datetimepicker').datetimepicker({
minView: 2,
pickTime: false,
language: 'pt-BR'
});
Please try if it works for you as well
Initialize your datetimepicker like this
For disable time
$(document).ready(function(){
$('#dp3').datetimepicker({
pickTime: false
});
});
For disable date
$(document).ready(function(){
$('#dp3').datetimepicker({
pickDate: false
});
});
To disable both date and time
$(document).ready(function(){
$("#dp3").datetimepicker('disable');
});
please refer following documentation if you have any doubt
http://eonasdan.github.io/bootstrap-datetimepicker/#options
<div class="container">
<input type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
$(function() {
// trigger datepicker
$('#datetimepicker').datetimepicker({
pickTime: false,
minView: 2,
format: 'dd/mm/yyyy',
autoclose: true,
});
});
</script>
This shows only date:
$('#myDateTimePicker').datetimepicker({
format: 'dd.mm.yyyy',
minView: 2,
maxView: 4,
autoclose: true
});
More on the subject here
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years',
format: 'DD/MM/YYYY' /*Add this line to remove time format*/
});
});
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker({
format: 'YYYY/MM/DD'
});
});
</script>
The selector criteria is now an attribute the DIV tag.
examples are ...
data-date-format="dd MM yyyy"
data-date-format="dd MM yyyy - HH:ii p
data-date-format="hh:ii"
so the bootstrap example for dd mm yyyy is:-
<div class="input-group date form_date col-md-5" data-date=""
data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
..... etc ....
</div>
my Javascript settings are as follows:-
var picker_settings = {
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
};
$(datePickerId).datetimepicker(picker_settings);
You can see working examples of these if you download the bootstrap-datetimepicker-master file. There are sample folders each with an index.html.
Disable time in boostrap datetime picker...
$(document).ready(function () {
$('.timepicker').datetimepicker({
format: "dd-mm-yy",
});
});
Disable date in boostrap datetime picker...
$(document).ready(function () {
$('.timepicker').datetimepicker({
format: "HH:mm A",
});
});
your same code work's fine, just add some link reference
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({pickTime: false});
});
</script>
</body>
</html>
This allows to show time in input field but hides time picker button, which is second li element in accordion
.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
display: none;
}
For bootstrap 4 version this code working;
$('#payment-date-time-select').datetimepicker({
startView:2,
minView:2,
});
I know this is late, but the answer is simply removing "time" from the word, datetimepicker to change it to datepicker. You can format it with dateFormat.
jQuery( "#datetimepicker4" ).datepicker({
dateFormat: "MM dd, yy",
});
Here's the solution for you. It's very easy to just add code like this:
$('#datetimepicker4').datetimepicker({
pickTime: false
minview:2;(Please see here.)
});
$("#datetimepicker4").datepicker({
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
pickTime: false,
format: 'YYYY-MM-DD'
});
Not as put off time and language at a time I put this and not work
$(function () {
$('#datetimepicker2').datetimepicker({
locale: 'es',
pickTime: false
});
});
참고URL : https://stackoverflow.com/questions/23137720/disable-time-in-bootstrap-date-time-picker
'Programing' 카테고리의 다른 글
| .NET에서 정수로 목록을 채우는 더 쉬운 방법 (0) | 2020.08.31 |
|---|---|
| ActiveRecord.find (array_of_ids), 순서 유지 (0) | 2020.08.31 |
| 파이썬에서 0과 1 사이의 난수 (0) | 2020.08.31 |
| VS Code에서 "JSON에서 주석이 허용되지 않음"오류를 비활성화합니다. (0) | 2020.08.31 |
| Scala에서지도를 반전시키는 우아한 방법 (0) | 2020.08.31 |