Bootstrap 3 DateTimePicker - Календарь для input

<div class="col-xs-6">
  <div class="form-group">
    <input type="datetime-local" class="form-control">
  </div>
</div>
<div class="col-xs-6">
  <div class="form-group">
    <input type="datetime-local" class="form-control">
  </div>
</div>

$(function () {
  $('[type="datetime-local"]').each(function (index, $element) {
    var type = $(this).prop('type');
    if (type === 'text') {
      $(this).prop('type', 'text');
      $(this).wrap('<div class="input-group" id="datetimepicker-' + (index + 1) + '"></div>');
      $(this).after('<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>');
      $(this).closest('.input-group').datetimepicker({
        locale: 'ru'
      });
    }
  });
});

$('#datetimepicker input').on('blur', function () {
  const date = $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
  // ...
});

let timeoutId = null;
$('input').on('focus', function () {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
});
$('input').on('blur', function () {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = window.setTimeout(function () {
    // send...
  }, 2000);
});

$('#welcome').datetimepicker({
  locale: 'ru',
  format: 'DD.MM.YYYY',
  minDate: moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }),
});
$('#perenos').datetimepicker({
  locale: 'ru',
  format: 'DD.MM.YYYY',
  minDate: moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }),
});
$("#welcome").on("dp.change", function (e) {
  const date = e.date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
  $('#perenos').data("DateTimePicker").minDate(date);
});
$("#perenos").on("dp.change", function (e) {
  const date = e.date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
  $('#welcome').data("DateTimePicker").maxDate(date);
});

// получаем дату из 1 календаря
let welcomeData = moment($('#welcome').data("DateTimePicker").date());
welcomeData.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
// получаем дату из 2 календаря
let perenosData = moment($('#perenos').data("DateTimePicker").date());
perenosData.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
// получаем разницу в днях
const diffDays = perenosData.diff(welcomeData, 'days');

var dateNow = new Date();
    $('.timepicker-f').datetimepicker({
		format: "HH:mm",
		stepping: 15,
		defaultDate:moment(dateNow).hours(9).minutes(0),
		disabledTimeIntervals: [
		[ moment().hour(0).minutes(0), moment().hour(09).minutes(0) ],
		[ moment().hour(17).minutes(0), moment().hour(24).minutes(0) ] 
		],
		icons: {
			up: 'fa fa-angle-up',
			down: 'fa fa-angle-down',
			previous: 'fa fa-angle-left',
			next: 'fa fa-angle-right',
		}
	});

disabledTimeIntervals: [
  [ moment().hour(0).minutes(0), moment().hour(08).minutes(59) ],
  [ moment().hour(17).minutes(1), moment().hour(24).minutes(0) ] 
],

<input type="radio" name="priority" id="radio-3" value="low" checked data-days="10">Низкий

$('#datetimepicker').datetimepicker({format: 'DD.MM.YYYY', locale: 'ru'});
var numberOfDays = +$('[name="priority"]:checked').attr('data-days');
var date = moment().add(numberOfDays, 'days');
$('#datetimepicker').data("DateTimePicker").date(date);
$('[name="priority"]').on('change', function(){
  var numberOfDays = +$(this).attr('data-days');
  var date = moment().add(numberOfDays, 'days');
  $('#datetimepicker').data("DateTimePicker").date(date);
});

<div class="form-group">
	<label>Приоритет выполнения</label>
		<div style="margin-top: 7px;">
			<?php if (is_array($priorities)): ?>
				<?php foreach ($priorities as $k=>$priority): ?>
					<div class="radio radio-<?php echo $priority['CLASS']; ?> radio-inline" onchange="autoInsertDate()">
						<input type="radio" name="priority" id="radio<?php echo $priority['ID']; ?>" value="<?=$priority['ID']?>, <?=$priority['DAYS']?>" <?= isset($saved_priority) && $saved_priority==$priority['ID'] ? 'checked="checked"':'' ?>>
                                            	<label for="radio<?php echo $priority['ID']; ?>"><?php echo $priority['NAME']; ?></label>
                                        </div>
				<?php endforeach; ?>
			<?php endif; ?>
		</div>
