0
は、ブートストラップのDateTimePickerで年間を通じてスクロールを追加することが可能ですか? http://eonasdan.github.io/bootstrap-datetimepicker/ブートストラップのDateTimePicker(年をスクロール)
実際のレイアウト
期待レイアウト
は、ブートストラップのDateTimePickerで年間を通じてスクロールを追加することが可能ですか? http://eonasdan.github.io/bootstrap-datetimepicker/ブートストラップのDateTimePicker(年をスクロール)
実際のレイアウト
期待レイアウト
は、ブートストラップのDateTimePickerで年間を通じてスクロールを追加することが可能ですか?
はい、これはスニペット(DateTimePickerのショーのイベントで使用すると、余分な年のカーソルと相対的なイベントを追加する必要があります)です:
$('#datetimepicker1').datetimepicker().on('dp.show', function (e) {
var objDP = $(this).find('.bootstrap-datetimepicker-widget.dropdown-menu.bottom');
var nextEle = objDP.find('th.next:first');
var prevEle = objDP.find('th.prev:first');
var firstNext = nextEle.find('span').remove().clone();
var firstPrev = prevEle.find('span').remove().clone();
nextEle.append($('<div/>', {class: "row"})
.append(firstNext)
.append(' ')
.append($('<span/>',
{
class: "glyphicon glyphicon glyphicon-forward",
title: "Next Year"
}
)));
prevEle.append($('<div/>', {class: "row"})
.append($('<span/>',
{
class: "glyphicon glyphicon glyphicon-backward",
title: "Prev Year"
}))
.append(' ')
.append(firstPrev)
);
nextEle.find('span.glyphicon-forward').on('click', function(e) {
e.stopPropagation();
var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().add('11', 'months');
$('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
$(this).prev('span.glyphicon-chevron-right').click()
});
prevEle.find('span.glyphicon-backward').on('click', function(e) {
e.stopPropagation();
var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().subtract('11', 'months');
$('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
$(this).next('span.glyphicon-chevron-left').click()
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet"
href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
UPDATE
フランス語に言語を変更するには?どのように24時間に時間形式を変更するには?どのようにHTMLコードでdatepickerとtimepickerを分けることでタイムピッカーを有効/無効にすることができますか?
ここで新しいスニペット:ニース
//
// next line for french language
//
moment.locale('fr');
$('#datetimepicker1').datetimepicker({
sideBySide: false,
format: 'D/M/YYYY'
/*
This for 24 four hours:
sideBySide: true,
format: 'D/M/YYYY HH:mm'
*/
}).on('dp.show', function (e) {
var objDP = $(this).find('.bootstrap-datetimepicker-widget.dropdown-menu.bottom');
var nextEle = objDP.find('th.next:first');
var prevEle = objDP.find('th.prev:first');
var firstNext = nextEle.find('span').remove().clone();
var firstPrev = prevEle.find('span').remove().clone();
nextEle.append($('<div/>', {class: "row"})
.append(firstNext)
.append(' ')
.append($('<span/>',
{
class: "glyphicon glyphicon glyphicon-forward",
title: "Next Year"
}
)));
prevEle.append($('<div/>', {class: "row"})
.append($('<span/>',
{
class: "glyphicon glyphicon glyphicon-backward",
title: "Prev Year"
}))
.append(' ')
.append(firstPrev)
);
nextEle.find('span.glyphicon-forward').on('click', function(e) {
e.stopPropagation();
var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().add('11', 'months');
$('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
$(this).prev('span.glyphicon-chevron-right').click()
});
prevEle.find('span.glyphicon-backward').on('click', function(e) {
e.stopPropagation();
var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().subtract('11', 'months');
$('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
$(this).next('span.glyphicon-chevron-left').click()
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/fr.js"></script>
<link rel="stylesheet"
href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
、それが働いています!もう少し改善:フランス語に言語を変更するには?どのように24時間に時間形式を変更するには?どのようにHTMLコードでdatepickerとtimepickerを分けることでタイムピッカーを有効/無効にすることができますか? – Clementine
@Clementine回答が更新されました。これがあなたの質問に答えることを願っています。言語については、momentjsコンポーネント用に設定する必要があります。時間/日付形式の場合は、オブジェクトを宣言するときに設定する必要があります。コード内のコメントを参照してください。本当にありがとう。 – gaetanoM