How to disable time in Bootstrap DateTimePicker? - javascript

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>

Related

Flatpickr initialisation fail

I'm having trouble initializing the flatpickr from the input value.
This is the flatpickr HTML:
<div class="flatpickr">
<input name="test" value="2019-07-03" type="text" data-input>
<a class="input-button" title="toggle" data-toggle><i class="icon-calendar"></i></a>
</div>
This is the the config:
flatpickr(".flatpickr", {
dateFormat: "d.m.Y",
weekNumbers: true,
wrap: true
});
The calendar get initialized with the date 20.09.2019 but it should be 03.07.2019.
I also tried setting the date to a timestamp, but the initialization goes wrong too.
The dateFormat in the value attribute should match the dateFormat: "d.m.Y"
flatpickr(".flatpickr", {
dateFormat: "d.m.Y",
weekNumbers: true,
wrap: true
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div class="flatpickr">
<input name="test" value="03.07.2019" type="text" data-input>
<a class="input-button" title="toggle" data-toggle>
<i class="icon-calendar"></i>
</a>
</div>

How to disable Bootstrap datetimepicker

I am using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). I'd like to disable the datetimepicker on page load.
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
});
});
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I have tried $('#datetimepicker1').prop('disabled', true) and $('#datetimepicker1').disable() from (http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#disable). Neither work. So what is the best way to do it?
try the following code $('#datetimepicker1 > .form-control').prop('disabled', true);
please check the link https://jsfiddle.net/komal10041992/DTcHh/32829/
You were close to solution, you have to use disable(), but you have to remember that, as docs says:
Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()
So you have to add .data("DateTimePicker") to your $('#datetimepicker1').disable().
Here a working sample:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
});
//To Disable use disable() function
$('#datetimepicker1').data("DateTimePicker").disable();
//To Enable use enable() function
//$('#datetimepicker1').data("DateTimePicker").enable();
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
}).find("input:first").prop("disabled", true);
});

Bootstrap date picker after selecting date not closing picker

After selecting date from bootstrap date picker the picker popup is not hiding. What may be the issue?
Here is my fiddle
<div class="form-group col-xs-6">
<div class="input-group">
<div class="input-group-addon flat">
<div class="glyphicon glyphicon-calendar"></div>
</div>
<div class="col-sm-10">
<input name="DATEFROM" id="dateFrom" type="text" class="form-control" />
</div>
</div>
</div>
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top"
});
});
Add autoclose: true in datepicker function.
The new jquery code is:
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top",
autoclose: true
});
});
Here is the updated fiddle. https://jsfiddle.net/329suzv9/8/
Simply hide the datapicker in the changedate event.
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top"
}).on('changeDate', function(ev){
$('#dateFrom').datepicker('hide');
});
});

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.

Categories

Resources