I'm using eonasdan-bootstrap-datetimepicker:
<input type="text" class="form-control" ng-model="$ctrl.date" id="dateStart">
<script type="text/javascript">
$("#dateStart").datetimepicker({
format: 'ddd, D MMMM YYYY',
showTodayButton: true
});
</script>
What I want to achieve is that everytime I close the picker and reopen it I'll always have the days picker.
Right now If I'm in the "datepicker-months" and click outside, the picker will close and if I reopen it it will show the months view again, but I want the days one.
I tried with:
on('dp.show', function(e) {
$(".datepicker-days").show();
$(".datepicker-months").hide();
$(".datepicker-years").hide();
$(".datepicker-decades").hide();
});
This ways looks like it's working: if I close it during months view and reopen it I'll get the days datepicker, but if from here I click on the month again I'll get the datepicker-years..
Any help would be appreciated.
EDIT:
Code here:
http://jsfiddle.net/xrqkyypd/51/
The answer is pretty much straightforward using events and viewMode function.
You only must check that when the picker get hide then you reset his viewMode to which ever you want, in this case the days view.
$('#myDatepicker').on('dp.hide', function(e) {
$('#myDatepicker').data("DateTimePicker").viewMode('days')
});
According with documentation, you can set like this:
<div class="container">
<div class="col-sm-6" style="height:130px;">
<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>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years' //days, weeks etc
});
});
</script>
</div>
For more details check view mode
Related
I am working on an application, and I'm a little stuck on the datetimepicker. The datepicker should be able to show a data format of yyyy-mm-dd hh:mm:ss (year, month and date with current hour, minutes and seconds...). It's working fine, but after when i select the date the datepicker has to autoclose or hide. But it's not going off. I tried a lot with different scripts, still not able to work. Following is the HTML:
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id='datetimepicker2' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
Following is the JS:
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
autoclose: true
});
});
</script>
I guess the script is not supporting autoclose call. Any idea how I can fix this?
You can just listen to the datetimepicker dp.change event and force closing the datetimepicker when the date is changed like:
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
// Hide datetimepicker on date change
$("#datetimepicker2").on("dp.change", function() {
$(this).data("DateTimePicker").hide();
});
// Show datetimepicker on input text click
$('#datetimepicker2 > input').on('click', function() {
$(this).closest('.date').data('DateTimePicker').show();
});
});
I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this
Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});
see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/
try using step: 60 not steps
please check this link also :click here
My html code like this :
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
My JavaScript code like this:
$(function () {
$('#datepicker').datetimepicker();
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
Demo like this: https://jsfiddle.net/8jpmkcr5/89/
If I click the timepicker and click the decrement hour icon, it does not work. I know it happens because this code : minDate: moment().startOf('minute').add(300, 'm'). I want the code to work only on this day. Other than today the code does not work
How can I do it?
Your #datepicker and #timepicker are unrelated, they are fully independent,
is up to you to relate them. You can dinamically set minDate of #timepicker using minDate function.
You can add a listner for dp.change event and enable or disable the minDate for the #timepicker chceking if the selected day is current day (using momentjs isSame).
You have to add minDate option also to #datepicker if you want to disable past dates, as you stated in the comments.
Here a working sample:
$(function () {
$('#datepicker').datetimepicker({
minDate: moment().startOf('day')
}).on('dp.change', function(e){
if( e.date && e.date.isSame(moment(), 'd') ){
var min = moment().startOf('minute').add(300, 'm');
$('#timepicker').data("DateTimePicker").minDate(min);
} else {
$('#timepicker').data("DateTimePicker").minDate(false);
}
});
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datepicker').value;
console.log(value)
valueTime = document.getElementById('timepicker').value;
console.log(valueTime)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Please note that, as stated before, #datepicker and #timepicker are unrelated, so with the #timepicker you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using #datepicker).
If you want to limit the input to today only, why are you trying to set a limit on the time picker? You should be setting the limit on the date picker
I am using only time input (Custom Formats example 3 given on this link) http://eonasdan.github.io/bootstrap-datetimepicker/
I only wants to listen for change in time when user click up or down for hour or minute changes. I tried change.dp, change and dp.change but none are working
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" id="start_time"/>
<input type="hidden" name="book_meeting[start_date]" id="book_meeting_start_date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
$("#start_time").on("change", function(e) {
alert("helloi");
});
$("#book_meeting_start_date").on("change", function(e) {
alert("helloi");
});
$("#book_meeting_start_date").on("change.dp", function(e) {
alert("helloi");
});
After searching i found it's answer.i ended up using dp.hide which is working as expected.
$('#datetimepicker3').datetimepicker({
stepping: 5,
format: 'HH:mm'
}).on('dp.hide', function (event) {
});
I have a Bootstrap calendar. It opens when I click on the calendar icon but it does not open when I click on the input. I want to make the calendar open under the calendar icon not under the input element when click on input.
<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy">
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$(document).ready(function() {
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
$('#dp2').click(function(event){
event.preventDefault();
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
});
</script>
I think simple questions are not answered here. Instead of clicking to the vote down button it would be useful to provide a working example link. Anyway took more then half an hour but made it to work it was very simple. didn't think to use $('#dp3').datepicker('show');
$(document).ready(function() {
$("#dp3").datepicker();
$('#dp2').click(function () {
$('#dp3').datepicker('show');
});
});