I'm looking for a jQuery datepicker plugin that I can 'feed' available dates.
Example input:
22-01-2017
23-01-2017
28-01-2017
02-02-2017
Output:
-a datepicker that only allows the dates from the example input.
Daterange wouldn't really work here, as certain dates could be skipped. Does anyone know a (customizeable) jquery plugin that allows this?
Thanks in advance!
Check out my plugin here: https://codecanyon.net/item/caleran-date-range-picker/19454049
And there's a disableDays filter in the plugin, you can use it backwards to enable the days you want.
Like this:
<script type="text/javascript">
$("#caleran").caleran({
disableDays: function(day){
var enabledDays = [
moment("22-01-2017", "DD-MM-YYYY"),
moment("23-01-2017", "DD-MM-YYYY"),
moment("28-01-2017 ", "DD-MM-YYYY"),
moment("02-02-2017", "DD-MM-YYYY")
];
return $.grep(enabledDays, function(d){ return d.isSame(day,"day"); }).length > 0;
}
});
</script>
Demo here: http://rettica.com/caleran/docs/readme.html#custom-disabled-ranges-with-callback-
Related
I want to change group of CSS items in jqGrid. Documentation is saying
Of course if we want to change not only one CSS item from a group, but two or more we can use jQuery extend to do this:
var my_col_definition = {
icon_move : 'ui-icon-arrow-1',
icon_menu : "ui-icon-pencil"
}
$.extend( $.jgrid.styleUI.jQueryUI.colmenu , my_col_definition );
And this is working partially. But I want to override all icons in my Bootstrap with next code:
$.extend($.jgrid.styleUI.Bootstrap, {
common: {
icon_base: "fa"
},
inlinedit: {
icon_edit_nav: "fa-edit"
},
navigator: {
icon_edit_nav: "fa-edit"
},
// ...
});
and my grid stops working and does not respond to any commands. There are no errors in console.
Do anybody know how to fix the problem in an elegant way and do not override every group separately?
It is unknown which versions of Guriddo jqGrid and Bootstrap are used.
I see you try to use the fontAwesome.
With the last release you can use fontAwesome with ths following settings:
<script>
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = "fontAwesome";
</script>
And point to the needed css files as described in this documentation
You can change the icons the way you do in your code without problems - I have tested this and it works.
In any case, please prepare a simple demo which reproduces the problem, so that we can look into it.
My query is that I have a link that redirects to another page. In webkit browsers, how to force the sitecatalyst server call (script execution) to finish before the redirect happens?
I am using sitecatalyst for a portal. I have
configured the custom link call to include the doneAction parameter for
successful call completion on webkit browsers (As mentioned in Adobe guide).
The custom link code for onClick event of button is as below:
<script language="javascript" >
function search(keyword)
{
var s=s_gi('testing');
s.linkTrackVars="prop11,events";
s.linkTrackEvents="event6";
s.prop11=keyword;
s.events="event6";
s.tl(this,'o','Search',navigate());
window.location=searchresults.html;
}
</script>
<script language="javascript" >
function navigate()
{
return false;
/*To induce a delay to ensure that image request is sent to Adobe before the
user leaves the page.(As given in Adobe guide - code release H.25))
Code version H.25 (released July 2012) includes an overloaded
track link method ( s.tl ) that forces WebKit
browsers to wait for the track link call to complete.)*/
}
</script>
However, even after this, I am getting error in custom link tracking. The redirect happens before the call can complete.
Please help on the same. Thanks in Advance.
Regards,
Harshil
Okay so firstly there are a number of issues with how you implemented it. Here is an example of how it should look like:
search
<script type='text/javascript'>
function search(keyword) {
var s=s_gi('testing');
s.linkTrackVars="prop11,events";
s.linkTrackEvents="event6";
s.prop11=keyword;
s.events="event6";
s.tl(this,'o','Search',null,navigate);
return false;
}
function navigate(){
window.location="searchresults.html";
}
</script>
Some points
You didn't actually post the link or whatever you are using that calls the search function so I have a link shown as an example.
You passed the navigate function as the 4th argument when it should be the 5th (with a null or blank string as a placeholder for the 4th)
It should be navigate not navigate(). The way you did it, you are making a call to the function and passing the result of the function as an argument. s.tl requires the actual function or reference to a function, and it will make the call to the function. In fairness, the Adobe document is typoed: it shows the example wrapped in quotes which doesn't work.
The redirect should be placed in navigate, not in search.
Replace the link href with javascript function
function trackLink(e) {
nextUrl = e.href;
e.href = "javascript:sendData('" + nextUrl + "')";
}
function sendData(url) {
s.tl(this, "o", "Link Name", null, function() {
window.location.href = url;
});
}
or try out the following
function sendData(obj) {
s.tl(obj, "o", "Link Name", null, "navigate");
return false;
}
Link
Link tracking is a dinosaur form of tracking as the numbers are barely accurate these days if you are not putting analytics before user experience. What I don't understand is that why don't you measure this on the next page instead of the link, unless you have no control over the next step?
As for your question: Previous examples on how to prevent link following before event is executed are quite solid, but remember if you have other JS code binded, be sure not to break it. As for the syntax, you can pass all variables to s.tl function as an object without setting linkTrackVars and linkTrackEvents for the s-object, which might have negative effects on events if case you use the code on dynamic pages.
E.g.
...
var data = {
linkTrackVars="prop11,events",
linkTrackEvents="event6",
prop11=keyword,
events="event6"
};
s.tl(this, "o", "Search", data, "navigate");
...
Note: You can't actually use props and events together in standard reporting. As per the code you pasted in comments to Crayon I can see that you are using eVars, so I assume that the example was not that accurate.
I'm using the jQuery tablesorter plugin and I have a column that contains name of month and year like this
April, 1975
January, 2001
I would like to sort this column as if it were a date column. As I understand it, it is possible to sort the column with some other 'hidden' value, but I just can't seem to find the documentation for that feature. Any help out there?
Update
This fork http://mottie.github.com/tablesorter/docs/index.html of the tablesorter had just what I needed; the ability to store the value to sort by in an attribute, worked really great.
Just using the textExtraction function. Set data-sort-value on your TDs. Defaults to normal text if it's not present.
$(".sort-table").tablesorter({
textExtraction: function(node) {
var attr = $(node).attr('data-sort-value');
if (typeof attr !== 'undefined' && attr !== false) {
return attr;
}
return $(node).text();
}
});
I have a fork of tablesorter that allows you to write a parser that can extract data attributes from the table cell as well as assign specific textExtraction for each column.
$(function(){
$.tablesorter.addParser({
// set a unique id
id: 'myParser',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// get data attributes from $(cell).attr('data-something');
// check specific column using cellIndex
return $(cell).attr('data-something');
},
// set type, either numeric or text
type: 'text'
});
$('table').tablesorter({
headers : {
0 : { sorter: 'myParser' }
}
});
});
This is now a STANDARD FEATURE of tablesorter, though it's undocumented for some reason. If you open the file https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.js and look at the line # 307 you'll see it supports the "data-sort-value" attribute.
Usage:
<td data-sort-value="42">Answer to the question</td>
It's a bit of a hack (OK, it's a total hack), but if you set the parser for the column to 'text', and pre-fix your pretty output with the string you really want to sort on within a hidden span it will sort correctly.
You can set the parser on a column with the headers option, e.g. to set the parser on the first and second columns to 'text' you would set the following:
headers: {0: {sorter: 'text'}, : {sorter: 'text'}
To do this trick with dates, you can use the ISO8601 date format which sorts lexically. JS's Date objects can generate ISO8601 date strings via the toISOString() function.
Given the CSS:
span.hidden{
display:none;
}
A sample cell in the table would look like this:
<td><span class="hidden">2015-04-18T23:48:33</span>19 April 2015</td>
Not the prettiest code in the world, but it does work.
I am using
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>
Working with data-text
<td data-text="42">Answer to the question</td>
Not Working with data-sort-value
<td data-sort-value="42">Answer to the question</td>
You need to write your own parser. Your parser might end up looking something like:
var months = {'January':1,'February':2, ...};
$.tablesorter.addParser({
id: 'myDate',
is: function(s) { return false; },
format: function(s) {
var x = s.split(', ');
return x[1]+'-'+months[x[2]];
},
type: 'numeric'
});
Not tested, but general idea.
i am using HTML.TEXTAREA in my MVC2.0 application but i cant restrict the textarea to allow user to input only 255 characters.
I have also provided <% html.textarea("Name",new {#maxlength = "255"}) %> but still i couldnt achieve the target.
Please provide me any solutions.
Thanks
Verify your HTML version
In Html 4.0,
maxlength is not a valid property for TextArea.
maxLength attribute is added in HTML 5.0.(But unfortunately HTML 5.0 is quite new and not much browser support it)
For more information,
http://www.w3schools.com/html5/att_textarea_maxlength.asp
You can write java script and restrict text area size.
<script type="text/javascript">
$(function () {
$("#id").keypress(function () {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
</script>
A very easy way is to use SubString. Its not something that you need to bang your head for and you can write it yourself.
For Example:
var textAreaObject = document.getElementById("TextAreaId");
if (textAreaObject != null) {
var maxlength = 60; //Give the desired value for your Maxlength
if (textAreaObject .value.length > maxlength) {
//Substring from the entered text. Easy-peezy
textAreaObject .value = textAreaObject .value.substring(0, maxlength);
}
}
Works everywhere and anywhere. And use this for on paste and on keypress events. Happy coding.
I've been messing around with autoNumeric, a plug-in for jQuery that formats currency fields.
I'd like to wire the plug-in so that all currency fields are formatted by the time the user sees the page, e.g., on load.
Currently, the default that I can't seem to get around is that fields are formatted upon blur, key-up or other action in the fields themselves.
I've been experimenting with the plug-in code and it looks like it will take this relative newcomer some time to resolve this, if at all.
Anybody on this?
Lille
Triggering 'focusout' event formats the field. Triggering 'change' does not work in the most recent version (1.7.4).
$('input.money').autoNumeric({aNeg: '-'}).trigger('focusout');
autoNumeric does all formatting after 'onchange' event fires. So all that you need is to programmatically fire this event. Like this:
$('input.money').autoNumeric({aNeg: '-'}).trigger('change');
Hope this helps!
I just ran into this problem myself. I had to make it more general, but this worked for me:
$('input.auto-numeric').ready(function(){
var format_options = {
aSign: '$'
};
$('input.auto-numeric').each(function(){
$(this).autoNumeric(format_options);
if($(this).attr('id')){
$(this).val($.fn.autoNumeric.Format($(this).attr('id'), $(this).val(), format_options));
}
});
});
This should work.
jQuery(function($) {
$('input.auto').ready(function(){
$('input.auto').autoNumeric();
var inputID = uniqueID; // use the jQuery.get() function to retrieve data
var formatValue = '1234.00'; // use the jQuery.get() function to retrieve data
if(jQuery().autoNumeric){
$('#id').val($.fn.autoNumeric.Format(inputID, formatValue));
}
else{
alert('plugin not available');
}
});
});
Bob
This is what I eventually did:
$(document).ready(function(){
$('input.auto').autoNumeric();
$('input.auto').each(function(){
var element = this
if(element.value !=""){
$('#'+element.id).val($.fn.autoNumeric.Format(element.id, element.value));
}
}
);
});
Another way of forcing formatting is using 'update' like
$(".input-numeric").autoNumeric('update');
In the current version 2.* and onward, this is done by default thanks to the formatOnPageLoad option that is set to true.
It's that simple ;)