I'm using Mark Rackley's StratusForms 1.5. In his docs and other posts, he states that datepickers work in repeating rows.
You can now execute code when repeating rows are added or removed, and elements on repeating rows have unique ID's so that you can use
things like jQueryUI DatePickers in repeating content now.
I get a datepicker on the first row, but no datepicker if the user adds a new row.
Is there a .NewRowAdded() event or something similar that I need to wire up in my javascript? I can't find anything in his docs or videos that cover that.
In the source file stratus-forms-1.5.js, find the function definition
$.fn.StratusFormsRepeatRowAdded = function (container) {}
change that definition to:
$.fn.StratusFormsRepeatRowAdded = function (container) {
$( "#"+container[0].cells[0].childNodes[0].id ).removeClass('hasDatepicker');
$( "#"+container[0].cells[0].childNodes[0].id ).datepicker({
changeMonth: true,
changeYear: true
});
}
In your application's javascript, do something like this in the Init() to set the datepicker on the initial input when the form first loads:
function Init()
{
$("#SFForm").StratusFormsInitialize({
htmlForm: "../SiteAssets/stratus/stratus-test.html",
queryStringVar: "formID",
listName: "StratusTest",
completefunc: function()
{
$( "#tabs" ).tabs({
active: 0
});
$( "#subDate" ).datepicker({
changeMonth: true,
changeYear: true
});
}
});
}
Related
Working on clone using datepicker. I have searched in stackoverflow for my issue i am not getting the correct stuff. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned div the datepicker was not working. I tried giving .destroy the result was not coming as expected.It might be the duplicate question but as I said the solution not working in my case.
Here is the jquery code.
var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function () {
setTimeout(function (){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
$(document).on("click", ".edu_add_button", function () {
alert("checj");
var $clone = $('.cloned-row1:eq(0)').clone(true,true);
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find(".school_Name").attr('disabled', true).val('');
$clone.find(".degree_Description").attr('disabled', true).val('');
$clone.find("input.deg_date").datepicker();
$(this).parents('.educat_info').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
Here is the fiddlelink
Thanks in advance
Jquery datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones).
try updating your js code like this
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
here's the updated JSFIDDLE. hope this helps.
You can re-initiate datepicker,
Put datepicker line at last on click event
$(document).on("click", ".edu_add_button", function () {
...
...
...
...
$(".deg_date").datepicker("setDate", currentDate);
});
It will work!!!
I have Datepicker and it's working fine please check jsfiddle here.
Also I have Jinplace JQuery plugin and it's also working fine please check jsfiddle here.
But I can not get them to work together, I mean put datepicker inside editable jinplace div please check jsfiddle here.
Code:
$('.editable').jinplace({
});
$.fn.jinplace.editors.birthday = {
makeField: function(element, data) {
// Create a label with a checkbox inside it.
var input = $('<input id="datepicker">');
return input;
}
};
$(function() {
$( "#datepicker" ).datepicker({
yearRange: "1900:2016",
dateFormat: "yy-mm-dd",
changeYear: true
});
});
In this case Jinplace generate HTML code like:
<div class="editable" data-type="birthday">
<form action="javascript:void(0);" style="display: inline;">
<input id="datepicker2">
</form>
</div>
But input#datepicker appears in HTML only after clicking on div.editable and have not been listed in the html code before this click. Like this:
<div class="editable" data-type="birthday">
</div>
Please check jsfiddle links above for more info.
How can I get them to work together?
This is because your input does not exist when the datepicker is initialised. You will need to make the datepicker call, which is this code:
$( "#datepicker" ).datepicker({
yearRange: "1900:2016",
dateFormat: "yy-mm-dd",
changeYear: true
});
once the input is rendered on the dom using jinplace.
As far as jinplace's documentation goes I cant find an onload event, So I am not sure how to go about this, unfortunately. But looking at the source code and your example, this might work:
$.fn.jinplace.editors.birthday = {
makeField: function(element, data) {
// Create a label with a checkbox inside it.
var input = $('<input id="datepicker">');
return input;
},
activate: function (form, field) {
field.datepicker({
yearRange: "1900:2016",
dateFormat: "yy-mm-dd",
changeYear: true
});
field.focus();
},
};
I haven't tested this. Good luck!
Working on clone using datepicker. I have searched in stackoverflow for my issue i am not getting the correct stuff. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned div the datepicker was not working. I tried giving .destroy the result was not coming as expected.It might be the duplicate question but as I said the solution not working in my case.
Here is the jquery code.
var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function () {
setTimeout(function (){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
$(document).on("click", ".edu_add_button", function () {
alert("checj");
var $clone = $('.cloned-row1:eq(0)').clone(true,true);
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find(".school_Name").attr('disabled', true).val('');
$clone.find(".degree_Description").attr('disabled', true).val('');
$clone.find("input.deg_date").datepicker();
$(this).parents('.educat_info').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
Here is the fiddlelink
Thanks in advance
Jquery datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones).
try updating your js code like this
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
here's the updated JSFIDDLE. hope this helps.
You can re-initiate datepicker,
Put datepicker line at last on click event
$(document).on("click", ".edu_add_button", function () {
...
...
...
...
$(".deg_date").datepicker("setDate", currentDate);
});
It will work!!!
Somehow my jQuery UI Datepicker Month/Year Dropdown not working in any popup in latest firefox .
When I click on Month or Year Dropdown, the options list doesn't appears.
Here is my Popup & Datepicker Code:
$( "#dialog-form" ).dialog({
modal: true
});
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
I prepared a demo on JSfiddle too:
http://jsfiddle.net/469zV/2/
This is because the modal enforces focus on itself. Here is a solution for this as mentioned here . Add the below script to your js file. That's it.
jsfiddle: http://jsfiddle.net/surjithctly/93eTU/16/
Ref: Twitter bootstrap multiple modal error
// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});
$confModal.modal({ backdrop : false });
For Bootstrap 4:
replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
I had to use
$.fn.modal.Constructor.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
}, this))
}
in order to restrict focus inside model when we use Tab to focus elements (Got from GIT).
tried this>>
$("#dateOfBirth").datepicker({
beforeShow: function(input, inst) {
$(document).off('focusin.bs.modal');
},
onClose:function(){
$(document).on('focusin.bs.modal');
},
changeYear: true,
yearRange : '-150:+0'
});
Now I can select the year :)
Ideal solution is to move date picker popup div inside modal dialog.
$("#dialog-form").dialog({
modal: true,
width: 500,
height: 500
});
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
beforeShow: function(el, dp) {
$(el).parent().append($('#ui-datepicker-div'));
$('#ui-datepicker-div').hide();
}
}
});
Note: Will have to update css a bit. Check jsfiddle link for actual demo.
JsFiddle: http://jsfiddle.net/469zV/414/
Magnific popup with jquery ui datepicker (changemonth and changeyear is enabled)
Try this code
// Added to make calendar drop downs work properly
$.magnificPopup.instance._onFocusIn = function(e) {
if( $(e.target).hasClass('ui-datepicker-month') ) {
return true;
}
if( $(e.target).hasClass('ui-datepicker-year') ) {
return true;
}
$.magnificPopup.proto._onFocusIn.call(this,e);
};
In modern times -- 2018, with Bootstrap 4.1 -- I was able to solve this by simply passing focus : false to the modal constructor.
try this:
beforeShow: function(el, dp) {
uidp = $('#ui-datepicker-div').addClass('forced-display-none').detach();
$(el).parent().append(uidp);
setTimeout(function(){$(uidp).css({'position':'relative','left':'0px','top':'0px'}).removeClass('forced-display-none')},200);
}
define forced-display-none as:
.forced-display-none {display: none !important;}
In my case, I believed the datepicker was failing, but what really happen was that a previously referenced datepicker (bootstrap-datepicker.js) was taken precedence over the jquery-ui datepicker.
I give a solution for jquery daterangepicker nested in bootstrap modal (problem: selectors month/years not appearing on FF browser). The solution is to add the "parentEl" option indicating the modal in which the daterangepicker is to be initialized:
$('#example-date-input').daterangepicker({
parentEl: $('.modal-where-daterangepicker-should-be-nested'),
.....
});
I have this piece of code that uses jquery datepicker and jquery masked input.
jQuery(function($) {
$(document).on('click', '#date', function () {
var me = $("#date");
me.datepicker({
showOn: 'focus',
altFormat: "mm/dd/yy",
dateFormat: "mm/dd/yy",
minDate: '12/12/2000',
maxDate: '12/12/2020'
}).focus();
me.mask('99/99/9999');
}).on('select', '#date', function () {
var me = $("#date");
me.mask('99/99/9999');
});
});
JSFiddle
The code uses jquery on because the input element in the application is dynamically added into the page. And the masked input is also registered from select event because user can come to the input by pressing tab from previous input.
It doesn't work on Firefox 31, but it works fine on Chrome 36 and IE 11.
When the input field is empty, user should be able to type anything (based on masked filter) in the input element.
Kindly suggest me what's wrong with the code.
Just fixed it by changing the select into focus, I can't remember why I used select in the first place.
jQuery(function($) {
$(document).on('click', '#date', function () {
var me = $("#date");
me.datepicker({
showOn: 'focus',
altFormat: "mm/dd/yy",
dateFormat: "mm/dd/yy",
minDate: '12/12/2000',
maxDate: '12/12/2020'
}).focus();
}).on('focus', '#date', function () {
var me = $("#date");
me.mask('99/99/9999');
});
});
Fixed JSFiddle