</div>
<div class="form-group">
	<div class="input-group date" id="datetimepicker6">
		<span class="input-group-addon datepickerbutton">
			<span class="glyphicon glyphicon-calendar"></span>
		</span>
		<input type="text" class="form-control datepickerbutton" name="data" id="da" value="<?=$saved_data?>" />
		<span class="input-group-addon">
			<span class="glyphicon glyphicon-remove"></span>
		</span>
	</div>
</div>

$(function () {
    $('#datetimepicker6').datetimepicker({
        locale: 'ru'
    });
    $('.glyphicon-remove').click(function () {
        $('#datetimepicker6').data("DateTimePicker").clear();
    });
});

function autoInsertDate() {
    let d = $('input[name=priority]:checked').val();
    let days = d.split(',')[1];
    let h = days * 24;

    let currentDate = new Date();
    var monthes = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

    currentDate.setMilliseconds(h * 60 * 60 * 1000);
    let year = currentDate.getFullYear();
    let month = monthes[currentDate.getMonth()];
    let day = currentDate.getDate();
    let hour = currentDate.getHours();
    let minutes = (currentDate.getMinutes() < 10) ? '0' + currentDate.getMinutes() : currentDate.getMinutes();
    let time = day + '.' + month + '.' + year + ' ' + hour + ':' + minutes;

    document.getElementById('da').value = time;
}

<script>$(function(){ $('#datetimepicker1').datetimepicker({format: 'DD.MM.YYYY',locale: 'ru',useCurrent: false,minDate: (moment('02.03.2020','DD.MM.YYYY')),maxDate: (moment('08.03.2020','DD.MM.YYYY').endOf('day'))})});</script>

$('#datetimepicker1 > input').click(function(){
  $('#datetimepicker1 .input-group-addon').trigger('click');
});

language: 'ru'

!function(a){a.fn.datepicker.dates.ru={days:["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],daysShort:["Вск","Пнд","Втр","Срд","Чтв","Птн","Суб"],daysMin:["Вс","Пн","Вт","Ср","Чт","Пт","Сб"],months:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],monthsShort:["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],today:"Сегодня",clear:"Очистить",format:"dd.mm.yyyy",weekStart:1,monthsTitle:"Месяцы"}}(jQuery);

defaultDate: moment('01.01.2018').format('DD.MM.YYYY')

$(function () {
  $('#datetimepicker1').datetimepicker({
    debug: true
  });
});

$('#datetimepicker3').data("DateTimePicker").minDate(moment('05.11.2017','DD.MM.YYYY'));         $('#datetimepicker3').data("DateTimePicker").maxDate(moment('25.11.2017','DD.MM.YYYY'));

$('#datetimepicker3').data("DateTimePicker").date(null);

• moment.min.js;
• ru.js (русскую локаль) — для уменьшения размера данный файл ещё необходимо минимизировать.

$('.datepicker').find('[data-day="10/29/2017"]').css('background-color','yellow');

<td class="day">29</td>

<script>
$(function () {
    $('#datetimepicker1').datetimepicker({locale:'ru',debug: true})
        .on('dp.show dp.update', function(){
            // например с 06.11.2017 по 10.11.2017
            for (var d = new Date(2017, 10, 6); d <= new Date(2017, 10, 10); d.setDate(d.getDate() + 1)) {
                $(this).find('[data-day="'+ d.toLocaleDateString() +'"]').css('background-color','yellow');
            }
        });
});
</script>

<div style="overflow:hidden;">
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <div id="datetimepicker"></div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#datetimepicker').datetimepicker({
                inline: true,
                sideBySide: true
            });
        });
    </script>
</div>

$('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');

$(function () {
      $('#datetimepicker').datetimepicker({
	    locale: 'ru',
	    inline: true,
	    sideBySide: false
	  });	  
	  var q = $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
	  $('#test').val(q);
});

