Bootstrap Datepicker - Set startView: 'decade', but not current decade - javascript

Currently I have the startView showing the current decade, which is ok but I want to make the previous decade be the startView - not the current decade.
this.dobDatePickerView = new DatePickerView({
el: this.$('[name="dob"]'),
startView : 'decade',
endDate : this.sandbox.dates().fwFormat('date'),
value : this.sandbox.dates().subtract('years', 18).fwFormat('date')
}).render();
I want to subtract 18 years from the decade view default selected year, so instead of '2013' being pre-selected it should default to 1995.

This could work: (demo):
<div class="input-append date" id="dp1" data-date="01-01-1990" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
<input class="span2" size="16" type="text" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$('#dp1').datepicker();
</script>
By separating the datepicker from the input and setting a default value on the picker but not the input, you can get something that will only populate a date once a date is selected but start at any value you please.

https://github.com/eternicode/bootstrap-datepicker#setstartdate
perhaps try calling setStartDate() on the datePicker, when it is clicked/opened, and set the date ten years ago

Related

Showing specific range of years , months and days using bootstrap datepicker

Am working on an application whereby am using bootstrap Datepicker to display the date. Am trying to show dates to the user whereby h/she should be above 18 years and below 85 years of age. Years, months and dates not within that age bracket should be disabled.
On the date I have validated whereby I only show the date of 18 years from current year (this mean any year below 18 years from now is not shown). For instance since we are in 2019 (it shows year upto 2001 and below : 2001, 2000, 1999 , 1998 ). This works fine.
The problem is I want to show years where on the lower limit should be 18 years and upper limit should be 85 years. For instance since we are in 2019 , it should show years between 1916 and 2001 where the difference is 85 years, (the same scenario should happen for months and days).
Markup
<div class="form-line">
<input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required>
</div>
Javasript to control how the datepicker appears
//dob (Must be over 18 years and less than 85 years)
var maxBirthdayDate = new Date();
maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
maxBirthdayDate.setMonth(11,31);
var minDate = setFullYear(maxBirthdayDate.getFullYear() -85);
$( function() {
$( "#dob " ).datepicker({
changeMonth: true,
changeYear: true,
//yy-mm-dd
dateFormat: 'yy-mm-dd',
maxDate: maxBirthdayDate,
yearRange: minDate + maxBirthdayDate.getFullYear(),
});
});
//End dob
Take a look into this.
You can use 'setStartDate' and setEndDate to specify the date range. The range can set as either fixed date as 03/31/2018 or 1y 2m 1d where y, m , d means year, months and date.
$(function(){
$("#dob").datepicker();
$('#dob').datepicker('setStartDate', '-18y');
$('#dob').datepicker('setEndDate', '+85y');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<div id ="BillingDateDiv" class ="form-group">
<div class="col-sm-2 input-group date">
<input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required>
</div>
<span class="input-group-addon" ><i id="callDate" class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>

Limit(disable days buttons) bootstrap-datepicker calendar date(date_stop can't be < date_start)

How can I limit(disable days buttons) bootstrap-datepicker(not jQuery Datapicker) calendar date in this way:
id_date_stop can't be < id_date_start so
if I select date_start as
06-05-2016, date_stop can't be earlier than 06-05-2016.
It can be
from 06-05-2016 to 10-05-2016(todays date).
my html:
<div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
<input id="id_date_start" name="data_start" type="text">
<div class="input-group-addon"></div>
</div>
<div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
<input id="id_date_stop" name="date_stop" type="text">
<div class="input-group-addon"></div>
</div>
You can use jQuery combined with the methods available from bootstrap-datepicker to set the start and end dates.
Sample code would look like this
$('#id_date_start').datepicker({autoClose: true}).on('changeDate',function(e) {
$('#id_date_stop').datepicker({autoClose: true}).datepicker('setStartDate', e.date)
.datepicker('setEndDate', new Date());
})
This code will set a start date for the 'date_stop' datepicker based on your start date selected, and will set the end date to today's date.
I am using the line $('#id_date_start').datepicker({autoClose: true}) before the method calls, to ensure that the datepicker object is initialized. This will ensure that the methods will fire correctly.
Here is a sample fiddle.

How to preselect date in bootstrap 3 datetimepicker

I am using Bootstrap 3 Datepicker for that I am trying following
<div class='input-group date datetimepicker1'>
<input type='text' name="actEndDate" placeholder="End Date" class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
and calling it by following
$(".datetimepicker1").datetimepicker();
Its working fine
now i am changing date using JavaScript on clicking of other field i have date formate like 11/4/2015 and for that i am trying following
$('.datetimepicker1').datetimepicker({
defaultDate: "11/1/2013"
});
now how to preselect date ?
Note : its different from jquery datepicker
I see this way for your question:
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("10/2/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
you can see this page for other doubt.
Setting defaultDate parameter is the right method to resolve it.

How to stop datetimepicker setting todays date in textbox by default onclick

When we select calendar icon, it automatically sets today's date to textbox.
Is there any parameter/option in the datetimepicker() function which can be set to false or null preventing datetimepicker() setting today date to textbox by default.
If someone doesn't select any date from calendar the textbox should be empty rather than having today's date set by datetimepicker().
Worth reading the docs. Change the useCurrent attribute when initailizing the datetimepicker.
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent
If you are using the .datetimepicker() for Bootstrap 4 + jQuery
When you click the element it could happen this undesired effect of date updated.
This is a hack to avoid override of current value with current date on click and allow normal selection of picker.
For the Tempus Dominus version:
https://tempusdominus.github.io/bootstrap-4/
JS
var dateNow = new Date();
$('.datetimepicker').each(function() {
var _el = this;
$(this).datetimepicker({
autoclose: true,
allowInputToogle: true,
format: 'YYYY-MM-DD HH:mm',
defaultDate: dateNow,
});
// 'this.parent()' is the container and data-target | '_el' is the input
$(this).parent().on('change.datetimepicker', function(e) {
// HACK
if (!e.oldDate) return;
$(_el).val(e.date.format('YYYY-MM-DD HH:mm'));
});
});
HTML
<div class="form-group">
<label class="control-label"><i class="icon-right-open-outline"></i> Date</label>
<div class="input-group" id="form_datetimepicker_1">
<input name="date_selected"
id="date_selected"
class="form-control datetimepicker"
type="text"
data-toggle="datetimepicker"
value="2019-11-22 22:55:00"
data-target="#form_datetimepicker_1">
<div class="input-group-append" data-target="#form_datetimepicker_1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>

Formatting bootstrap timepicker

I am using bootstrap timepicker (http://jdewit.github.io/bootstrap-timepicker/) and want to format the default value this way: 00:00 but there is only one leading zero in my solution:
Here is the code:
<div class="input-append bootstrap-timepicker">
<input type="text" id="timepicker1" class="input-small bookingTextBox" />
</div>
Javascript:
$('#timepicker1').timepicker(
{
minuteStep: 1,
showMeridian: false,
defaultTime: '00:00'
});
Is there a way to show 00:00 as default value?
check on this link for help for you click here
try this
defaultTime : '00:00 AM'

Categories

Resources