Develop Reference

Dynamic start/end dates in bootstrap datepicker according to dropdown Value

I am using bootstrap datepicker to change start/end date in google web app
my current working datepiker
Here's my working code
<div class="form-group col-sm-2">
<label for="WO_ID" >WO ID</label>
<select type="number" class="form-control select2" id="WO_ID" name="WO_ID" required>
<option>1</option>
<option>2</option>
<option>OH</option>
</select>
</div>
<div class="form-group col-sm-5">
<label for="Progress_Date">Progress Date</label>
<input type="text" class="form-control datepicker" id="Progress_Date" name="Progress_Date" placeholder="yyyy-mm-dd" required>
</div>
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true,
startDate: '-5d',
endDate: '0d'
});
</script>
I need to change date picker start/end date according to a dropdown("WO_ID") in my web app,
as an example - when dropdown select "OH" i want date range according to following script
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true,
startDate: '-1m',
endDate: '0d'
});
</script>
when dropdown select any other instead "OH" i want date range according to following script
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true,
startDate: '-5d',
endDate: '0d'
});
</script>
I hope youll understand my requirement..
here is link to my google app script (Refer "Form.html")

JS error when initializing bootstrap datetimepicker if input value contains only time

I'm using DateTime Picker and I want to load a only Time picker.
I initialize my input field like this and works good. This let me pick only times jsfiddle:
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" />
</div>
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
If I want initialize this input with a time preselected, JS error occurs:
"Uncaught TypeError: Cannot read property 'getTime' of undefined"
But if I put the input value like this 2017-12-24 13:00, the input time picker have that full value. That works good, but I want that the first value could be only the time, not full datetime.
Here is jsfiddle with a value preloaded. I want that this value could be 13:00:
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" />
</div>
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});

Let's do a little trick. First we'll hide the input field. Then we'll devide the datetime value by space character to get only the time and set this as the input value. After that we will show the input field.
var $hour_from = $("#hour_from");
$hour_from.datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1,
timeFormat: 'hh:mm',
});
$hour_from.val($hour_from.val().split(' ')[1])
$hour_from.show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" data-date-format="hh:ii" style="display:none;" />
</div>

And few years later I had a similar problem, and solved it with data attribute like this.
Lets take all the code posted in the question (second part, where you added value).
I added few data attributes to the input, data-date and data-inputvalue and have left the actual value empty.
<input type="text" id="hour_from" name="hour_from" class="form-control" data-date="2017-12-24 13:00" data-inputvalue="13:00" value="" />
Now let's init the date picker just like in posted question, and add three rows below.
//init
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
//taking data attr and storing it to value
var inputvalue = $('#hour_from').data('inputvalue');
$('#hour_from').val(inputvalue);
//informing datepicker the value changed (will work without this)
$('#datetimepicker_hour1').datetimepicker('update');
Here is the whole example in a working fiddle.
Hope this helps someone ;D

Set the value in the inputfield after datetimepicker has been initialized, then everything works.
var hour_from = "13:00";
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" value="" />
</div>
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
$('#hour_from').val(hour_from);

Disable future dates

My View:
<input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>`
Controller:
`$('#datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
it's showing TypeError: $(...).datepicker is not a function
I want to disable all the future dates after today
Trying to implement.

as others have mentioned you might have not included it in your page...and as far as logic concerned for disabling dates after today:
You can assign today to maxDate option of datepicker,
this is what jquery datepicker api docs have about maxDate option
The maximum selectable date. When set to null, there is no maximum.
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
});
Here is the fiddle hope your issue is resolved now

Use maxDate instead of endDate
<input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>`
$('#datepicker').datepicker({
format: 'mm-dd-yyyy',
maxDate: new Date(),
autoclose: true
});
Fiddle

data-plugin-datepicker data-plugin-options='{"autoclose": true, , "endDate": "0d", "format": "dd-mm-yyyy"}'
try this in html

change date in bootstrap datepicker calendar using date from another calendar on same page?

I have two basic bootstrap datepicker calendars on my page. I am trying to understand how I can use changeDate event to set the date of calendar no.2 according to the date I select on calendar no.1. I'd like to set a date three months ahead of the first calendar's month.
Here is the HTML of the calendar:
<div class="profile-info-row">
<div class="profile-info-name"> Date of Birth *</div>
<div class="profile-info-value">
<div id="sandbox-container">
<span class="input-icon input-icon-right">
<input type="text" type="text" name="dob" id="dob" class="form-control">
<i class="ace-icon fa fa-calendar blue"></i>
</span>
</div>
</div>
</div>
Here is the script of calendar:
<script type="text/javascript">
//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
});
EDIT: This question is about the BOOTSTRAP datepicker, not the JQUERY one. I think it's a common misconception in most questions

//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
}).on('changeDate', function(e) {
// `e` here contains the extra attributes
var newDate = new Date(e.date.setMonth(e.date.getMonth()+3));
$('#second-sandbox-container input').datepicker('setDate', newDate);
});
http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate

bootstrap-datetimepicker show date only

I am using this repo by smalot and I want to select and show date only (for some other places I am showing data and time, therefore selecting this repo). I can manage to use it for selecting date only but the generated date string is always yyyy-mm-dd hh:ii. And if I did not understand wrongly the format option is for parsing the initial date only but not setting dates.
<div class="input-group date datetime dateonly" data-start-view="2" data-min-view="2" style="margin-bottom: 0;">
<input class="form-control" size="16" type="text" placeholder="Release Date" id="release-date" name="release_date" value="{{ unit.release_dt|date:'Y-m-d' }}" style="cursor: default; background-color: #ffffff;">
<span class="input-group-addon btn btn-primary"><span class="glyphicon glyphicon-th"></span></span>
</div>
I am setting startView and minView to be both 2 so that the user will need to select date only but I still got 2015-09-22 00:00 as the output-- I just want it to show 2015-09-22.
In fact, by listening to changeDate and hide events, I can just set the value of date inputs. I am wondering if there is a less hacky and dirty way of doing it
$('.datetimepicker').on('changeDate', function(e) {//get substring and set date input
}).on('hide'....//same thing
);

Use date picker
$("#calender").datepicker({
format: "mm/dd/yyyy"
});

To show date only use
format: 'L'
To show Time only use
format: 'LT'
Reference
https://github.com/Eonasdan/bootstrap-datetimepicker/issues/832

you will edit datetaimepicker.js
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
like this
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd'
wish can help you!

Try this -
HTML:
<div class="controls input-append date m" data-date="" data-date-format="yyyy-mm-dd" data-link-field="m1" data-link-format="yyyy-mm-dd" data-start-view="2" data-min-view="2">
<input size="16" id="m" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="m1" value="" />
JS:
$('.m').on('changeDate', function(e) {
console.log($("#m").val());
});
Console:
2015-12-08
Hope it will help.