I'm encountering an issue using the YADCF date filter for DataTables with the Bootstrap-Datetimepicker styling option. The issue is that the Months/Years/ are overflowing from the dropdown container. The weird part is that the actual date selection looks fine. I've included some screenshots below.
This is what the month selection looks like, the year selection looks the same way.
However, the date selection looks normal, like this:
I have other date picker drop downs throughout my app that look normal:
Initializing the date filter field as so:
yadcf.init(tableElement.DataTable(), [
{ column_number : 11,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'YYYY-MM-DD',
filter_container_id: 'yadcfDateDiv'
}]);
I just can't seem to figure out what styling property is needed to resolve this. I've tried adjusting the padding/margins (as suggested in other posts I've found) of the months and such but it just makes them closer together, not below each other like the last screenshot. If anyone has any ideas it would be greatly appreciated.
Versions
YADCF: 0.9.4
DataTables: 1.10.16
Eonasdan/bootstrap-datetimepicker 4.7.14
After digging through the Eonasdan/bootstrap-datetimepicker documentation, I discovered that the DateTimePicker plugin has a WidgetParent option that can be used to set the parent element in which the widget will reside.
Since I am initializing the DateTimePicker plugin through YADCF and passing in a custom filter_container_id, I found that if I also passed that same element to the WidgetParent property it will display as intended.
I have added the following code to my DataTable initialization function for the page which has resolved this issue:
$('input[id^="#yadcf-filter--orders-datatable"]').data("DateTimePicker").options({
"widgetParent": '#yadcfDateDiv'
});
It selects both of the input fields that are generated by the YADCF plugin which the DateTimePicker objects are bound to and sets the appropriate parent element.
Hopefully this helps some future Googler.
I need my users to be able to select a specific datetime in an input field.
I would like to use angular-ui-bootstrap library as it avoids the Jquery dependancy.
The problem is that even if it contains a datepicker and a timepicker, it seems it's not possible to have them in a popup with a nice layout.
I found a component that do exactly what I'd like to do with angular-ui-bootstrap:
http://www.malot.fr/bootstrap-datetimepicker/demo.php
The problem is that it uses Jquery and we need to include a lot of javascript files whih makes the page a bit heavy just for this need...
I investigated in the angular-ui-bootstrap github repo, and found this issue which contain a plunker sample that addresses partially my problem, but with this example there is no possibility of selecting the time.
Does anyone know if it's possible at the moment to use angular-ui-bootstrap datepicker and timepicker to select a datetime?
Maybe this can help. I created a date time picker that wraps the date and time pickers. You can find it here
https://github.com/Gillardo/bootstrap-ui-datetime-picker
The question is some kind of old but in case anybody is still looking for an answer, here is my implementation for timepicker-popup, purely written in angular.
plunkr
I is a mixture of angular-ui-bootstrap datepicker-popup and timepicker with switchable seconds ability.
So, have fun with it!
Why don't you try to use it with a dialog? I made one with dojo and it looks great:
http://jsfiddle.net/eugenia96/t9bae/
var dojoConfig = (function() {
var base = location.href.split("/");
base.pop();
base = base.join("/");
return {
async: true,
isDebug: true,
parseOnLoad: true,
packages: [{
name: "demo",
location: base + "/"
}]
};
})();
I have implemented a Fullcalendar on a RoR page.
I would like to add a list (index) below the calendar showing events for the day the user selects. Click on a day and that days events list below the calendar. I'd like it to be dynamic (don't reload the whole page).
Please point me in the right direction to learn how to do this.
I have a subscription to Railscast. But, I'm not sure what to look for.
Thanks
You can use the dayClick callback to call an ajax function which populates your index/list
I think you should make a javascript function , that listens to the click event of 'tb' in Fullcalendar . It should trigger ajax call to fetch events from the database , filtered by date . This Railscast is a very nice example how ajax calls refresh some page content without reloading the whole page .
I am using jquery.ui.datepicker in asp.net mvc3 on windows 7.I changed my system date format as
mm/dd/yyyy
to
yyyy-mm-dd
Then my project calender format also changed and default dates coming.Some times date picker calender is not showing.
Can anyone tell me how to solve this issue
Sangar82's answer is the most complete and correct (I upvoted it for that reason) but a quicker way of just setting the format without creating/downloading a localisation file is:
$(".dateinput").datepicker({dateFormat: 'dd/mm/yy'});
Try to use Datepicker Localization
The date picker is designed to allow localizations to be easily created and used. Many localizations are already available, and additional ones are welcomed.
The date picker plugin maintains a manager object, $.datepicker, that lets you register new localizations. This object maintains an array of localization settings indexed by language, with '' accessing the default (English) version: $.datepicker.regional['fr'].
A new localization should be created in a separate JavaScript file named ui.datepicker-.js. Within a document.ready event it should add a new entry into the $.datepicker.regional array, indexed by the language code.
http://docs.jquery.com/UI/Datepicker/Localization
Code:
$('selector').datepicker($.datepicker.regional['<language>']);
Example
$('.myinput').datepicker($.datepicker.regional['fr']);
When you download the Jquery UI you can find in the following folder the translation of datepicker on several languages (69 translations)
development-bundle/ui/bundle/i18n
Example of use:
<script type="text/javascript" src="js/ui/development-bundle/ui/bundle/i18n/ui.datepicker-fr.js"></script>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.datepicker.regional['fr']);
$("#StartDate").datepicker();
});
</script>
I'm working with a dynamic DOM here, and have called the jQuery UI datepicker to all inputs with a specific class name, in this case .date
It works great with the first, static, construct but when I clone it the event handlers don't seem to want to move over. I get the Firebug error:
inst is undefined
I tried looking into jQuery's new live() function but couldn't combine the two. Any ideas?
Ah, got it. Right after I append the HTML to the DOM I run this on all the inputs I'd like to have a datepicker pop up with. Datepicker adds a class to elements it has been attached to, so we can filter out existing inputs and only apply it to new ones.
$('.date').not('.hasDatePicker').datepicker();
I hope this helps people as I was Googling for days and didn't find anything!
You should also note that it would be faster to check for input.date in the new generated HTML by setting that as a context, rather than the whole page, as it will save time, due to this being a more efficient operation.
I had a similar Issue, I had multiple tables on a page and each had multiple datepickers, also on click of button "AddLine" it added a table row with dynamic HTML and datepicker.
I realized after a lot of search that my input date fields had no "id" defined they looked like this
<input type="text" class="datepicker" name="mDate1" value="" size=8 >
jquery was pointing all the date fields values to the very first date field defined on page, the calendar would popup on all the date fields but the value of 1st date field would change, I made a change to the html like this
<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >
by adding a "id" and it started working, for the dynamic date fields I change the Id like this
var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});
You need to use the 'live' event to make it work with dynamic DOM. So, if the class for your datepicker inputs is 'date-input', following code will make it work:
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.
First, what is causing the problem:
JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.
Solution:
1) destroy datepicker
2) assign new unique ids to all input field
3) assign datepicker for each input
Make sure your input is something like this
<input type="text" name="ndate[]" id="date1" class="n1datepicker">
Before you clone, destroy datepicker
$('.n1datepicker').datepicker('destroy');
After you clone, add these lines as well
var i = 0;
$('.n1datepicker').each(function () {
$(this).attr("id",'date' + i).datepicker();
i++;
});
and the magic happens
Use
$j(id or class).removeClass('hasDatepicker').datepicker();
It is working
Use jQuery selectors:
$(".mydatepicker:not(.hasDatepicker)").datepicker()
Multiple instances of the jquery-ui library on the page will cause this error too. Removing redundant instances work for my case
I experienced the same symptom, in this caused by having a td containing element with the same id attribute as the input,
<td id="fld_xyz"><input id="fld_xyz" class="date" /></td>
I know this isn't ideal anyway, but it's worth knowing that the datepicker component seems to be relying on the uniqueness of the id.
I had this problem. My situation ended up being I had another element with the same ID as the input with the datepicker.
Today I faced the same issue... I am using datetimepicker plugin in my application.
Also using jquery's default datepicker too. When ever I am invoking them both on document ready I am getting the error inst is undefined.
$(document).ready(function(){
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$("#MainForm").validationEngine('attach');
....
});
So I changed the code to invoke before document ready like below:
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$(document).ready(function(){
$("#MainForm").validationEngine('attach');
....
});
Now every thing is working fine. No problems.
I had a similar problem with data picker not working after a first call. I found an answer to my issue here:
http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
I was cloning sections dynamically from template and inadvertently including the class that datepicker adds once its called:
hasDatepicker
I placed my first datepicker call after I clone the template and that did it. I then added a datepicker call after each instance of clone:
$(source).clone().appendTo(destination).find(".datepicker").datepicker();
After trying many of the answers here, this is what worked for me and is showing on the first click/focus
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
this needs that your input have the class 'mostrar_calendario'
live is for JQuery 1.3+ for newer versions you need to adapt this to "on"
See more about the difference here http://api.jquery.com/live/
If it still doesn't work, it is because of the cloned id. You can completely remove datepicker like this:
$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();