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

Set current date as "today" in the result using Flatpickr

I am using Flatpickr for my date picker. however, when i select today's date, i want the result to be displayed as "Today".
jQuery(".datepicker").flatpickr({
wrap: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
defaultDate: "today",
instance.set('defaultDate', 'today');
});
this is what i have tried so far. the part instance.set isn't working for me. maybe i did something wrong.
Below is the snippet of the current working code. all i need is the current displayed date to be "Today" not the date itself.
jQuery(function() {
initDatePicker();
});
function initDatePicker() {
jQuery(".datepicker").flatpickr({
wrap: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
defaultDate: "today"
});
}
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
</script>
<div class="input-group datepicker">
<input type="text" class="form-control" data-input aria-describedby="date1">
<div class="input-group-append">
<button class="btn btn-secondary" type="button" id="date1" title="toggle" data-toggle><i class="icon-angle-down-4 mr-0"></i></button>
</div>
</div>

#Lucian, i've found solution in handling onValueUpdate and onReady (for initial check, because defaultDate can be today, as in your case) events and updating value of private field _input.value.
Although, i didn't find any way to set "Today" word in the field without breaking incapsulation - because this word cannot be parsed to Date object and throws error.
My code for you is here. Hope this helps!

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.

How to disable time in Bootstrap DateTimePicker?

I wanna use bootstrap datetimepicker without select time but it is not working. I gave false value to the pickTime parameter but it is still not working. But Format and language parameters is working.
Here is the code!
How can i fix this?
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy",
pickTime: false,
autoclose: true,
todayBtn: true,
language: 'tr',
pickerPosition: "bottom-right"
});
});
</script>
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">Birtdate</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"> </span>
</span>
</div>

There are many datetimepicker plugin, so you need to details what plugin you used.
If you use the plugin from http://eonasdan.github.io/bootstrap-datetimepicker/.
I think, you may use wrong its option : read more at http://eonasdan.github.io/bootstrap-datetimepicker/Options/. Here I removed almost, and just keep one:
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy"
});

try this remove pickTime Option and use minview : 2
$(function() {
$('#datetimepicker4').datetimepicker({
minView : 2
});
});

Try the below code, which will show only the date view, when the calendar is pulled down.
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'yyyy-mm-dd',
startView: 'month',
minView: 'month',
autoclose: true
});
});

I found this website online it disables the time picker
http://tarruda.github.io/bootstrap-datetimepicker/
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>