Develop Reference

Displaying double date picker

Hi Stackoverflow comunity!
I'm really new using fullcalendar, Js and the datetime-picker. I'm adding into a date picker, the selected date by fullCalendar.
So for doing that here is my code piker in HTML
select: function(inform) {
var date_from= new Date(inform.startStr);
var date_to= new Date(inform.endStr) ;
let currentDate = new Date();
if (date_from >= currentDate) {
$('#exampleModalToggle').modal('show');
$(".fc-highlight").css("background", "#ffc800", "important!");
$(function() {
$("#start_date_picker").datepicker({
dateFormat: "yy-mm-dd",
}).datepicker("setDate", date_from);
$("#end_date_picker").datepicker({
dateFormat: "yy-mm-dd"
}).datepicker("setDate", date_to);
});
} else if( date_to < currentDate ){
console.log(' date clicked lower than current date, you can NOT do reservation')
}
},
<meta charset='utf-8' >
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--bootstrap 5-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<!--date time picker css-->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<!-- responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- fontawsome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- fonts-->
<link href="https://fonts.cdnfonts.com/css/nexa-bold" rel="stylesheet"/>
<!--Start Date-->
<div id="start_date" class="add_reservation_subtitles pb-3" style="margin-left: 28px;">
<input id="start_date_input" data-provide="datepicker" name="start_date" type="date"
lang="fr" id="datepicker_second" class="datepicker1" style="margin-left: 28px;" required>
<input name="start_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
<!--End Date-->
<div id="end_date" style="margin-left: 28px;" class="add_reservation_subtitles pb-3 ">
<input id="end_date_input" type="date" lang="fr" class="date-picker"
style="margin-left: 28px;" required>
<input name="end_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
<script src="{% static 'jquery-3.6.0.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.0/locales-all.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
The problem is that I'm having two calendars being displayed. The second one appears just after closing the first one.
I guess is about setting the HTML type as date and for instantiating the calendar using the JS datepicker.
So I would like to know how to avoid this behaviour without affecting the display of calendar.

How to enable date and time picker in Bootstrap-DateTimePicker

I am using this Bootstrap-DateTimePicker with the latest version of 4.17.47.
I read all the documentation options, functions, and events.
I also included all dependencies of JS and CSS.
But something is not working properly somehow.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./moment.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap-datetimepicker.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
There is an option of format in the documentation about displaying calendar part or time-picker part.
What I want is to display both parts i.e. calendar and time-picker.
But when I set format: 'DD/MM/YYYY' it shows the calendar part properly.
When I set format: 'hh:mm' it shows time-picker properly.
But when I set format:'DD/MM/YYYY hh:mm' to enable both parts, it doesn't show calendar part and only show icon for time-picker and when I click that icon it opens time-picker. This is the same case if I do not set format option explicitly and keep it default to false.
Is there anything I am doing wrong?

Currently Bootstrap-DateTimePicker does not support Bootstrap 4.
In fact, your code looks fine with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>

Bootstrap date and time picker, default date setted to input field on click calendar button

I'm using http://tarruda.github.io/bootstrap-datetimepicker/ library for date picking.
My code is jsp file is:
<div id="endDate" class="input-append date">
<input id="input_endDate" name="endDate" data-format="yyyy-MM-dd hh:mm:ss" type="text"/>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar" >
</i>
</span>
</div>
I set value to this date and time field in js file:
$('#input_endDate').val('2015-10-02 13:25:31');
The problem is when I click to calendar button the input field get current date and time. But I want that calendar will show the date from my input field when I click to calendar button

what you wrote there sounds like it's default behaviour.
Am i missing something?
<!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 id="datetimepicker" class="input-append date">
<input id="input_endDate" name="endDate" type="text"/>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</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">
$(document).ready(function(){
$('#input_endDate').val('2015-10-22 13:25:31');
$('#datetimepicker').datetimepicker({
format: 'yyyy-MM-dd hh:mm:ss',
language: 'pt-BR'
});
});
</script>
</body>
<html>

How to add Timepicker in a Datepicker in jsp page using javascript

I have a date picker in my JSP page. Now I want to add start time and end time with in this datepicker i.e calender. How to do that. I also want to set validation that start time should always be less than the end time. My code for datepicker in JSP is
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
</head>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>
EDIT
Now my datepicker i.e. calender is also not working when I tried with this code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
<script type="text/javascript">
$('#timepicker2').timepicker({
minuteStep: 1,
template: 'modal',
appendWidgetTo: 'body',
showSeconds: true,
showMeridian: false,
defaultTime: false
});
</script>
</head>
<body>
<br>
<br>
<form>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<div class="input-append bootstrap-timepicker">
<input id="timepicker2" type="text" class="input-small">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>
<input type="submit" value="Submit">
<br>
</form>
</body>
</html>
Can anyone please help me with this.

try by changing the type in input tag from
type="text"
to
type="datetime-local"
and start modifying accordingly

Change to a datetimepicker. There are several around.
I use this one.

You can use this Jquery Plugin which will add timepicker functionality to your input elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
Works for me.
Hope this helps.

Error: Object doesn't support property or method 'datetimepicker'.. Can't seem to create a datepicker

Always getting an error whenever I try to create a datepicker in my form. Can anyone help me out? I believed I have referenced the proper CSS, JS, Bootstrap and JQuery files.
<script src="js/jquery-2.1.1.js"></script>
<link href="css/animate.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/color2.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font_google.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/bootstrapValidator.css" rel="stylesheet" />
<link href="css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="js/bootstrapValidator.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/PageValidator.js"></script>
<script src="js/Validator2.js"></script>
<link href="css/datepicker.css" rel="stylesheet" />
<script src="js/bootstrap-datepicker.js"></script>
here's my attempt at creating a datepicker
<div class="form-group">
<label for="Birthday">Birth Date</label>
<div class="input-group">
<span class="input-group-addon flat">
<span class=" glyphicon glyphicon-calendar"></span>
</span>
<div class="input-group date" id="dobPicker" data-date-format="MM/DD/YYYY">
<input type="text" class="form-control" id="birthday" name="birthday" placeholder="MM/DD/YYYY"
data-bv-notempty="true" data-bv-notempty-message="Birth Date is required and cannot be empty"
data-date-format="MM/DD/YYYY" data-bv-date-message="Invalid Date" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#birthday').datetimepicker({
pickTime: false
});
});
</script>
Any insight (and possibly a code fix) would be greatly appreciated!!

I know i am 2 years late to the party, but i just had the problem and found 'a' solution that might help someone in the future.
I got an error of undefined method because i loaded the wrong .js file out of the bundle.
I loaded jquery.datetimepicker.min.js out of the root dir from the package instead of jquery.datetimepicker.full.min.js out of the build folder.

If its bootstrap date Time picker use the following code :
$(function () {
$('#birthday').datepicker()({
pickTime: false
});
});
Fiddle : http://jsfiddle.net/QD94K/1/

I had the same problem. In my case I fixed it by adding:
<script src="Scripts/jquery-ui-1.10.4.js"></script>

Assuming you're using this datepicker, you should select the containing div instead of the input element.
$(function () {
$('#dobPicker').datetimepicker({
pickTime: false
});
});

You have to add - jquery_calendar/jquery-ui.js
<script type="text/javascript" src="Scripts/jquery_calendar/jquery-ui.js"></script>
or
<script src="Scripts/jquery-ui-1.10.4.js"></script>
then add JQuery code
$(document).ready(function () {
$('.openCalendar').datepicker({
closeText: "Select",
changeMonth: true,
changeYear: true
});});
if Jquery Ui is not there Calander will not works.