I am using Datepicker of Flatpickr and I have set the date format and it is working fine in desktop but in mobile it is not working properly.
This is my code that I added in functions.php:
add_action( 'wp_footer', function() {
?>
<script type="text/javascript">
jQuery( window ).load( function( $ ){
var limitFlatPicker;
var afterTwoDays;
var afterEightDays;
limitFlatPicker = limitFlatPicker || {};
limitFlatPicker = {
defaultSettings: {
selector: '.flatpickr-input',
minDate: true,
maxDate: true,
},
settings: {},
init: function( options ) {
this.settings = jQuery.extend( this.defaultSettings, options );
if ( this.settings.minDate || this.settings.maxDate ) {
this.waitForFlatpicker( this.callback );
}
},
waitForFlatpicker: function( callback ) {
if ( typeof window.flatpickr !== 'function' ) {
setTimeout( function() { limitFlatPicker.waitForFlatpicker( callback ) }, 100 );
}
callback();
},
modifyPicker: function( picker, settings ) {
flatpickr( picker ).set( settings );
},
callback: function() {
var self;
self = limitFlatPicker;
jQuery( self.settings.selector ).each( function() {
var picker;
picker = jQuery( this )[0],
pickerSettings = {};
if ( self.settings.minDate ) {
pickerSettings.minDate = self.settings.minDate;
}
if ( self.settings.maxDate ) {
pickerSettings['maxDate'] = self.settings.maxDate;
}
if ( self.settings.dateFormat ) {
pickerSettings.dateFormat = self.settings.dateFormat;
}
self.modifyPicker( picker, pickerSettings );
} );
}
}
limitFlatPicker.init({
minDate: new Date(),
selector: '#form-field-form_field_date',
dateFormat: 'm-d-Y',
});
} );
</script>
<?php
},11);
The dateFormat: 'm-d-Y' is working fine in desktop and in mobile, it is not showing this dateformat.
Any help is much appreciated.
Related
I would like to use tinyMCE with a custom Slick Editor outside of the table, or inside a dialog. It's just to enable rich text editing.
Can I use this external plugin for a custom Slick Editor? I have not seen any example of usages like this.
Is there any potential problems using this two plugins at the same time (injecting conflicting HTML for example or preventing some firing events)?
Use a jquery alias "jQuery_new" with a compatible version
Register the new editor "TinyMCEEditor" & Add it into slick.editors.js
Use it like this {id: "column2", name: "Year", field: "year", editor: Slick.Editors.TinyMCE}
jQuery_new.extend(true, window, {
"Slick": {
"Editors": {
(..)
"TinyMCE": TinyMCEEditor
}
}});
function TinyMCEEditor(args) {
var $input, $wrapper;
var defaultValue;
var scope = this;
this.guid = function () {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4();
},
this.init = function () {
var $container = jQuery_new(".container");
var textAreaIdString = 'rich-editor-'+guid();
$wrapper = jQuery_new("<DIV ID='rds-wrapper'/>").appendTo($container);
$input = jQuery_new("<TEXTAREA id=" + textAreaIdString + "/>");
$input.appendTo($wrapper);
jQuery_new("#" +textAreaIdString).val( args.item[args.column.field] );
var _this = this;
tinymce.init({
selector: "#"+textAreaIdString,
forced_root_block : "",
plugins : "save image imagetools",
toolbar: 'undo redo | styleselect | bold italic | link image | save',
save_onsavecallback: function() {
jQuery_new("#" +textAreaIdString).val( this.getContent() );
_this.save();
}
});
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
$input.focus().select();
};
this.handleKeyDown = function (e) {
if (e.which == jQuery_new.ui.keyCode.ENTER && e.ctrlKey) {
scope.save();
} else if (e.which == jQuery_new.ui.keyCode.ESCAPE) {
e.preventDefault();
scope.cancel();
} else if (e.which == jQuery_new.ui.keyCode.TAB && e.shiftKey) {
e.preventDefault();
args.grid.navigatePrev();
} else if (e.which == jQuery_new.ui.keyCode.TAB) {
e.preventDefault();
args.grid.navigateNext();
}
};
this.save = function () {
args.commitChanges();
};
this.cancel = function () {
$input.val(defaultValue);
args.cancelChanges();
};
this.hide = function () {
$wrapper.hide();
};
this.show = function () {
$wrapper.show();
};
this.position = function (position) {
};
this.destroy = function () {
$wrapper.remove();
};
this.focus = function () {
$input.focus();
};
this.loadValue = function (item) {
$input.val(defaultValue = item[args.column.field]);
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
I built jQuery Masonry layout with infinite scroll and filtering.
My problem is that when a filter clicked before scrolling, the content loaded with infinite scroll is not filtered.
Is there any way to fix it?
Here is the link to check: http://www.jcvergara.com/working/
Here is the full masonry code:
$(document).ready(function(){
var $container = $('.container');
// initialize
$container.masonry({
columnWidth: 250,
itemSelector: '.item',
isFitWidth: true
});
$container.masonry( 'on', 'layoutComplete', function() {
$('.right-line').css('height', $('.container').height());
});
$('.right-line').css('height', $('.container').height());
// infinite scroll
var $container = $('#content');
$container.infinitescroll({
navSelector : "nav.posts-navigation",
nextSelector : "div.nav-previous a:first",
itemSelector : "#content div.item",
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
// open posts in ajax
$('.post-link').click(function(){
$('.openarticle').css('display', 'block');
var post_link = $(this).attr('href');
$('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
$('#openthis').load(post_link);
$('<a></a>', {
text: 'Close',
class: 'close',
id: 'close',
href: '#'
})
.prependTo($('.openarticle .main'))
.click(function() {
$('.openarticle').css('display', 'none');
$('#close').remove();
});
return false;
});
}
);
// filtering
$(".cat-item a").click(function(e) {
e.preventDefault();
var cut_url = "http://www.jcvergara.com/category/";
var group = $(this).attr('href');
group = group.replace(cut_url, '').slice(0,-1);
var group_class = "." + group;
$(".cat-item a.active").removeClass('active');
$(this).addClass('active');
if(group != "all") {
$(".item").hide();
$(group_class).show();
$container.masonry();
} else {
$(".item").show();
$container.masonry();
}
});
});
Try using "on" for your click function:
// filtering
$(".cat-item a").on( "click",function (e) {
e.preventDefault();
var cut_url = "http://www.jcvergara.com/category/";
var group = $(this).attr('href');
group = group.replace(cut_url, '').slice(0,-1);
var group_class = "." + group;
$(".cat-item a.active").removeClass('active');
$(this).addClass('active');
if(group != "all") {
$(".item").hide();
$(group_class).show();
$container.masonry();
} else {
$(".item").show();
$container.masonry();
}
});
I have a slide-box described in one of my protractor tests; I can find the box and can get properties (i.e. 'how many') but how do I cycle through the boxes so I can test verify the display, e.g.
profilepage.slides.next()
expect(profilepage.slide.slideTitle = 'Credentials'
profilepage.slides.next()
expect(profilepage.slide.slideTitle = "Info"
etc.
Controller:
.controller('ProfileCtrl', function ($scope, ProfileService) {
$scope.data = {
numViewableSlides: 0,
slideIndex: 0,
initialInstruction: true,
secondInstruction: false, slides: [
{
'template': 'templates/slidebox/credentials.html',
'viewable': true
},
{
'template': 'templates/slidebox/contactinfo.html',
'viewable': true
},
{
'template': 'templates/slidebox/employeeinfo.html',
'viewable': true
},
{
'template': 'templates/slidebox/assignmentinfo.html',
'viewable': true
}
]
}
. . .
Template:
<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="true">
<ion-slide ng-repeat="slide in data.slides | filter:{viewable : true}">
<div ng-include src="slide.template"></div>
</ion-slide>
</ion-slide-box>
Page Object:
profilepage.prototype = Object.create({}, {
backButton: {
get: function () {
return element(by.css('ion-ios7-arrow-back'));
}
},
slides: {
get: function () {
return element.all(by.repeater('slide in data.slides'));
}
},
slideTitle: {
get: function (id) {
element.all(by.repeater('slide in data.slides')).then(function (slidelist) {
var titleElement = slidelist[id].element(by.css('#slideName'));
return titleElement.getText();
});
}
},
. . .
Spec:
describe('Profile', function () {
var ppage = new profilepage();
beforeEach(function () {
browser.ignoreSynchronization = false;
});
it('should have correct lastname and have four slides on profile page', function () {
expect(browser.getCurrentUrl()).toEqual('http://localhost:8100/#/profile');
expect(ppage.lastname).toBe('Smith,');
expect(ppage.slides.count()).toEqual(4);
browser.sleep(1000);
});
it('should slide all the pages', function(){
expect(browser.getCurrentUrl()).toEqual('http://localhost:8100/#/profile');
// SLIDE EACH PAGE ABOUT HERE <------------
browser.sleep(1000);
})
The idea is to use ionic's $ionicSlideBoxDelegate from within the spec file. For that we'll need to make it accessible globally:
var addProtractorSlideBox, nextSlide;
addProtractorSlideBox = function() {
return browser.addMockModule("services", function() {
return angular.module("services").run(function($ionicSlideBoxDelegate) {
return window._$ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
});
});
};
nextSlide = function() {
return browser.executeScript('_$ionicSlideBoxDelegate.next()');
};
...
beforeEach(function() {
...
addProtractorSlideBox();
...
});
it('...', function() {
...
nextSlide();
...
})
This pattern is very useful for other ionic/angular services.
I have a typical form-with-query-editor and search button im my Angularjs-app. However, clicking the search-button doesn't work. If I initially open the form with the table, the service works. But not when clicking the search button. The code is as follows:
HTML vlist.html:
<input ng-model="nachname" type="text" id="nachname" name="nachname" class="search-query" />
<button ng-click="search()" type="submit" class="btn btn-primary">Search</button>
...
<tr ng-repeat="pers in personen">
<td>{{pers.nachname}}</td>
</tr>
...
Controller:
var app = angular.module( 'cdemoApp', [ 'cdemo.services' ] );
app.config( ['$routeProvider', function( $routeProvider ) {
$routeProvider.
when( '/vlist', {
controller: 'VListCtrl',
resolve: {
personlistdto: function( VListLoader ) {
return VListLoader();
}
},
templateUrl : 'app/view/vlist.html'
} ).otherwise( { redirectTo: '/' } );
} ] );
app.controller( 'VListCtrl', [ '$scope', 'personlistdto',
function( $scope, personlistdto ) {
$scope.search = function(){
$scope.personen = personlistdto.aaData;
$scope.iTotalRecords = personlistdto.iTotalRecords;
};
$scope.search();
}]);
Service:
var services = angular.module( 'cdemo.services', [ 'ngResource' ] );
services.factory( 'Vers', [ '$resource',
function find( $resource ) {
return $resource( '/cdemo/rest/vers/ajs/:id',
{ id: '#id', isArray: false }
);
} ] );
services.factory( 'VListLoader', [ 'Vers', '$q',
function( Vers, $q ) {
console.log('Vloader1');
var find = function find() {
var delay = $q.defer();
Vers.get( function( personlistdto ) {
delay.resolve( personlistdto );
}, function() {
delay.reject( 'Nix fetch' );
} );
return delay.promise;
};
return find;
} ] );
Any idea how I can get the button searching (including fields/parameters) - because nothing happens when clicking the button? Thanks for an answer.
I got it working by changing the controller like this:
app.controller( 'VListCtrl', [ '$scope', 'personlistdto', 'VListLoader',
function( $scope, personlistdto, VListLoader ) {
$scope.personlistdto = personlistdto;
$scope.searchFactory = VListLoader;
$scope.search = function( ){
$scope.personlistdto = $scope.searchFactory();
};
}
] );
This way the Factory VListLoader is called.
I have a iphone app built with jquery mobile which is wrapped in phonegap. I am trying to get geolocation after the device is ready to get rid of the nasty alert /var/mobile/Applications/157EB70D-4AA7-826E-690F0CBE0F/appname.app/www/index.html.
I have set some alerts to see if the device is ready and it keeps saying isDeviceReady is:false which is meaning the device is not ready
he is the code
$(function() {
var isWatching = false;
var isAndroid = ( navigator.userAgent.indexOf('Android') != -1 ) ? true : false;
var isDeviceReady = false;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
isDeviceReady = true;
}
function getClientPosition(id, successCallback, errorCallback) {
if ( isDeviceReady ) {
var hasFoundMarker = false;
if ( hasClientPosition() ) {
$(id).gmap('findMarker', 'tag', 'client', function(found, marker) {
if (found) {
hasFoundMarker = true;
marker.setPosition(getClientLatLng());
$(id).gmap('getMap').setCenter(marker.getPosition());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, getClientLatLng());
}
}
});
if ( !hasFoundMarker ) {
addClientMarker(id, getClientLatLng());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, getClientLatLng());
}
}
}
if ( !isWatching[id] ) {
if ( navigator.geolocation ) {
isWatching[id] = true;
if ( isAndroid ) {
watch[id] = setInterval(function() {
navigator.geolocation.getCurrentPosition (
function( position ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$(id).gmap('findMarker', 'tag', 'client', function(found, marker) {
if (found) {
hasFoundMarker = true;
marker.setPosition(latlng);
$(id).gmap('getMap').setCenter(latlng);
}
});
if ( !hasFoundMarker ) {
addClientMarker(id, latlng);
}
setData(CLIENT_HAS_POSITION, true);
setData(CLIENT_LATITUDE, latlng.lat());
setData(CLIENT_LONGITUDE, latlng.lng());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, latlng);
}
},
function( error ) {
if ( $.isFunction(errorCallback) ) {
errorCallback.call(this, error);
}
},
opts.geolocationOptions
);
}, 5000);
} else {
watch[id] = navigator.geolocation.watchPosition (
function( position ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$(id).gmap('findMarker', 'tag', 'client', function(found, marker) {
if (found) {
hasFoundMarker = true;
marker.setPosition(latlng);
$(id).gmap('getMap').setCenter(latlng);
}
});
if ( !hasFoundMarker ) {
addClientMarker(id, latlng);
}
setData(CLIENT_HAS_POSITION, true);
setData(CLIENT_LATITUDE, latlng.lat());
setData(CLIENT_LONGITUDE, latlng.lng());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, latlng);
}
},
function( error ) {
if ( $.isFunction(errorCallback) ) {
errorCallback.call(this, error);
}
},
opts.geolocationOptions
);
}
}
}
} else {
var timer = setTimeout(function() {
getClientPosition(id, successCallback, errorCallback);
alert('Trying to get client position. This message will pop up again in 15 sec, unless device is ready. IsDeviceReady is: '+isDeviceReady);
}, 15000);
}
}
Anyone have any ideas where i am going wrong?