Why date is not displaying for jquery date picker? - javascript

Iam using date picker jquery and it is not displaying inside input field. My link is https://jsfiddle.net/sbk2hd4c/10/ .
My code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
</div>
</div>
</div>
My link is: https://jsfiddle.net/sbk2hd4c/10/
Thankyou in advance!!!

Check this
https://jsfiddle.net/sbk2hd4c/11/
You used your Id in div which should be in your input tag
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' >
<input type='text' class="form-control" id='datetimepicker1' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

<input type='text' class="form-control" id='datetimepicker1' />
Change the id for input as above. Div should have different id.

You can bind the changeDate to the datepicker and can set the date in textBox
$('#datetimepicker1').datetimepicker().on('changeDate', dateChangeListener);
function dateChangeListener(event) {
var formattedDate = event.format('dd.mm.yy');
$('text_box_id').val(formattedDate);
}

Related

Datepicker box is not displaying selected date from database

In this image you can see date is showing
but in 2nd image(Date picker) it shows the today date not the selected date.
my code is below
< input name="period" id="period" type="text" value="{{$item->period}}" class="validate date-picker" >
JavaScript code is:
$('.datepicker').datepicker({
format: 'yyyy-mm-dd'
});
Thanks in advance
faisal
use setDate( date ):
It set the date for the datepicker.
eg:
$( ".datepicker" ).datepicker( "setDate", "yourdate" );
You are setting the input value format of date wrong that why it is not working
For example, you are setting the value of input field "10-29-2012" and you have specified the format "yyyy-mm-dd" your both format should be same the below is the working sample
The documentation link can be also helpful for you of date picker
Date picker set date `
$(document).ready(function() {
$('#js-date').datepicker({
format: 'yyyy-mm-dd'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.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.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
With data provide attribute
</div>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="data-date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-info">
Uses the data-provide attribute in HTML
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
With JavaScript
</div>
<div class="col-sm-6">
<div class="input-group date">
<input type="text" class="form-control" id="js-date" value="2018-12-19">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-info">
No data-provide attribute in HTML. Initialized using JavaScript
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-primary" style="margin-top: 10px;">
Plugin Used: https://github.com/uxsolutions/bootstrap-datepicker
</p>
</div>
</div>
</div>

datetimepicker bootstrap eonasdan

I need to get the changed value in the datetimepicker.
I tried
$('#startDate').datetimepicker().on('dp.change', function (event) {
console.log(event.date);
});
And :
$('#startDate').datetimepicker().on('dp.hide', function (event) {
console.log(event.date);
});
But the result is the value before the change.
Help me to understand please.
i think this is what you want (just edit the $('input') with your element ID or class name:
https://jsfiddle.net/yqgxd472/
<div class="container">
<div class="row">
<div class='col-sm-6'>
<br>
<br>
<br>
<div class="form-group">
<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>
</div>
</div>
</div>
</div>
js:
$(function() {
$('input').datetimepicker({
format: 'YYYY-MM-DD H:m:s'
});
});
$('input').datetimepicker().on('dp.change', function(event) {
console.log(moment(event.date).format('YYYY-MM-DD')); // using moment.js
});

Bootstrap Datetimepicker span breaks

I use Bootstrap 3 Datepicker v4 but something breaks and I cannot fix it. I think it's the input which break the css.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
RESULT
What should I overwrite, in order to remove the margin between the span and the input?
I tried to recreate the issue using Bootply, but was unable to.
So try changing the width of the div, like so:
<div class='input-group date' id='datetimepicker1' style="width: 90%" <!-- Or something like that depending on what your preference is -->>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Let me know if this helps!

button for Date and Time in Bootstrap Datetimepicker

I'm trying to have two buttons. One for time and another for date.
For example
http://jsfiddle.net/RR4hw/1383/
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" readonly />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
jQuery(function () {
jQuery('#startDate').datetimepicker();
jQuery('#endDate').datetimepicker();
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
});
how can i approach it? Is this possible?
I solved this by using option "sideBySide":
jQuery('#startDate').datetimepicker({sideBySide: true});
jQuery('#endDate').datetimepicker({sideBySide: true});
I hope it helps.

Preventing bootstrap from breaking between two form elements

I am using bootstrap with the bootstrap datetimepicker and have a bit of a problem.
My problem is best explained by this JSfiddle.
What I want to do is to have three separate form divs in a row and for them to stay in one row no matter the screen size. I would usually acchieve this by simply having a form-group div (as seen in the "situation I want" of the JSfiddle), however in this case, that is not possible because if I do that, then the second input messes with the javascript of the bootstrap datetimepicker, so I cannot touch the form group div.
Is there any way of acchieving what I want to do?
The HTML in which my problem is isolated is:
<div class="container">
<div class="row">
The situation right now:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-inline">
<div class="form-group">
<div class="input-group date date-filter" id="start-date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="text" class="form-control" id="end-time" />
</div>
</div>
</div>
<div class="row">
The situation I want:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-group">
<div class="input-group date date-filter" id="end-date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="end-time"/>
</div>
</div>
</div>
</div>
</div>

Categories