Bootstrap datepicker auto fill end date - javascript

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);
});

Related

Disable Past Dates in Metronic Template datetimepicker plugin

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>

Disable minutes selection in Bootstrap Datetimepicker

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

Bootstrap Datetimepicker Display twice

I am getting the problem to display datetimepicker. i got the datetimepicker twice when i click id of shankar. I mentioned the screenshot below
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
$('#shankar').datetimepicker();
This code will help you:
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datepicker('show').on('changeDate',function(ev){
$('.datetimepicker').hide();
});
});
</script>
Please check , if you have defined a custom editor Templates for DateTime, and setting the class .datepicker there. its possible you are doing explicit duplicate initialization of calender control.
As you are using bootstrap ,bootstrap-datepicker.js initializes the all nodes which has .datepicker class without explicit instruction.
Remove the explicit initialization in your function.
source
You can try:
setTimeout(function(){
$('.dpdatetimepicker').datetimepicker({
startDate: new Date(start_date),
todayBtn: "linked",
orientation: "bottom auto",
daysOfWeekHighlighted: "5",
todayHighlight: true,
autoclose: true
});
},1000);

Bootstrap datepicker setting startdate fails

I am using the Bootstrap Datapicker script (Link here) and having problems setting the startdate.
Option: startDate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be disabled.
Date should be in local timezone. String must be parsable with format.
JavaScript:
function initializeDatePicker() {
if ($.isFunction($.fn.datepicker)) {
var datepickerLang = lang;
if (datepickerLang === "nl") {
datepickerLang = "nl-BE";
}
$(".input-group.date input").datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true,
todayHighlight: true,
language: datepickerLang,
format: "dd-mm-yyyy",
startDate: $(this).data("startdate")
});
}
}
HTML:
<div class="input-group date small">
<input id="StartDate" class="form-control" name="StartDate" value="" data-is-required="True" data-startdate="01-12-2016" type="text">
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
What does work?
If I hardcode the startdate to:
startDate: new Date() => today
startDate: "01-12-2016"
What does not work?
If I try to get the date from my data attribute nothing works.
startDate: new Date($(this).data("startdate")) => returns 'Date Invalid'
startDate: $(this).data("startdate")
I don't understand what is wrong and how I can fix it.
The problem is you're using
$(this).data("startdate")
in this instance "this" is set to the document so it'll return null/undefined.
What you need to do is change it to this
$("#StartDate").data("startdate")
----------------Edit---------------
If you want to use this once on a page but have multiple datepickers you can use the data attributes insead, so remove the startDate from the options
$(".input-group.date input").datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true,
todayHighlight: true,
language: datepickerLang,
format: "dd-mm-yyyy",
});
And in your html add this attribute on the datapickers
data-date-start-date="01-12-2016"
The datepicker supports data attributes initialization, so you can use data-date-start-date in your HTML instead of data-startdate.
Here a working example:
$(".input-group.date").datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true,
todayHighlight: true,
language: 'nl',
format: "dd-mm-yyyy"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.nl.min.js"></script>
<div class="input-group date small" data-date-start-date="01-12-2016">
<input id="StartDate" class="form-control" name="StartDate" value="" data-is-required="True" type="text">
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
Note that since you are using component markup, data-date-* attributes must be on the div instead of on th input, moreover your selector should be $(".input-group.date") instead of $(".input-group.date input").
It does not work because $(this) in the startDate option is not a reference to the input element. You should use .each and set the datapicker for all of the elements in the selector one by one:
$(".input-group.date input").each(function () {
$(this).datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true,
todayHighlight: true,
language: datepickerLang,
format: "dd-mm-yyyy",
startDate: $(this).data("startdate")
})
});
Firstly, be sûr to have the good value of your date data variable, for example by printing it just before constructing the datePicker.
Then, when you are sûr to have the good value with the good format, you can pass it to the startDate attribute :
By giving the date string that must be parsable with "format"
OR by constructing the Date object as flow : new Date(yyyy,mm,dd)
(by splitting the content of your data variable).
I hope this help you.

Bootstrap datepicker: second field to allow dates later than the selected date on first field

When user selects a date on the first field, the second field must start on the selected date, and disallow any selection of previous date. I created a fiddle for reference
http://jsfiddle.net/gfokvuxr/ and here is the code:
Thank you
<label class="form-label">Loading Date</label>
<div class="input-append success date">
<input type="text" name="loadingdate" id="dt1" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
<label class="form-label">Delivery date</label>
<div class="input-append success date">
<input type="text" name="deliverydate" id="dt2" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
this is the JS code
$('.input-append.date').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: new Date()
});
Based on my reading of the API, it would be thus:
$('#loadDate').change(function(event, ui){
$('#deliverDate').datepicker( "setDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
$('#deliverDate').datepicker( "option", "minDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
});
https://jsfiddle.net/1a09hyff/1/
Give each datepicker an ID and use those to register an event listener on the first to update the second's minDate.
That said, it isn't working for some reason; I can't get any of the modification methods (including destroy) to actually work. A couple throw internal errors (I've been seeing a lot of those lately, where date.getMonth() throws getMonth is not a function etc).

Categories