I'm using Metronic Template in my Laravel project.
Here I wanted to disable past dates in datetime picker plugin.
I have searched some blogs and most answers were to use minDate:0 property.
But it seems this doesn't work in Metronic template.
Please help me if you have experience in such case.
Here is my code.
<div class="input-group date">
<input type="text" class="form-control m-input" readonly="" name="followup_deadline" placeholder="Select date & time" id="datePicker">
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o glyphicon-th"></i>
</span>
</div>
</div>
And javascript/jquery code is here
$("#datePicker").datetimepicker({
todayHighlight: !0,
autoclose: !0,
pickerPosition: "bottom-left",
format: "yyyy-mm-dd hh:ii:00"
});
Other details needed?
Looking forward your kind answer.
Hi I solved it using this format
Javascript
let todayDate = new Date().getDate();
let endD = new Date(new Date().setDate(todayDate));
$('.form_datetime').datetimepicker({
startDate : endD,
weekStart: 7,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
});
As you can see I have created a Date object and assigned it to startDate this then will disable all date behind the current date (even the time).
Html
<div class="input-group date form_datetime">
<input type="text" size="16" id="datee" class="form-control" name="date_needed" required>
<span class="input-group-btn">
<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
Related
I have 2 text boxes, one is to choose month and year, and another with dates. My both date pickers are working fine, but what I need is when I select month and year from one text box, my date picker for another text box needs to display selected month's dates only.
Here is my code:
<div class="col-lg-3">
<label>Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtMonth">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
<div class="col-lg-3">
<label>Date From</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtDateFrom">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
My Javascript:
<script>
$(function () {
$('#txtMonth').datepicker({
autoclose: true,
format: "MM yyyy",
viewMode: "months",
minViewMode: "months"
})
$('#txtDateFrom').datepicker({
autoclose: true,
format: 'dd/mm/yyyy'
})
})</script>
This is my month selection textbox. If I select Sep 2019 it means, only sep month dates need to display in dates displaying datepicker.
Or if removing those previous and next icons on date calendar also enough for my requirement.
How can I achieve this?
what you can do is get the index of month you clicked and match it with the month of dates calender if both matches you can show that month date specifically OR give the same id to both year month and date month calender and run a for loop if both matches show it otherwise display hidden
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
When I open it calendar show with year and days. Can I make it somehow to first display years?
here is html:
<input style="width: 30%;float: left;" name="date" id="date" type="text"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
ng-model="ctrl.userProfile.birthDate"
is-open="dpOpenStatus.withRequired"
ng-required />
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="setDpOpenStatus('withRequired', $event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
According to the docs, you can set the datepicker-options object's datepickerMode property to one of the following:
datepickerMode C (Default: day) - Current mode of the datepicker
(day|month|year). Can be used to initialize the datepicker in a
specific mode.
So, in your view, add this:
datepicker-options="options"
and in your controller, add this:
$scope.options = {
datepickerMode: 'year',
minDate: new Date()
};
I am using bootstrap datepicker in my application.
Below is my code,
<div class='input-group date' id='dtpCalendar'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
$('#dtpCalendar').datepicker({
startView: "months",
Default: 'MMMM',
format: 'mm/dd',
multidate: true
});
Currently the datepicker looks like below,
I want to change the header format from MMMM YYYY to just MMMM.
I tried to change below code from bootstrap-datepicker.js but it doesn't work,
this.picker.find('#dtpCalendarthead .datepicker-switch')
.text(DPGlobal.formatDate(new UTCDate(month), titleFormat, this.o.language));
What else can I try?
I am using the Bootstrap Datepicker here in order to display a simple calendar range picker. All is working well so far, however I would like some additional functionality that I can't seem to figure out.
I would like to select a start date and then automatically fill in the end date (+10 days).
I'm sure this is possible however I can't figure it out.
I have created a Fiddle. Any help is greatly appreciated.
My JS is as follows;
$( document ).ready(function() {
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yy",
startDate: "0d",
endDate: "+10d",
todayBtn: "linked",
clearBtn: true,
multidateSeparator: " ",
forceParse: false,
daysOfWeekDisabled: "0,6",
orientation: "top auto",
todayHighlight: true,
toggleActive: true
});
});
My HTML is as follows;
<div class="col-md-5" id="sandbox-container">
<h2>Select borrow date</h2>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
<input type="text" class="input-lg form-control" name="end" placeholder="return date" />
</div>
</div>
You can check this link
Datepicker using jquery
You have to include javascript on change fuction of first datepicker
$('firstdatepicker').change(function() {
var date2 = $('firstdatepicker').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('seconddatepicker').datepicker('setDate', date2);
});