I am using this code to fire the popup:
HTML
<div class="popover-markup">
Track
<div class="head hide">Track #item.FullName [#item.Id]</div>
<div class="content hide">
<div class="form-group">
<label>Date Called:</label>
<input type="text"
class="form-control dtp"
placeholder="Date called…">
</div>
</div>
<span class="btn btn-info rr" id="abcd">Submit</span>
</div>
</div>
And my jQuery:
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
placement: "bottom",
content: function () {
return $(this).parent().find('.content').html();
}
});
My intention is to use Bootstrap DateTimePicker widget when the user clicks on the input inside the popover. I have tried using the solution offered in this SO question.
My modified jQuery code now looks:
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
placement: "bottom",
content: function () {
return $(this).parent().find('.content').html();
}
}).on('shown.bs.popover', function () {
$('.dtp').datetimepicker();
});
I still get to see the datetimepicker NOT at the bottom of the input field but at the bottom of the whole popover. what am I missing? Please guide.
You are missing some required div elements,
Depend your needs, possible solutions show the datepicker at bottom of input, the correct HTML....
If with icon
<div class="form-group">
<label>Date Called:</label>
<div class="input-group dtp">
<input type="text" class="form-control" placeholder="Date called…">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Fiddle Example
And Without Icon
<div class="row">
<div class='col-sm-12'>
<label>Date Called:</label>
<input type="text" class="form-control dtp" placeholder="Date called…">
</div>
</div>
Fiddle Example
Rest of the code & approach is all good.
Related
The following is the chose I am using to let the user manually choose working/starting time.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1,#id_2').show();
} else {
$('#id_1,#id_2').hide();
}
});
</script>
By default the field should be hidden, but it is not. Instead even in the checkbox is not checked, the field is visible and to make it hidden I had to check the box and uncheck it again. Then the input field goes hidden. How can i fix this ?
Here is the jsfiddle link, it shows the same problem.
https://jsfiddle.net/shijilt/bs02m98w/
The code is only changing the visibility after clicking the #beastmode element. There's no explicit default otherwise.
You can hide it when the page loads:
$(function () {
$('#id_1,#id_2').hide();
});
Or, even better, style it to be hidden by default in your CSS:
#id_1,#id_2 {
display: none;
}
That way it's hidden by default from the styling itself, regardless of whether or not any JavaScript code successfully executes.
Example
Almost you code is fine. Try this it will work definitely.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1" style="display:none;">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1').show();
} else {
$('#id_1').hide();
}
});
</script>
First you have to hide div where id=#id_1 there are many ways to hide but i use simple method to hide it by display: none; in the style.
Second when you click on checkbox if its true its show the div where id=#id_1 else it will hide the div. If you pass two ids which is wrong because its not found #id_2 in the page that's the reason which not show/hide your content.
excuse me want to ask. I'm sorry in advance if my language is not neat.
how to get value datetimepicker from this form.
<div class="form-group">
<label>Date:</label>
<div class="input-group date" id="reservationdate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input"
data-target="#reservationdate" />
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
I managed to use the datetimepicker function and work but how to get value
$(function () {
$('#reservationdate').datetimepicker({
format: 'L',
});
});
What you did here only initiates the datepicker on that element
$('#reservationdate').datetimepicker({
format: 'L',
});
Based on the documentation, you could then request the value in a few ways.
You would want to call the getValue method after initiation. Usually done after a form-submit or button click event.
$('#reservationdate').datetimepicker('getValue');
Another way would be to use this onChange handler:
$('#reservationdate').datetimepicker({
format: 'L',
onChangeDateTime:function(dp, $input){
alert($input.val())
}
});
UPDATE:
Additionally, your html code is not correct.
You want to be setting the reservationdate id on the input, not the div.
<div class="form-group">
<label>Date:</label>
<div class="input-group date" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="reservationdate"
data-target="#reservationdate" />
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
===========
You need to call the datepicker('getValue'); function.
For your example:
$('button.somebutton').on('click', function () {
var d = $('#reservationdate').datetimepicker('getValue');
console.log(d.getFullYear());
});
This returns a Date object which you can query the year, month, day or time.
Highly recommend you read through the entire documentation page - https://xdsoft.net/jqplugins/datetimepicker/. You might be able to find all these answers and more yourself.
I'm have a Bootstrap 3 DateTimePicker input filed on my webpage and I'm trying to enable 'Edit' button whenever change is made to existing data. The problem is that change of datetime using datatimepicker is not marking my form as 'dirty', so button is greyed out permanently.
<input type="submit" value="{{!myCtrl.thing.id ? 'Add' : 'Update'}}" class="btn btn-primary btn-sm" ng-disabled="myForm.$invalid || myForm.$pristine">
I know how to catch datatime change event using JQuery, but I don't have any idea how to access 'myForm' to change it's state to dirty.
<form ng-submit="myCtrl.submit()" name="myForm" class="form-horizontal">
<label class="col-md-2 control-label" for="date">Date:</label>
<div class="col-md-7">
<div class="input-group date" id='datetimepicker'>
<input class="form-control" name="date" id="datetimepicker1" placeholder="select date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker({
});
});
$("#datetimepicker").on("dp.change", function(e) {
//CODE TO set myForm to 'dirty' state.
});
</script>
</form>
You can manually set it using the general form [formName].$setDirty(). So for you it would be: myForm.$setDirty().
Why don't you try to set a directive to handle jQuery stuff?
mainModule.directive('datePickerHandler', function () {
return {
restrict: 'A',
link: function (scope, el) {
angular.element(document).ready(function () {
$(el).datetimepicker({}).on('dp.change', function(e) {
scope.myForm.$setDirty();
});
});
}
}
});
Then you can have access to the scope directives like form.
I had a date-picker which was working correctly.And its change event was also working fine. Now i implemented a icon and make text box read-only. Now the change event is not fired neither in read-only textbox case nor in non-read-only textbook case.I have changes only html.
HTML of working case:
<label class="control-label">Date</label>
<input type="text" class="form-control date-picker" id="StateDatePicker" placeholder="MM/DD/YYYY">
Javascript of working case:
$StateDatePicker = $("#StateDatePicker");
$(".date-picker").datetimepicker({
format: "MM/DD/YYYY"
})
This is how i called change event.
$StateDatePicker.on("dp.change", function () {
//Performing functionality
});
This was working fine.It was no icon in working case, now i added icon showing in picture:
Now i have changed the following:
HTML:
<div class='date-picker input-group date'>
<input type='text' class="form-control" id="StateDatePicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Date-picker is working fine, only change event is not called
There is no change in JS. Why its change event is not called is not working?
Finally i got my answer
I tried this and it working now
<div class='date-picker input-group date' id="StateDatePicker"> //Set id to div
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Try to use like this where you have placed
This may help you (Not Sure)
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
in your HTML :
on your javascript :
$('.form_date').datetimepicker({
language: 'id',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
You can use the datepicker's onSelect event.
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
If you like, of course, you can make the change event on the input fire:
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
Try something like:
$("#StateDatePicker").datetimepicker({
format: "MM/DD/YYYY"
}).on("changeDate", function () {
//Performing functionality
});
or maybe change your HTML to this: (give id for div tag, not input field)
<div class="input-group input-append date" id="StateDatePicker">
<input type="text" class="form-control" placeholder="MM/DD/YYYY">
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Its working demo.
Html Section
<div class="form-group input-group">
<label class="input-group-btn" for="date-fld1">
<span class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</label>
<input type="text" class="form-control date-input" id="date-fld1" readonly/>
</div>
And in script-----------
$(".date-input").datepicker().on("changeDate",function(){
alert('hi');
});
CDN files used
- http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js
and http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css
I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
I have the following javascript
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function () {
return $(correct tool tip).html();
}
});
});
How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <div class="js-tooltip" style="display:none;" data-tooltip="name"> and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?
Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.
Manage to figure it out myself using the above html:
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function (e) {
return $(this).parent(".form-group").find(".js-tooltip").html();
}
});
});
Can anyone think of a more elegant solution?
You can do like this way...Here is the DEMO
Jquery Part
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$(".form-control").popover({
html : true,
content: function() {
return $('.js-tooltip').html();
},
title: function() {
return $('.js-tooltip').html();
}
});
});
HTML Part
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >
<div class="js-tooltip" style="display: none;" id="n1">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">
<div class="js-tooltip" style="display: none;" id="t2">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
I'm not a fan of how this works, but essentially you have to create an element that stays in the position you want the popover , and append the popover to it. In this case, I have used the container you already have in place for the tooltip html. I'm creating container ID's dynamically so you don't have to worry about doing that in your html.
So for this HTML:
<div class="form-group pos-relative">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
<span class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</span>
</div>
This CSS:
.pos-relative{
position:relative;
}
.js-tooltip{
position:absolute;
top:0;
right:0;
}
And this JS--here's where it happens:
$(function () {
$('.js-tooltip-trigger').each(function(ind, ele){
var $ele = $(ele),
$ttSpan = $ele.next('.js-tooltip'),
ttHtml = $ttSpan.html(),
rndID = 'ttid'+ String(Math.random()).substr(2);
// set the ID, strip the style, and empty the html--
// we already have it stored in the var above
$ttSpan.attr('id', rndID).removeAttr('style').html('');
// make the popovers
$ele.popover({
html: true,
trigger: 'focus',
placement: 'right',
container: '#'+rndID,
content: ttHtml
});
});
});
See it in action here