$("#datetimepicker").on("dp.change", function (e) {
  var q = $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
  $('#test').val(q);
});

.on("dp.change", function (e) 

$('#datetimepicker').datetimepicker({
  locale: 'ru',
  inline: true,
  sideBySide: false,
  format: 'DD.MM.YYYY'
});

$(function () {
    var year = moment().get('year');
    var month = moment().get('month');
    var startDate = moment([year, month]);
    var endDate = moment(startDate).endOf('month');
    $('#date_check').datetimepicker({
        format: 'DD.MM.YYYY',
	locale: 'ru',
	minDate: startDate,
	maxDate: endDate
    });
});

$('#date_check').datetimepicker({
    format: 'DD-MM-YYYY',
    locale: 'ru',
    defaultDate: moment(),
    maxDate: moment()
});

keyState = {};

//создаете переменную 
now=moment();
//обнуляете сутки
now.minute(0);
now.second(0);
now.millisecond(0);
//и вот опции для календаря
//Текущая дата - 
defaultDate: now,
//вчерашние нельзя - 
minDate: now

$('#datetimepicker1').datetimepicker({
  locale: 'ru',
  minDate: new Date()
});

$('#datetimepicker1').datetimepicker({
  locale: 'ru',
  minDate: moment()
});

    $(function () {
        $('#time').datetimepicker(
            {
                pickDate: false, language: 'ru',
                disabledTimeIntervals: [
                    [moment().hour(0).minutes(0), moment().hour(11).minutes(0)],
                    [moment().hour(23).minutes(0), moment().hour(24).minutes(0)]
                ]
            });
    });

$(function () {
  $('#time').datetimepicker({
    locale: 'ru',
    format: 'HH:mm',
    disabledTimeIntervals: [
      [ moment().hour(0).minutes(0), moment().hour(11).minutes(0) ],
      [ moment().hour(23).minutes(0), moment().hour(24).minutes(0) ] 
    ]
  });
});

<select class="dates" class="form-control" name="dates">
</select>  

$(function(){
  // функция для форматирования даты
  var formatDate = function(date) {
    var output = [];
    var days = ['Вск', 'Пнд', 'Втр', 'Срд', 'Чтв', 'Птн', 'Сбб'];
    var month = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Ноябрь','Декабрь'];
    var date0 = date.getDate();
    if (date0<10) {
      date0='0'+date0;  
    }
    output.push(days[date.getDay()]);
    output.push(date0);
    output.push(month[date.getMonth()]);
    return output.join(' ');  
  };

  // массив ближайших дат
  var arrayDates = [];
  // количество дней
  var countDays = 7;
  // текущая дата
  var currentDate = new Date();

  // формируем массив
  var i = 0, day = currentDate;  
  while (i<countDays) {
    if (day.getDay()==0 || day.getDay()==6) {
      day.setDate(day.getDate()+1);  
      continue;
    }
    arrayDates[i] = formatDate(day);
    day.setDate(day.getDate()+1); 
    i++;
  }
  // выводим массив в элемент с классом dates
  var output = '<option selected>Выберите дату</option>';
  for (var i=0; i<arrayDates.length; i++) {
    output += '<option>' + arrayDates[i] + '</option>';
  }
  $('.dates').empty().html(output);
});

<select class="times" class="form-control" name="times">
</select>

$(function(){
  // текущая дата
  var currentDate = new Date();
  // получаем минуты
  var minutes = currentDate.getMinutes();
  // устанавливаем ближейшее время, кратное 15 минут
  var interval = [45, 30, 15, 0];
  for (var i=0; i<interval.length; i++) {
    if (minutes > interval[i]) {
      if (interval[i] == 45) {
        currentDate.setHours(currentDate.getHours()+1);
        currentDate.setMinutes(0);
      } else {
        currentDate.setMinutes(interval[i-1]);
      }
      break;
    } 
  }

  // массив текущего времени
  var arrayTimes = [];
  // масимальная дата
  var maxDate = new Date(currentDate.getTime());
  maxDate.setHours(21,00);
  // формируем массив
  while (currentDate<=maxDate) {
    var hours0 = currentDate.getHours();
    var minutes0 = currentDate.getMinutes();
    if (hours0<10) {
      hours0='0'+hours0;  
    }
    if (minutes0<10) {
      minutes0='0'+minutes0;  
    }
    arrayTimes.push(hours0+':'+minutes0);
    currentDate.setMinutes(currentDate.getMinutes()+15);  
  }
  // выводим массив в элемент с классом times
  var output = '<option selected></option>';
  for (var i=0; i<arrayTimes.length; i++) {
    output += '<option>' + arrayTimes[i] + '</option>';
  }
  $('.times').empty().html(output);
});

<input type="text" class="datepicker" readonly="readonly">

$('#datetimepicker1').datetimepicker({
  locale: 'ru',
  disabledTimeIntervals: [
    [ moment().hour(0).minutes(0), moment().hour(11).minutes(0) ],
    [ moment().hour(19).minutes(0), moment().hour(24).minutes(0) ] 
  ]
});

// получить Timezone
var timeZone = new Date().getTimezoneOffset();
// получить часы Timezone
var current_h = Math.floor(x/60);
// получить минуты Timezone
var current_m = timeZone - current_h*60;

$(function () {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    useStrict: true
  });
});

