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..
Related
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.
If I want to add a new date, I have no problem, but if I pull the date from SQL and display it in value, the problem is that the button does not open. I searched on the internet, but I could not find an example.
<div class='col-sm-2'>
<div class='form-group mt-30 mb-30'>
<label clas='control-label mb-10 text-left'>Kalkış Tarihi & Saati</label>
<div class='input-group date'>
<input id='deneme' name='eski_gelis_kalkis_saati' type='text' class='form-control' value='03.02.2019 13:10'>
<div class='input-group-addon'>
<span class='glyphicon glyphicon-th'></span>
</div>
</div>
</div>
</div>
My js code is below
$('#deneme').datetimepicker({
locale: 'tr',
}).data("DateTimePicker").date(moment());
How can I display value with change date?
My local date format is for example 03.02.2018 10:10 dd.mm.yyyy
When I open it calendar show with year and days. Can I make it somehow to first display years?
here is html:
<input style="width: 30%;float: left;" name="date" id="date" type="text"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
ng-model="ctrl.userProfile.birthDate"
is-open="dpOpenStatus.withRequired"
ng-required />
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="setDpOpenStatus('withRequired', $event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
According to the docs, you can set the datepicker-options object's datepickerMode property to one of the following:
datepickerMode C (Default: day) - Current mode of the datepicker
(day|month|year). Can be used to initialize the datepicker in a
specific mode.
So, in your view, add this:
datepicker-options="options"
and in your controller, add this:
$scope.options = {
datepickerMode: 'year',
minDate: new Date()
};
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'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>');