Bootstrap datepicker setting startdate fails - javascript

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.

Related

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

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<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").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>

How to populate datepicker's input element with its defaultDate

Is there any way to populate datepicker's input element with its defaultDate?
HTML
<input type="text" id="datepicker">
JS
$("#datepicker").datepicker({
defaultDate: +7
});
https://jsfiddle.net/k9fdw2ub/
I want users to see the default date in the input element itself, not just in the pop-up calendar.
Jsfiddle
Try below code
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy',
});
$('#datepicker').datepicker('setDate', 'today + 7');
I think this will work for you.
$("#datepicker").datepicker({
defaultDate: +7
});
$('#datepicker').datepicker('setDate', 'today');
// $('#datepicker').datepicker('setDate', 7); If you wanna set date from future 7days from current date use this
By using set setDate you can achieve it.
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date());
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker">

Returning options object for jquery datepicker beforeShow

I want to accept a range of date formats in the input field of a jquery ui datepicker by checking them in the beforeShow function.
According to the docs I need to return an options object, however I can't get this to work.
Here is the minimal code to set the datepicker to 01-10-2015 no matter what is entered:
<input id="test" name="test" value="" />
$('#test').datepicker({
dateFormat: 'dd-mm-yy'
beforeShow: function (input, inst){
return { setDate: '01-10-2015' }
}
});
https://jsfiddle.net/mp4wbuvm/
You're missing a comma after the dateFormat property.
$('#test').datepicker({
dateFormat: 'dd-mm-yy',
beforeShow: function(input, inst) {
return {
setDate: '01-10-2015'
};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="test" name="test" value="" />

Bootstrap datepicker auto fill end date

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

Categories