// инициализация DateTimePicker
$('#datetimepicker1').datetimepicker({
  locale: 'ru',
  format: 'DD.MM.YYYY'
});
$('#datetimepicker2').datetimepicker({
  locale: 'ru',
  format: 'DD.MM.YYYY'
});

// при изменении 1 даты
$("#datetimepicker1").on("dp.change", function (e) {
  // устанавливаем 2 дату
  $('#datetimepicker2').data('DateTimePicker').date($(this).data('DateTimePicker').date().format('DD.MM.YYYY'));
  // и минимальное значение 2 даты
  $('#datetimepicker2').data("DateTimePicker").minDate($(this).data('DateTimePicker').date().format('DD.MM.YYYY'));
});

Uncaught TypeError: $(...).data(...).date is not a function

$('#datetimepicker1').data("DateTimePicker").date()._d.toISOString()

$("#datetimepicker1").on("dp.change", function (e) {
  // получить значение даты 1
  var date1 = $('#datetimepicker1 input').val();
  // получить значение даты 2
  var date2 = $('#datetimepicker2 input').val();
  // условия, на основании которых будет выводиться определённая таблица
  // if ...
});

var date1 = $('#datetimepicker1 input').val(); //какая-то дата в переменной date1

.bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
  cursor: default;
  pointer-events: none;
}

function datepicker($name, $value = '', $sep = '-') {
	global $cms_calendar_id;
	$calendar = '';
	$id = str_replace(array('[', ']'), array('', ''), $name);
	if(!$cms_calendar_id) {
		$cms_calendar_id = 1;
		$calendar .= '<link rel="stylesheet" href="datepicker.css"><script type="text/javascript" src="moment.js"></script><script type="text/javascript" src="datepicker.js"></script>';
	}
	$calendar .= '<input type="text" name="'.$name.'" id="'.$id.'" value="'.$value.'" class="form-control"/>';
	return $calendar;
}

<div class="input-group date" id="datepicker">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<?php echo datepicker('post[totime]', $totime);?>
</div>

<script type="text/javascript">
            $(function () {
                $('#datepicker').datetimepicker();
            });
</script>

case 'date':
	$html .= '<div class="input-group date" id="datepicker">';
	$html .= '<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>';
	$html .= datepicker('post_fields['.$v['name'].']', $value);
	$html .= '</div>';
	$html .= '<span class="text-danger" id="post_dfields'.$v['name'].'"></span>';
break;

$(function () {
//код
});

