I want to create my own locale in moment.js, its parent should be the Arabic local but I want only to change to numeric format to display 0-9, not the default display.
As per documentation, I can start with that:
moment.defineLocale('ar-sa-mine', {
parentLocale: 'ar-sa',
/*
here I need to specify the numeric: change **this ٢٩ to 29**
*/
});
If you look at locale/ar-sa.js code you will note that moment uses preparse and postformat to convert from numeric characters to arabic.
You can simply restore default behaviour resetting preparse and postformat (e.g. see moment code: function preParsePostFormat (string) { return string; })
Here a live sample:
console.log( moment().format() );
console.log( moment().format('dddd DD MMMM YYYY') );
moment.defineLocale('ar-sa-mine', {
parentLocale: 'ar-sa',
preparse: function (string) {
return string;
},
postformat: function (string) {
return string;
}
});
console.log( moment().format() );
console.log( moment().format('dddd DD MMMM YYYY') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/ar-sa.js"></script>
Related
Angular UI Bootstrap changed the way of what the datepicker expects as ng-model in some version after 1.13.0. Before it was fine to give it an ISO date string, now it wants a Date object.
I consume ISO date strings from my API though, so I have to
convert them into Date objects before giving it to the datepicker and
convert them back to an ISO date string when storing it.
In the past I used a directive like this:
function DateObjectDirective() {
const directive = {
restrict: "A",
require: ["ngModel"],
link(scope, element, attributes, controllers) {
const ngModel = controllers[0];
ngModel.$formatters.unshift(value => {
let output = null;
if(value) {
output = moment(value).toDate();
}
return output;
});
ngModel.$parsers.unshift(value => {
let output = null;
if(value) {
output = moment(value).format();
}
return output;
});
},
};
return directive;
}
This no longer works though, as the following error is reported:
this.activeDate.getFullYear is not a function
My guess is that the datepicker still uses the string as reference. Is there any other way I can convert before giving my data to the datepicker?
I found out that the directive I posted does indeed still work. The only problem was the order in which AngularJS evaluated the directives.
For example:
<input ng-model="someDateString" uib-datepicker-popup="yyyy-MM-dd" woo-date-object>
In my case, woo-date-object was always evaluated before uib-datepicker-popup. The result was that the datepicker has always pushed its own formatter on top of ngModel.$formatters, thus eliminating the possibility for me to intervene.
The solution is to give the own directive a higher priority. UI's datepicker doesn't have one set, so anything above 0 (which is the default) works:
{
restrict: "A",
require: "ngModel",
priority: 9999,
link(scope, element, attributes, ngModel) {
ngModel.$formatters.push(value => {
let output = new Date();
if(value) { output = moment(value).toDate(); }
return output;
});
ngModel.$parsers.push(value => {
let output = null;
if(value) { output = moment(value).format(); }
return output;
});
},
}
I have a kendo datetimepicker control and when a user manually types in an incorrect format missing the colon in the time, the validation does not catch this and in the MVC controller, the models property has a null date/time.
My client side validation is able to parse 21/01/2015 1230 but by the time it reaches the model in the controller server side its null, as it cannot map and parse the datetime.
Some console.log output of the value input and kendo.parseDate's effort.
21/01/2015 0000
Wed Jan 21 2015 00:00:00 GMT+0000 (GMT Standard Time)
Here's my client-side validation below.
So how can I force the validation to work client-side?
$("#accidentForm").kendoValidator({
rules: {
date: function (input) {
if (input.is("[name=Accident.IncidentDate]")) {
console.log(input.val());
var d = kendo.parseDate(input.val());
console.log(d);
return d instanceof Date;
}
return true;
}
},
messages: {
customRuleDateTimePick: "Incident date time format incorrect."
}
});
// attach a validator to the container and get a reference
var validatable = $("#accidentForm").kendoValidator().data("kendoValidator");
$("#btnSave").click(function () {
//validate the input elements and check if there are any errors
if (validatable.validate() === false) {
// get the errors and write them out to the "errors" html container
var errors = validatable.errors();
$(errors).each(function () {
$("#errors").html(this);
});
return false;
}
return true;
});
OK specifying a format and culture parameter on the kendo.parseDate seems to help and stops the post to the server until a valid date AND time is input.
$("#accidentForm").kendoValidator({
rules: {
date: function (input) {
if (input.is("[name=Accident.IncidentDate]")) {
var d = kendo.parseDate(input.val(), ["dd/MM/yyyy HH:mm"], 'en-GB');
return d instanceof Date;
}
return true;
}
},
messages: {
date: "Incident date time format incorrect."
}
});
Another alternative, simpler I think, was to extend the validator methods for date types. This then picked up the MVC error message attributes, so I get to use the right resource.resx file rather than hard code my error text.
<script type="text/javascript">
$(function () {
$.validator.methods.date = function (value, element) {
// Custom validation required for DateTimePicker, so use kendo.parseDate as it works better than jquery unobtrusive validation.
return this.optional(element) || kendo.parseDate(value, ["dd/MM/yyyy HH:mm"], 'en-GB') !== null;
}
});
</script>
I have a Kendo NumericTextBox. This text box allows positive and negative numbers.
As expected, negative numbers have a '-' prefix.
Is it possible to prefix a '+' on positive numbers?
I'm using ASP.NET MVC 5. Here's a code sample:
#Html.Kendo().NumericTextBoxFor(model => model.PositveNegative).Step(0.25f)
Any help with this would be greatly appreciated.
Thanks.
Abrar
You can use Change and Spin event handler.
Here are the code in javascript version.
$("#inputID").kendoNumericTextBox({
format: "+#",
change: function() {
var value = this.value();
if(value>0) this.options.format="+#";
else this.options.format="#";
},
spin: function() {
var value = this.value();
if(value>0) this.options.format="+#";
else this.options.format="#";
}
});
Using Mr Cocococo's answer as a starting point here is the MVC wrapper version for you:
#(Html.Kendo().NumericTextBox().Name("Test").Step(0.25f)
.Events(events => events.Change("Testing").Spin("Testing"))
)
<script>
function Testing()
{
var numeric = $("#Test").val();
if (numeric > 0)
{
$("#Test").kendoNumericTextBox({ format: "+##.##", decimals: 2 });
}
else
{
$("#Test").kendoNumericTextBox({ format: "##.##", decimals: 2 });
}
console.log(numeric);
}
</script>
This works with either typing or using the spinners and should give you the desired results.
Datepicker using Jquery loses focus to the textbox after date selected. I am using jquery-ui-1.9.2.When a date is selected the focus not coming to the textbox.Any solution?
Try using the below code.
HTML code:
<input type="text" id="date"/>
JQuery:
$("#date").datepicker({
onClose: function () {
$(this).focus();
}
});
JSFiddle1
EDIT: The above code has a problem in IE, the datepicker is not getting closed. Here in this blog you can find the more information.
<script language='javascript' src="jquery-migrate-1.2.1.js"></script> // download and add this
$("#date").datepicker({
/* fix buggy IE focus functionality */
fixFocusIE: false,
onClose: function(dateText, inst) {
this.fixFocusIE = true;
this.focus();
},
beforeShow: function(input, inst) {
var result = $.browser.msie ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
});
JSFiddle2
$(".datepicker").datepicker({
onClose: function () {
$(this).parents().nextAll().find($(":input[type !='hidden']")).first().focus();
}
});
});
I have found an easier way that will put the focus on the next input, no matter how nested it is. You can always swap out the condition after the .find to whatever you like and it will bring the focus to that.
Initialise all the datepcikers on Doc Ready
$('.datepicker').datepicker(
{
onClose: function () {
this.focus();
}
});
Exapnding Praveen's answer.
I had one problem with it. On IE datepicker refused to show up each odd time I focused a field.
Also, there was a slight logical issue with that solution (which did not affect anything, but still not correct to my eye): fixFocusIE field is being set on options, but then later it is being called on "this", when "this" refers to DOM element and not options object. So essentially there are two fixFocusIE - one in options (unused) and the second one on DOM element itself.
And also $.browser.msie did not work anymore, I had to invent my own IE detector.
My working code looks like that:
var el = $("selector of element I need to assign to datepicker");
var options = {}; // actually I fill options from defaults and do some other manipulations, but I left it as empty object here for brevity
options.fixFocusIE = false;
function detectIE() {
var ua = window.navigator.userAgent;
if(ua.indexOf('MSIE ') > 0 ||
ua.indexOf('Trident/') > 0 ||
ua.indexOf('Edge/') > 0) {
return true;
}
// other browser
return false;
}
/* blur() and change() are needed to update Angular bindings, if any */
options.onSelect = function(dateText, inst) {
options.fixFocusIE = true;
$(this).blur().change().focus();
};
options.onClose = function(dateText, inst) {
options.fixFocusIE = true;
this.focus();
};
options.beforeShow = function(input, inst) {
var result = detectIE() ? !options.fixFocusIE : true;
options.fixFocusIE = false;
return result;
};
/* and this one will reset fixFocusIE to prevent datepicker from refusing to show when focusing the field for second time in IE */
el.blur(function(){
options.fixFocusIE = false;
});
el.datepicker(options);
I want to make "jQuery UI TAB" blink (like notification).
I have diffrent tabs (Inbox | Sent | Important). My timer function checks if there is a new message in inbox, if so, I want the Inbox tab to start blinking/ flashing unless its clicked open.
Have tried diffrent options like .effect(..), .tabs(fx: {..}) but nothing seems to work :(
Any idea if its possible or not?
Yes it's definitely possible.
To give me some practice, I've written a jQuery blinker plugin for you:
jQuery:
(function($){
// **********************************
// ***** Start: Private Members *****
var pluginName = 'blinker';
var blinkMain = function(data){
var that = this;
this.css(data.settings.css_1);
clearTimeout(data.timeout);
data.timeout = setTimeout(function(){
that.css(data.settings.css_0);
}, data.settings.cycle * data.settings.ratio);
};
// ***** Fin: Private Members *****
// ********************************
// *********************************
// ***** Start: Public Methods *****
var methods = {
init : function(options) {
//"this" is a jquery object on which this plugin has been invoked.
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
// If the plugin hasn't been initialized yet
if (!data){
var settings = {
css_0: {
color: $this.css('color'),
backgroundColor: $this.css('backgroundColor')
},
css_1: {
color: '#000',
backgroundColor: '#F90'
},
cycle: 2000,
ratio: 0.5
};
if(options) { $.extend(true, settings, options); }
$this.data(pluginName, {
target : $this,
settings: settings,
interval: null,
timeout: null,
blinking: false
});
}
});
},
start: function(){
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
if(!data.blinking){
blinkMain.call($this, data);
data.interval = setInterval(function(){
blinkMain.call($this, data);
}, data.settings.cycle);
data.blinking = true;
}
});
},
stop: function(){
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
clearInterval(data.interval);
clearTimeout(data.timeout);
data.blinking = false;
this.style = '';
});
}
};
// ***** Fin: Public Methods *****
// *******************************
// *****************************
// ***** Start: Supervisor *****
$.fn[pluginName] = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
}
};
// ***** Fin: Supervisor *****
// ***************************
})( jQuery );
See it in action here
The plugin and the fiddle are pretty raw in that I haven't tried to integrate with jQuery-ui-tabs. This may be easy or hard, I don't know, but providing each tab is addressable by class or id then it shouldn't be too difficult.
Something you may need to consider is stopping a blinking tab when it is clicked. For this you may wish to call the .blinker('stop') method directly (with a .on('click') handler) or from an appropriate jQuery-ui-tabs callback.
API
The plugin is properly written in jQuery's preferred pattern. It puts just one member in the jQuery.fn namespace and .blinker(...) will chain like standard jQuery methods.
Methods :
.blinker('init' [,options]) : Initialises selected element(s) with blinker behaviour. Called automatically with .blinker(options), or just .blinker() in its simplest form.
.blinker('start') : causes selected element(s) to start blinking between two styles as determined by plugin defaults and/or options.
.blinker('stop') : causes selected element(s) to stop blinking and return to their natural CSS style(s).
Options : a map of properties, which determine blinker styles and timing:
css_0 : (optional) a map of css properties representing the blink OFF-state.
css_1 : a map of CSS properties representing the blink ON-state.
cycle : the blink cycle time in milliseconds (default 2000).
ratio : ON time as a proportion of cycle time (default 0.5).
By omitting css_0 from the options map, the OFF state is determined by the element(s)' natural CSS styling defined elsewhere (typically in a stylesheet).
Default values are hard-coded for css_1.color, css_1.backgroundColor, cycle time and ratio. Changing the default settings programmatically is not handled, so for different default styling the plugin will need to be edited.
jQuery comes by default with a slew of effects to pick from. You can easily use them wherever you see the need for them and they can be applied like so:
$('#newmsg').effect("pulsate", {}, 1000);
Demo
yes... this is what you need...!!!
this is javascript
if(newmessage==true){
$('#chat-86de45de47-tab').effect("pulsate", {}, 1000);
}
i think it's