<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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
Kendinize özel bir formata göremek için format data-date-format="YYYY/MM/DD". (US default is MM/DD/YYYY hh:mm A/PM)
Başka bir dilde görmek isterseniz:
Ek Görevlerle:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<button id="setMinDate">setMinDate</button>
<button id="setMaxDate">setMaxDate</button>
<button id="show">show</button>
<button id="disable">disable</button>
<button id="enable">enable</button>
<button id="setDate">setDate</button>
<button id="getDate">getDate</button>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
pick12HourFormat: false
});
$("#setMinDate").click(function () {
$('#datetimepicker3').data("DateTimePicker").setMinDate(new Date("june 12, 2013"));
});
$("#setMaxDate").click(function () {
$('#datetimepicker3').data("DateTimePicker").setMaxDate(new Date("july 4, 2013"));
});
$("#show").click(function () {
$('#datetimepicker3').data("DateTimePicker").show();
});
$("#disable").click(function () {
$('#datetimepicker3').data("DateTimePicker").disable();
});
$("#enable").click(function () {
$('#datetimepicker3').data("DateTimePicker").enable();
});
$("#setDate").click(function () {
$('#datetimepicker3').data("DateTimePicker").setDate("10/23/2013");
});
$("#getDate").click(function () {
alert($('#datetimepicker3').data("DateTimePicker").getDate());
});
});
</script>
</div>
</div>
Sadece saat isterseniz:
<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 () {
$('#datetimepicker4').datetimepicker({
pickDate: false
});
});
</script>
</div>
</div>
Sadece Tarihi Almak İçin:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control" data-date-format="YYYY/MM/DD"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false
});
});
</script>
</div>
</div>
Daha Fazla Özellikle:
<div class="input-group" id="datetimepicker7">
<span class="input-group-addon datepickerbutton">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
Bazı Günlerin Seçilmesini İstemezseniz:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
Birden Fazla Kullanım:
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker();
$('#datetimepicker10').datetimepicker();
$("#datetimepicker9").on("dp.change",function (e) {
$('#datetimepicker10').data("DateTimePicker").setMinDate(e.date);
});
$("#datetimepicker10").on("dp.change",function (e) {
$('#datetimepicker9').data("DateTimePicker").setMaxDate(e.date);
});
});
</script>
</div>
Javascript Özellik Tanımları:
$.fn.datetimepicker.defaults = {
pickDate: true, //en/disables the date picker
pickTime: true, //en/disables the time picker
useMinutes: true, //en/disables the minutes picker
useSeconds: true, //en/disables the seconds picker
useCurrent: true, //when true, picker will set the value to the current date/time
minuteStepping:1, //set the minute stepping
minDate:`1/1/1900`, //set a minimum date
maxDate: , //set a maximum date (defaults to today +100 years)
showToday: true, //shows the today indicator
language:'en', //sets language locale
defaultDate:"", //sets a default date, accepts js dates, strings and moment objects
disabledDates:[], //an array of dates that cannot be selected
enabledDates:[], //an array of dates that can be selected
icons = {
time: 'glyphicon glyphicon-time',
date: 'glyphicon glyphicon-calendar',
up: 'glyphicon glyphicon-chevron-up',
down: 'glyphicon glyphicon-chevron-down'
}
useStrict: false, //use "strict" when validating dates
sideBySide: false, //show the date and time picker side by side
daysOfWeekDisabled:[] //for example use daysOfWeekDisabled: [0,6] to disable weekends
};
Olaylar:
dp.change :Fires when the datepicker changes or updates the date. Note that change may also fire for knockout support.
Türkiye (Türkçe)
Worldwide (English)
0850 780 4800
Bilgi Bankası
Destek Sistemi
Giriş Yap
Hesap Oluştur
Telefon İle Destek
0850 780 4800