(function () {
//код
})();

$(function () {
  // будут инициализированы все элементы, имеющие класс dtp
  $('.dtp').datetimepicker({
    locale: 'ru',
    format: 'DD.MM.YYYY',
    useCurrent: false
  });
});

...
$.fn.datetimepicker.defaults = {
  timeZone: '',
  format: 'YYYY-MM-DD',
...

с
<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 class="input-group date" id="datetimepicker2">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

$(function () {
  // инициализация datetimepicker1 и datetimepicker2
  $("#datetimepicker1").datetimepicker({locale: 'ru',
    format: 'DD.MM.YYYY',
    useCurrent: false,
    maxDate: new Date()
  });
  $("#datetimepicker2").datetimepicker({locale: 'ru',
    format: 'DD.MM.YYYY',
    useCurrent: false,
    maxDate: new Date()
  });
  // при изменении даты в 1 datetimepicker, она устанавливается как минимальная для 2 datetimepicker
  $("#datetimepicker1").on("dp.change",function (e) {
    $("#datetimepicker2").data("DateTimePicker").minDate(e.date);
  });
  // при изменении даты в 2 datetimepicker, она устанавливается как максимальная для 1 datetimepicker
  $("#datetimepicker2").on("dp.change",function (e) {
    $("#datetimepicker1").data("DateTimePicker").maxDate(e.date);
  });
});

$(function () {
  $("#datetimepicker1").datetimepicker({locale: 'ru',
    format: 'DD.MM.YYYY', maxDate: new Date()
  });
  $("#datetimepicker2").datetimepicker({locale: 'ru',
    format: 'DD.MM.YYYY', maxDate: new Date()
  });
  $("#datetimepicker1 input").val('');
  $("#datetimepicker2 input").val('');
  $("#datetimepicker1").on("dp.change",function (e) {
    $("#datetimepicker2").data("DateTimePicker").minDate(e.date);
  });
  $("#datetimepicker2").on("dp.change",function (e) {
    $("#datetimepicker1").data("DateTimePicker").maxDate(e.date);
  });
});

.bootstrap-datetimepicker-widget .glyphicon-time {
  color: red;
}

$(function () {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    debug:true
  });
});

.bootstrap-datetimepicker-widget .glyphicon {
  color: red;
}

$(function () {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    format: 'DD.MM.YYYY',
    useCurrent: false
  });
});

$(function () {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    format: 'DD.MM.YYYY'
  });
});

defaultDate: moment(12.04.1972',"DD-MM-YYYY")

//например, вывести в поле datetimepicker дату 12.04.1972 
$('#datetimepicker').data('DateTimePicker').date('12.04.1972');

$(function () {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    minDate: moment()
  });
});

$(function () {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    minDate: new Date()
  });
});

 $(function () {
    $('#datetimepicker1').datetimepicker({
      locale: 'ru',
      defaultDate: new Date,
    });
});

$(function () {
  var minDate = new Date();
  minHours = minDate.getHours()+1;
  //текущее время + 1 час
  minDate.setHours(minHours);
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    minDate: minDate, 
    defaultDate: minDate
  });
});

$("#datetimepicker1").datetimepicker().on('change.dp', function (e) {
  $("#myform").submit();
});

$( 'input[name="dts"]').keypress(function() {
  //тут необходимо написать проверку поля и в случае успеха отправлять его на сервер
});

readonly="readonly"

$(document).ready(function(){
    $('#date1, #date2').datetimepicker({
      format: 'L',
      locale: 'ru'
    });
  });

<input type="text" class="form-control" id="datetimepicker1">

<script type="text/javascript">
$(function () {
  $('#datetimepicker1').datetimepicker({language: 'ru', minDate:"1/1/1900", maxDate:"31/12/1909", showToday:"false",defaultDate:"1/1/1900"});
});
</script>

$('#datetimepicker1').datetimepicker({language: 'ru',defaultDate: new Date});

$('input[type="date"]').prop('type','text');