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.
Related
Jquery date picker showing strange behavior inside the v-for loop in my vue.js component. Outside of the loop, it is working fine and date picker is showing. But, inside my v-for loop, it is not picking date picker as expected.
Here is my working code of date picker. (Working Case)
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
Date picker not working in this case (Non-working case)
<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
</div>
Here is my Jquery code of datepicker.
$(".datepickere").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
display("Change event");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
Although I have given a class instead of an id, still problem is the same. What is going wrong?
seems to be a typo in your code. Change datepickere to datepicker and it should work. Also, if I was you, I would use a vue compatible datepicker such as https://www.npmjs.com/package/vuejs-datepicker.
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.
I'm struggling with the answer to this, the reason I'm struggling is because the datepicker is working on one of my pages.
Could an issue be that i'm loading a datatable at the same time as the datepicker? Because on the broken page, i'm loading the datatable which uses the date from the datepicker.
Problem reproduced
JSFiddle - Without including the FilterLoggingTable function, it works fine.
Code snippet for Datepicker
if (typeof $('#generateDate, #loggingDatePicker').datepicker !== 'undefined')
{
var currentDate = new Date();
$('#generateDate, #loggingDatePicker').datepicker(
{
format: 'dd-mm-yyyy',
autoclose: false
});
$('#generateDate, #loggingDatePicker').datepicker('setValue', currentDate).datepicker('update').datepicker();
}
HTML (Broken Datepicker)
<div class="col-sm-6">
<div class="input-group date col-md-3 pull-right" data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="loggingDatePicker" class="form-control" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
HTML (Working Datepicker)
<div class="col-md-4 form-group">
<div class="input-group date " data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="generateDate" class="form-control generatePDFBTNS" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Broken Page
Working Page
DEMO
Ok. The problem was with your below line:
("tr:not(:has(>th))").show().filter
inside FilterLoggingTable() function.
What this does is hides or shows all the trs in the page when criteria is matched!Now why
this effects your calendar is because the bootstrap creates table
for your calendar when you initialize the datepicker and that
table will also match the above criteria which should be only there
for dataTables.
So, what you need to do is just get the trs of dataTable as below:
$('#dataTables-example').find("tr:not(:has(>th))").show().filter(function ()
Now you can keep autoclose:false if you want..
Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>
If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});
I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.
I'm trying to use javascript to automatically modify my input boxes to
<div class="input-group">
**<input type="text" class="form-control " placeholder="Text input">**
<span class="input-group-addon">*</span>
</div>
jsfiddle: http://jsfiddle.net/BEC7N/
The bold line is the line that already exists.
Below is my javascript attempt
$('[data-val-required]').prepend(' <div class="input-group">');
$('[data-val-required]').append(' <span class="input-group-addon">*</span></div>');
But it doesn't work. Any ideas? Thank you.
Change your code to this:
$('[data-val-required]').wrap(' <div class="input-group"></div>');
$('[data-val-required]').after(' <span class="input-group-addon">*</span>');
$('[data-val-required]').after(' <span class="required-indicator">*</span>');
Working Example
Use .wrap()
$('[data-val-required]').wrap('<div class="input-group" />');
$('[data-val-required]').after(' <span class="input-group-addon required-indicator">*</span>');