function init() {
$('.message-composition__footer')
.prepend('<input type="text" id="datepicker_1" placeholder="Select date" class="input input--pilled event-form__date-input u-hide-focus" readonly>');
let dp = $( "#datepicker_1" );
console.log(dp);
$(dp).datepicker({
showOn: 'both',
onSelect: function (dateText, inst) {
schedule_date = dateText;
$( dp ).val(dateText);
console.log("schedule_date - " + schedule_date);
}
});
};
document.addEventListener('turbolinks:load', () => {
console.log('turbolinks:load');
init();
});
(function($) {
console.log('new-message script loaded');
init();
})(jQuery);
'turbolinks:load' event fires successfully but datepicker does not work.
if I reload the page then it works. I'm stuck here for 2 days now, please help.
Datepicker after reloading page
Datepicker without reloading page (when 'turbolinks:load' event fires)
Related
I'm using two datepickers in my project, start date and end date.
The first one open the second calendar with show method.
I notice the next button on the second calendar close and reopen the calendar.
I want to avoid this "open/reopen" issue.
What am i doing wrong ?
HTML
<input id="startDate" type="text" /><br />
<input id="endDate" type="text" /><br />
Javascript
$(function(){
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function (dateText, inst) {
$('#endDate').datepicker("show");
}
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy'
});
});
Please check my code : http://jsfiddle.net/8w8v9/3078/
I have a dirty solution, I can only suppose what happen: you show the "endDate" datepicker before is totaly closed the first one and this creates some conflict.
The JSFiddle
$(function() {
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
setTimeout(function() {
$('#endDate').datepicker('show');
}, 50);
}
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy'
});
});
Have the following code... (in a bootstrap environment)
<script>
$(document).ready(function(){
$( "#DateValidfrom" ).datepicker( {
showAnim: "clip",
minDate: +2,
maxDate: "+24M +1D",
dateFormat: "DD, d M yy",
altFormat: "yy-mm-dd",
altField: "#alt-date",
changeMonth: true,
changeYear: true,
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
});
$( "#DateValidTo" ).datepicker({dateFormat: "yy-mm-dd"});
});
</script>
All works good - no probs UNTIL I click out of the datepicker field say to go to fill out a another field, come back to the datepicker field, click, and get the error "Uncaught TypeError: Cannot read property 'setDate' of null(…)"
I refresh the page - all good again..
So, first click - works well, click out and come back again - no go - error as above.
This part of the code the problem?
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
The 3 fields are
<input type="text" id="DateValidfrom" name="DateValidfrom" readonly class="form-control" required>
<input type="hidden" id="alt-date" name="DateValidfrom" />
<input name="DateValidTo" type="hidden" id="DateValidTo">
Arrrgghhhh.... Surely it can't be this simple???
Changed
onClose: function() {
To
onSelect: function() {
Seems to work? Correct?
Im using a jQuery UI button and I want to point it to specific url.
How is that possible?
<button>Button</button>
<script>
$(function() {
$( "input[type=submit], button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
Html:
<button id="btYourButton">Button</button>
Javascript:
<script>
$(function() {
$( "#btYourButton" ).button().click(function( event ) {
window.location = "http://google.com"
});
});
</script>
I have the following script using the jQueryUI autocomplete widget. It calls some function whenever a menu item in the selection box is being selected:
<script type="text/javascript">
$(function() {
$( "#tags" ).autocomplete({
source: [ "ActionScript", "AppleScript", "Asp"],
select: function() {
console.log("Element has been selected");
}
});
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
This works nicely. But I need this method in a multiple of instances of the autocomplete widget, so I prefer extending the autocomplete widget using the widget factory.
This works nicely whenever I want to override methods of the autocomplete plugin:
$.widget("ui.myAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {
search: function( value, event ) {
// this WORKS!
console.log('overriding autocomplete.search')
return $.ui.autocomplete.prototype.search.apply(this, arguments);
}
}));
However, I have no clue how to do that for the underlying menu widget.
I tried to override the _init method and binding a function to the select event. However this does not work as I don't know how to access the bind method of the menu-widget (or this menu widget is not yet there at this point during runtime)
$.widget("ui.myAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_init: function() {
// this does NOT work.
this.bind('select', function() { console.log('item has been selected') })
return $.ui.autocomplete.prototype._init.apply(this, arguments);
}
}));
I think you're close; you should be overriding _create instead of _init:
$.widget("ui.myAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_create: function() {
// call autocomplete's default create method:
$.ui.autocomplete.prototype._create.apply(this, arguments);
// this.element is the element the widget was invoked with
this.element.bind("autocompleteselect", this._select);
},
_select: function(event, ui) {
// Code to be executed upon every select.
}
}));
Usage:
$("input").myAutocomplete({
/* snip */
});
Here's a working example: http://jsfiddle.net/EWsS4/
I'm using datepicker inside my input , my last field is the datepicker input , after validating it i want to set focus on another input inside my form , but the problem is the datepicker is not closed even taht it does not have the focus..
how can I close the datepicker when i set the focus on another input field?
(I tried .datepicker("hide"); but it did not worked for me).
UPDATE:
this is my code:
$(function()
{ $( "#test_date" ).datepicker({
dateFormat: "dd/mm/yy"
});
});
//when i call my function:
$( "#test_date" ).datepicker("hide"); //---> this does not work!
Thank's In Advance.
Question Edited to work with the latest version of jqueryUI
JqueryUi auto-closes the datepicker when an element loses focus by user interaction, but not when changing focus with JS.
Where you are calling your function which removes focus from the input assigned a datepicker you also need to call:
$("#test_date ~ .ui-datepicker").hide();
This code is hiding the datepicker which is a sibling (~) of #test_date.
To be dynamic, and using the class assigned by jQueryui you can do:
$(".hasDatepicker").on("blur", function(e) { $(this).off("focus").datepicker("hide"); });
;(function() {
function eventOnFocusDP(e, par) {
if (par.ver == $.fn.jquery) {
if (this.tmr) clearTimeout(this.tmr);
par.lbl1.text(par.msgs[1]);
this.tmr = setTimeout(function() { par.inpNP.focus(); }, par.secs*1e3);
}
}
function eventOnFocusNP(e, par) {
if (par.ver == $.fn.jquery) {
par.lbl1.text(par.msgs[0]);
par.lbl2.text(par.msgs[2]);
}
}
function eventOnBlurNP(e, par) {
if (par.ver == $.fn.jquery) par.lbl2.text("");
}
function eventOnBlurHDP(e, par) {
if (par.ver == $.fn.jquery) {
$(this).off("focus").datepicker("hide");
}
}
function test(secs) {
this.ver = $.fn.jquery;
this.secs = (typeof secs)=='number'?secs:2;
this.msgs = [
'This will lose focus to box below '+this.secs+' seconds after it gains focus.',
'Losing focus in '+this.secs+' seconds!',
'Focus now on bottom box.'
];
this.inpDP = $('[name=datePicker]');
this.inpNP = $('[name=nextPicker]');
this.lbl1 = $('#dPMsg').text(this.msgs[0]);
this.lbl2 = $('#dPMsg2');
var par = this;
this.inpDP.datepicker({ dateFormat: "dd/mm/yy" })
.on('focus', function(e) { eventOnFocusDP.apply(this, [e, par]) });
this.inpNP.on('focus', function(e) { eventOnFocusNP.apply(this, [e, par]) });
this.inpNP.on('blur', function(e) { eventOnBlurNP.apply(this, [e, par]) });
$(document).on('blur', '.hasDatepicker', function(e) { eventOnBlurHDP.apply(this, [e, par]) });
return this;
}
function init() {
window.Test = test;
setTimeout(function() {
$(document).on('change', '.switcher, .switcher-ui', function(e) { if (window.Test) new Test(); });
$(jQueryUISwitcher).trigger('change');
}, 1e3);
}
if (document.readyState == "complete") init();
else jQuery(window).on('load', init);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/JDMcKinstry/cfc32292cbbfa548fb9584db05b2b2fc/raw/4f16f7ee441dfb98aa166a2e84193b14574a46d1/jquery.switcher.js"></script>
<form action="javascript: void 0">
<input type="text" name="datePicker" id="dP" placeholder="mm/dd/yyyy" />
<label for="dP" id="dPMsg"></label>
<hr />
<input type="text" name="nextPicker" placeholder="tab to here" />
<label for="dP" id="dPMsg2"></label>
</form>
<hr />
<hr />
<hr />
Here's a modified solution that worked for me:
$(".hasDatepicker").each(function (index, element) {
var context = $(this);
context.on("blur", function (e) {
// The setTimeout is the key here.
setTimeout(function () {
if (!context.is(':focus')) {
$(context).datepicker("hide");
}
}, 250);
});
});
My version of js:
<script type="text/javascript"> $(function () {
$("#dtp1").on("dp.change", function (e) {
$('#dtp1').data("DateTimePicker").hide();
});
});
I hope it's help you
This worked for me:
$("#datepickerTo").datepicker({
onSelect: function () {
$(this).off( "focus" );
}
});