I am using jquery steps for wizard. But inside if I use datepicker or qtip functionality not working. I switched .js references still the issue the same.
Why datepicker event not working inside steps? console not throwing any error.
#Html.TextBoxFor(model => model.BirthDate, null, new {#class = "SPE-Formcontrol section_detail-font-14 calendar", #style = "display: inline", #readonly = "readonly", Name = "BirthDate", id = "BirthDate"})
<script src="~/Scripts/join.js"></script>
<script src="~/Scripts/jquery.steps.js"></script>
join.js
$("#BirthDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-110:-17',
showOn: "button",
buttonImage:"image",
buttonImageOnly: true,
beforeShow: function () {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy',
maxDate: '-17Y'
});
$('.tip').qtip({
style: {
classes: 'myTipClass tipShadow qtip-rounded'
}
});
You need to initialize jquery steps first and then other plugin initialization
$(function () {
//intilize steps first
$("#wizard").steps({
bodyTag: "fieldset",
headerTag: "h4"
});
//intilize other plugins later
$("#BirthDate").datepicker();
});
Hopefully, this resolves your issue
Problem is that datepicker puts triggers on elements and the class 'hasDatepicker' saying that this element has been initialized. Jquery steps moves elements around, triggers are lost.
But the datepicker elements still have the class after moving, thus won't be triggered again if you call datepicker once more. So if you want to reinitialize datepicker you should add this in jquery steps definition:
onInit: function (event, currentIndex, newIndex) {
// Remove hasDatepicker class from initialized elements and remove the button next to datepicker input
$('.hasDatepicker').removeClass('hasDatepicker').siblings('.ui-datepicker-trigger').remove();
// reinitialize datepicker, offcourse replace .datepickerfields with your specific datepicker identifier
$('.datepickerfields').datepicker();
},
Same problem here
It works fine OUTSIDE the wizard, but once the input is set inside, the parent div of the datepicker does appear in the DOM, but it's empty...
No datepicker will appear
tried to declare the
$(".datepicker").datepicker();
BEFORE or AFTER the steps() function, nothing change.
I tried to use the onInit() feature of the steps() function, it still doesn't work
form.steps({
...
onInit : function (event, currentIndex) { $(".datepicker").datepicker(); },
...
});
Related
Here is how I init TinyMCE:
tinymce.init({
selector: '.editable',
inline: true,
contextmenu: false,
setup: function (editor) {
editor.on('blur', function (e) {
var content = editor.getContent();
if ( !content )
selector.text('Enter text here...');
});
}
});
What I basically want is to use some placeholder in case a user has removed everything inside the current .editable element. The code above won't work, because selector is not defined. How do I select a current node a different way?
If you want to place content in the editor instance when its "empty" you can just do this:
tinymce.init({
selector: '.editable',
inline: true,
contextmenu: false,
setup: function (editor) {
editor.on('blur', function (e) {
var content = editor.getContent();
if ( !content )
editor.setContent('<p>Enter text here...'</p>);
});
}
});
You would then need to do something in reverse when the focus returns.
There is a 3rd party plugin that does what you appear to want:
https://github.com/mohan/tinymce-placeholder
I cannot vouch for how good the code is but perhaps that plugin will solve this issue for you in its entirety.
I do have some problem with datepicker after jQuery load.
In the beginning I do have load:
$(document).ready(function() {
if(inputInit.val()==0){
initDateDDMMYY('#formName');
inputInit.val('1');
console.log (inputInit.val());
}
)
}
Source code for function:
function initDateDDMMYY(formname){
var $frm = $(formname);
$frm.find('.datepicker').datepicker('destroy');
$frm.find('.datepicker').datepicker({
dateFormat : "dd.mm.yy",
autoclose : true,
changeYear : true
});
};
On first load there is no problem, but on the next load - date picker is nor working. Even not initialized. Even if I try too init it again with firebug - nothing happens.
Load is normal:
$("#div").load("${action}");
There is a js error in your code!
$(document).ready(function() {
if(inputInit.val()==0){
initDateDDMMYY('#formName');
inputInit.val('1');
console.log (inputInit.val());
}
});
Here you forgot the ");" at the end
I am not sure what cause it to fire three times after selecting a date through date calendar. Here is the options set for rangeSelector
rangeSelector:{
enabled:true,
inputEnabled: true,
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: '%d/%m/%Y',
inputDateParser: function (value) {
value = value.split('/');
console.log(value);
return Date.UTC(
parseInt(value[0]),
parseInt(value[1]) - 1,
parseInt(value[2])
);
}
}
by using backbone.view jquery selector, here how i initiate the chart
this.$el.highcharts(Options, this.extra);
and extra as additional settings to trigger the date picker
highlightSer: function (chart){
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
orientation: "auto right"
});
}, 0);
}
is anyone experience this?
#seeARMS solution from this SO worked for me, with one modification:
Create a separate function for your event
One function has the datePicker method and your settings:
$('input_with_date_picker').datePicker({...});
A separate function controls your on changeDate event:
$(document).on('changeDate', 'input_with_date_picker', function({..do something..}));
or:
$('input_with_date_picker').on('changeDate', function({..do something..}));
Update:
The fiddle you provided in the comments is working as expected because of your added function:
$('input.highcharts-range-selector').on('changeDate', function(e) {
alert(e.date);
});
On page load, it executes twice because you have two elements that match. They seem to both be generated by this JS:
rangeSelector:{
enabled:true,
inputEnabled:true,
inputDateFormat:"%d/%m",
inputEditDateFormat:"%d/%m/%Y",
inputDateParser: function (value) {
value = value.split('/');
console.log(value);
return Date.UTC(
parseInt(value[0]),
parseInt(value[1]) - 1,
parseInt(value[2])
);
}
},
If you change the date on either of the elements, the function executes once, which is the goal of your post.
You may be indicating it's not working because the dates aren't updating when you select a new date from the datePicker. I'm not sure why this is, I'm not familiar with highcharts.
I'm using Trent Richardson's great Datetimepicker. However, I'm running into a specific issue in which the plugin does not act like the traditional jQuery UI Datepicker.
When you start with a blank date, then press next or previous to change the month, in Datetimepicker it automatically inserts a date and time, where jQuery UI does not. The fact that it adds that is causing issues in my application, and I would just like it not to do that in the first place.
Here's my initialization:
function datepickerAdd() {
$('input[name=valueTextField]').addClass('datepicker');
$( ".datepicker" ).datetimepicker({
dateFormat: 'm/d/yy ',
timeText: '<spring:message code='customMetaData.datetimepicker.time'/>',
controlType: 'select',
timeFormat: "h:mm TT",
ampm: true
});
$('input[name=valueTextField]').attr('onPaste', 'return false')
}
Does anyone have anywhere to start with this?
There's no such option for Date, like alwaysSetTime for Time in this Datetimepicker. So you have to implement it by yourself. Just add these lines in your datetimepicker call:
onChangeMonthYear: function(year, month, dpInst, tpInst) {
if(!tpInst.timeDefined && !dpInst.dateDefined) {
this.value = '';
dpInst.dateDefined = null;
}
},
onSelect: function(date, dpInst) {
dpInst.dateDefined = true;
}
Check working JSFiddle here
I need the help of the experts on here.
When I call the function v9_insert_comments('1') the alert(sdate) triggers before I even get to select a date in the datepicker.
My goal is to have the v9_insert_comments() check to see if the sdate is null or not. If its null then just { return } if not { do something else }.
The current case if that sdate is always null because the datepicker never gets a chance to set it.
var sdate
//========================================================================
function v9_insert_comments(x) {
//========================================================================
if (x == 1) {
select_date()
alert(sdate)
}
}//end of function
//========================================================================
function select_date() {
//========================================================================
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: {
opacity: 0.5,
background: 'black'
},
title: "title",
height: 265,
width: 235,
draggable: false,
resizable: false
}); //end of dialog
$('#d1').datepicker({
onSelect: function() {
sdate = $(this).val();
$("#dd").dialog("close");
}
});
} //end of function
Body:
<!-- START OF DATE SELECTOR DIALOG -->
<div style="display:none" id="dd">
<div id="d1"></div>
</div>
<!-- END OF DATE SELECTOR DIALOG -->
In your select_date method you're just setting stuff up. The call to $('#dd').dialog() does all the jQuery UI magic to create a dialog, by updating the DOM and wiring things up. Then you call $('#d1').datepicker(), which sets up a datepicker in a similar way. It's just saying "this div is now a dialog, and this div is now a datepicker". It's not waiting for any user interaction. Your v9_insert_comments function is assuming things are happening synchronously, whereas they're actually happening asynchronously.
After these things are set up, you immediately ask for the value of a variable that hasn't been set yet. It hasn't been set because the anonymous function you supplied for the datepicker's onSelect event hasn't fired yet. This function will only be called when something has been selected in the datepicker. So if you want to do something with the selected date, do it in the event handler.
You could move your alert to the event handler, or you could call v9_insert_comments from the event handler - but in this case you should move the call to select_date elsewhere. The dialog and datepicker only need to be set up once.