I am trying to add this DateTime Picker to my application, I am not sure why. I already have the needed library to make it work.. Here are my libraries below:
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap library -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
And here is the code of the dateTime picker
<label for="dateTime">Date and Time</label>
<input type="text" name="datetime" id="datetime" class="form-control" readonly>
<script type="text/javascript">
$(function () {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes();
var dateTime = date+' '+time;
$("#datetime").datetimepicker({
format: 'yyyy-mm-dd hh:ii',
autoclose: true,
todayBtn: true,
startDate: dateTime
});
});
</script>
Include the necessary scripts and styles:
<head>
<!-- ... -->
<script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>
Related
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.
I'm using Amsul DatePicker: https://amsul.ca/pickadate.js/date/#selectors and I'm unable to find out how can I load the number of required years in the year drop down. By default, it's coming like half the years before the current year and half the year after the current year.
So what I want to achieve is I want to load 150 years back from the current year.
Looking for help.
Thanks
$('.datepicker').pickadate({
selectYears: 100,
selectMonths: true,
min: true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<input name="dob" type="text" class="form-control account-field-input datepicker">
Change your initial settings to include min and max dates.
var maxDate = new Date();
var minDate = new Date();
minDate.setFullYear( minDate.getFullYear() - 150 );
$('.datepicker').pickadate({
min: minDate,
max: maxDate,
selectYears: 150,
selectMonths: true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<input name="dob" type="text" class="form-control account-field-input datepicker">
I have a datetimepicker with format 'yyyy-mm-dd'.
Everything is working fine and it don't ask me for the time .
But if I add endDate it start asking me for the time.
Try this...
$(document).ready(function() {
$('#datetimepicker').datetimepicker({
format:'Y-m-d',
timepicker:false,
minDate:'-1970/01/02', //yesterday is minimum date
maxDate:'+1970/01/02' //tomorrow is maximum date
});
});
.dt{
margin-top:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="dt" type="text" id="datetimepicker"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker/jquery.datetimepicker.css"/>
<script src="https://www.jqueryscript.net/demo/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker/jquery.datetimepicker.js"></script>
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>
I am using the following library:
https://github.com/fragaria/angular-daterangepicker
These are the script tags I am Using:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css"/>
I cant find the following file:
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
Following is my initialization code:
$scope.datePicker = {startDate: moment().subtract(6, 'days'), endDate: moment()};
$scope.dateRangeOptions = {
applyClass: 'btn-green',
locale: {
applyLabel: "Apply",
fromLabel: "From",
format: "YYYY-MM-DD", //will give you 2017-01-06
toLabel: "To",
cancelLabel: 'Cancel'
}
}
HTML:
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker" options="dateRangeOptions"/>
The CSS is not working and the UI is all broken.