I am using bootstrap-datetimepicker-0.0.11 on my input type text element.
Date picking works fine but minute functionality is not working.
When incrementing minute arrow, nothing happens, and on decrementing hour values gets decremented instead of minute value.
Here's my html snippet:
<div class="form-group col-md-6">
<label for="date_from">Date From *</label>
<input type="text" readonly name="date_from" class="form-control date_from" id="date_from" placeholder="Enter training start date">
</div>
<div class="form-group col-md-6">
<label for="date_to">Date To *</label>
<input type="text" readonly name="date_to" class="form-control date_to" id="date_to" placeholder="Enter training end date">
</div>
And here's datetimepicker initialization:
$('.date_from, .date_to').datetimepicker({format: 'YYYY-MM-DD HH:MM'});
Anyone happens to know why the plugin is working in unexpected manner?
Try this:
<div class='input-group date' id='datetimepicker1'>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Try this datetime format:
$('.date_from, .date_to').datetimepicker({format: 'YYYY-MM-DD HH:ii'});
where 'M' and 'm' are the same so you were probably confused by using the month value instead of the minute value. The minute value is declared by 'i'
See more information here: https://www.malot.fr/bootstrap-datetimepicker/demo.php
Related
<div class="date-time-para">
<div class="box-date">
<label class="font-weight-bold"> Select Date {{notificationDetails.scheduled_date}}</label>
<!-- <input type="date" formControlName="notificationDate" placeholder="Select Date" class="input-sample" placeholder="Select Date" [(ngModel)]="notificationDetails.scheduled_date"> -->
<input type="date" formControlName="notificationDate" [ngModel]="notificationDetails.scheduled_date | date:'yyyy-MM-dd'" [min]="currentDate" />
</div>
<div class="box-date">
<label class="font-weight-bold">Select Time</label>
<!-- <input type="tśme" formControlName="notificationTime" placeholder="Select Date" class="input-sample" placeholder="Select Date" [(ngModel)]="notificationDetails.scheduled_time"> -->
<input type="time" formControlName="notificationTime" [ngModel]="notificationDetails.scheduled_time | date:'HH:MM'" [min]="currentDate " />
</div>
</div>
i want that in input type = "time" user can't able to select time which is passed when time popup opens
and i have defined [min] = "currentTime" which is in .ts file in angular giving hour and minutes using date = new Date() in javascript
Hey guys I am working on a project that requires validation of the date picker to check whether the end date is greater than or equal to the start date! Can anyone help me with how to write jquery for it so that I can disable the dates based on the user's date selection restricting him/her to choose the dates within the starting and ending range entered by the user?
The code looks like this:
<div class="mb-4">
<label for="startdate" class="form-label">StartDate</label>
<input type="date" class="form-control" id="startdate" name="startdate" />
</div>
<div class="mb-4">
<label for="enddate" class="form-label">End Date</label>
<input type="date" class="form-control" id="enddate" name="enddate" />
</div>
I'm not sure how to disable inside picker dates that are higher than the startDate, but like this you can do a validation
var startDate = new Date($('#startdate').val());
var endDate = new Date($('#enddate').val());
if (startDate < endDate){
// Do something
}
How can i disable past date with my codes with real time?
<div class="form-group">
<label>Check-In</label>
<input name="cin" type ="date" class="form-control">
</div>
<div class="form-group">
<label>Check-Out</label>
<input name="cout" type ="date" class="form-control">
</div>
You can make it disallow any previous date by using JavaScript a little bit and the min attribute:
let [today] = new Date().toISOString().split("T");
document.querySelector("input").setAttribute("min", today);
<input name="cin" type ="date" class="form-control">
This will update automatically. If you don't want to allow any checkins earlier than a fixed date (let's say New Year's Day 2019) then just set the min attribute manually:
<input name="cin" type ="date" class="form-control" min="2019-01-01">
I have a question about the package "tsega:bootstrap3-datetimepicker".
In the template I have placed code:
<div class="nowe-wydarzenie form-group">
<label class="control-label" for="nowe-wydarzenie-start-date">Data</label>
<div class="input-group datetimepicker">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" id="nowe-wydarzenie-start-date" data-id="nowe-wydarzenie-start-date" name="noweWydarzenieStartDate" placeholder="Podaj datę rozpoczecia wydarzenia" autocapitalize="none" autocorrect="off" value="">
</div>
<span class="help-block hide"></span>
</div>
and the js file I added the following code:
Template.newWydarzenie.onRendered(function() {
this.$('.datetimepicker').datetimepicker({
});
});
With these settings, I have the opportunity to choose the date of bark already passed (01.01.2016)
I would like to block such a choice.
How to set the this package so that it was not possible to select reverse date.
Use minDate option. This line:
this.$('.datetimepicker').datetimepicker({ minDate: 'now' });
allow only future dates.
I have two bootstrap datepickers in my form. The datepicker does not close and when i open the second one it overlaps the first one. How could i solve this?
Here is my code:
<div class="col-sm-10">
<input id="beginn" class="datepicker form-control">
<script>
$(function() {
$('.datepicker').datepicker();
});
</script>
</div>
<div class="col-sm-10">
<input id="end" class="datepicker form-control">
<script>
$(function() {
$('.datepicker').datepicker();
});
</script>
</div>
just delete the first script, because you call datepicker plugin to all elements with class datepicker twice
$(function() {
$('.datepicker').datepicker();
});
check this
Your HTML is fine from what I can tell, but I would use col-sm-12 instead of col-sm-10 to make the inputs fullscreen:
<div class="col-sm-12">
<input id="beginn" class="datepicker form-control">
</div>
<div class="col-sm-12">
<input id="end" class="datepicker form-control">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.datepicker').datepicker({
format: 'yyyy/mm/dd', // Or whatever format you want.
startDate: '2015/01/01' // Or whatever start date you want.
});
});
</script>
Using the document.ready function, the datepicker control should only initialize once, and you shouldn't have the overlapping issue you have now.
Hope that helps!