I have managed to find several ionic calendar modules but cannot find any calendar control modules where a user can select from available dates. Is there anything out there?
http://www.clearlyinnovative.com/ionic-framework-custom-formly-template-using-datepicker-plugin
I have used the $cordovaDatePicker plugin successfully here and integrated it with formly in this blog post with a full working project.
here is the plugin - http://ngcordova.com/docs/plugins/datePicker/
module.controller('MyCtrl', function($scope, $cordovaDatePicker) {
var options = {
date: new Date(),
mode: 'date', // or 'time'
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: 'DONE',
doneButtonColor: '#F2F3F4',
cancelButtonLabel: 'CANCEL',
cancelButtonColor: '#000000'
};
document.addEventListener("deviceready", function () {
$cordovaDatePicker.show(options).then(function(date){
alert(date);
});
}, false);
});
Related
I am using protractor version 5.2.2 and cucumber-protractor framework, I have started practising testing for the LinkedIn site, but when I use the internet explorer browser it is only able to open the LinkedIn URL as mentioned in the config file and no scenarios are being executed, can anybody help me?
//config file
var params = require('./browsers.js');
var browser = params.browser;
var multiCapabilities = browser.split(',').map(function(browserName){
return {
browserName: browserName.trim()
};
})
var moment = require('moment')
var timeStamp = moment().format('YYYYMMDD_hhmmss');
exports.config = {
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
getPageTimeout: 60000,
allScriptsTimeout: 500000,
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
// Capabilities to be passed to the webdriver instance.
multiCapabilities: multiCapabilities,
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['Features/*.feature'],
baseUrl: 'https://www.linkedin.com/',
cucumberOpts: {
require: 'Features/step_definition/searchstep_linkedin.js',
tags: false,
plugin: ['pretty'],
format: 'json:reports/report'+timeStamp+' '+browser+'/results.json',
profile: false,
'no-source': true
},
plugins: [{
package: 'protractor-multiple-cucumber-html-reporter-plugin',
options:{
automaticallyGenerateReport: true,
}
}]
};
//Feature file
Background: I need to go linked in site
Given I go to url ""
Scenario: Should not login with blank username and password
Then I wait for "2000"
When I enter " " in "#login-email"
When I enter " " in "#login-password"
Then I click on "#login-submit"
Then I should see ""
//Spec File
Given(/^I go to url "(.*)"$/, function (url){
return browser.get(url);
});
When(/^I enter "(.*)" in "(.*)"$/, function (value,locator){ /**/
return element(by.xpath(locator)).sendKeys(value);
});
Then(/^I should see "(.*)"$/, function (url){ /**/
browser.sleep(2000);
return
expect(browser.getCurrentUrl()).to.eventually.equal(browser.baseUrl
+ url);
});
Then(/^I click on "(.*)"$/, function (locator){ /**/
return return element(by.xpath(locator)).click();
});
I am using this date picker for my Ionic app:
https://github.com/rajeshwarpatlolla/ionic-datepicker
Two of the options I have set seem to have no effect.
Even though I have set dateFormat: 'yyyy-MM-dd' the date in the datepicker is shown in the default format dd-MM-yyyy.
Even though I have set closeOnSelect: true, the date picker does not close on select and the set button is visible.
Here is my code:
app.controller('MyCtrl', function($scope, $state) {
$scope.datepickerObject = {
titleLabel: 'Title', //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
//disabledDates: disabledDates, //Optional
templateType: 'popup', //Optional
to: new Date(),
callback: function (val) { //Mandatory
datePickerCallback(val);
},
dateFormat: 'yyyy-MM-dd', //Optional
closeOnSelect: true //Optional
};
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
// no date selected
} else {
$scope.datepickerObject.inputDate = val;
}
};
});
In order to customize the date format you need to specify that in your html file:
<ionic-datepicker input-obj="datepickerObject">
<button class="button"> {{datepickerObject.inputDate | date:'yyyy/MM/dd'}}</button>
</ionic-datepicker>
Also, in the current release- 0.9.0- closeOnSelect dosen't work.
https://github.com/rajeshwarpatlolla/ionic-datepicker/issues/110
Regards
In an Ionic app, I am using ngCordova's $cordovaInAppBrowser to open Apple Play Store URL. It opens the app store but it does not go into .then. Relevant code:
$cordovaInAppBrowser.open(mktUrl, '_system', {location: 'yes', clearcache: 'yes', toolbar: 'no'}).
then(function(event) { ¬
console.log("inside then"); ¬
$state.go('odetails');
}¬
mktUrl is a app store URL for an app.
It does not generate any error. But it just doesn't work. How can I solve the problem?
Been there.
If you change from _system to _blank, cordova uses same webview as your app container and the promises do work.
I am using this code:
var inAppBrowserOptions = {
location: 'yes',
clearcache: 'no',
hardwareback: 'no'
};
if (!site.toLowerCase().match(/^htt(p|ps):\/\//)) {
site = 'http://' + site;
}
$cordovaInAppBrowser.open(
site,
'_blank',
inAppBrowserOptions
).then(function (event) { // success
//$state.go('')
Toast.show('inAppBrowser success', 'short', 'bottom');
}).catch(function (event) { // error
Toast.show('Error opening site', 'short', 'bottom');
});
$rootScope.$on('$cordovaInAppBrowser:exit', function (e, event) {
Toast.show('inAppBrowser exit', 'short', 'bottom');
});
tryin to implement the ionic datepicker ,by rajesh this is the controller implementation ,after the dependency injection
.controller('PostCtrl', function ($scope, partyStore, $rootScope, $ionicPopup, $location) {
$scope.currentDate = new Date();
$scope.title = "Custom Title";
$scope.datePickerCallback = function (val) {
if (typeof (val) === 'undefined') {
console.log('Date not selected');
} else {
console.log('Selected date is : ', val);
}
};
this is template for rendering the view ,
<ionic-datepicker idate="currentDate" disablepreviousdates="true" disablefuturedates="false" callback="datePickerCallback"
title="title">
<button class="button button-block button-positive">{{ currentDate | date:'dd - MMMM - yyyy' }}</button>
</ionic-datepicker>
this is the error it generates
TypeError: a.callback is not a function
at link.n.on.e.show.buttons.onTap (ionic-datepicker.js:1)
at Scope.IonicModule.factory.extend.$buttonTapped (ionic.bundle.js:45347)
at $parseFunctionCall (ionic.bundle.js:21044)
at ionic.bundle.js:53458
at Scope.$get.Scope.$eval (ionic.bundle.js:23100)
at Scope.$get.Scope.$apply (ionic.bundle.js:23199)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53457)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
You are not doing properly, have you followed the steps to follow?
2) Give the path of ionic-datepicker.bundle.min.js in your index.html file.
<!-- path to ionic/angularjs -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
3) In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}
4) Use the below format in your template's corresponding controller
$scope.datepickerObject = {
titleLabel: 'Title', //Optional
todayLabel: 'Today', //Optional
closeLabel: 'Close', //Optional
setLabel: 'Set', //Optional
setButtonType : 'button-assertive', //Optional
todayButtonType : 'button-assertive', //Optional
closeButtonType : 'button-assertive', //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
templateType: 'popup', //Optional
showTodayButton: 'true', //Optional
modalHeaderColor: 'bar-positive', //Optional
modalFooterColor: 'bar-positive', //Optional
from: new Date(2012, 8, 2), //Optional
to: new Date(2018, 8, 25), //Optional
callback: function (val) { //Mandatory
datePickerCallback(val);
},
dateFormat: 'dd-MM-yyyy', //Optional
closeOnSelect: false, //Optional
};
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
console.log('No date selected');
} else {
console.log('Selected date is : ', val)
}
};
5) Then use the below format in your template / html file
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button>
</ionic-datepicker>
try to use this
http://ngcordova.com/docs/plugins/datePicker/
(here to get start with ngCordova : http://ngcordova.com/docs/install/ )
Really easy to use
module.controller('MyCtrl', function($scope, $cordovaDatePicker) {
var options = {
date: new Date(),
mode: 'date', // or 'time'
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: 'DONE',
doneButtonColor: '#F2F3F4',
cancelButtonLabel: 'CANCEL',
cancelButtonColor: '#000000'
};
document.addEventListener("deviceready", function () {
$cordovaDatePicker.show(options).then(function(date){
alert(date);
});
}, false);
});
I use jqgrid, when i add a row, i want push a file on the server.
I have read many many post, but i don't find a working example.
Many example don't work from jquery 1.5.
I found people who council:
http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html#api
http://malsup.com/jquery/form/#file-upload
But, i don't knows howto use this with jqgrid.
Someone could give me a complete example of a solution to upload a file with jqgrid?
Thank,
Well, i have find:
<script type="text/javascript" src="/static/jqueryform/jquery.form.js"></script>
<script type="text/javascript"> $(function(){
$("#citype").jqGrid({ url:"/api/citype/getdata",
datatype:'json',
mtype:'POST',
colNames:['No', 'Name', 'Icon'],
colModel :[
{ name:'id',
index:'id',
width:55,
editable:false,
key:true,
hidden:true
},
{
name:'name',
index:'name',
width:55,
editable:true
},
{
name:'icon',
index:'icon',
edittype:'file',
width:80,
align:'right',
editable:true},
],
pager:'#pager',
rowNum:10,
rowList:[10,20,30],
sortname:'citype_id',
sortorder:'desc',
viewrecords:true,
gridview:true,
caption:'List',
useDataProxy: true,
dataProxy : function (opts, act) {
opts.iframe = true;
var $form = $('#FrmGrid_citype'); //use name of the grid
//Prevent non-file inputs double serialization
var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file');
ele.each(function () {
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
});
//Send only previously generated data + files
$form.ajaxSubmit(opts);
//Set names back after form being submitted
setTimeout(function () {
ele.each(function () {
$(this).attr('name', $(this).data('name'));
jQuery("#citype").trigger('reloadGrid');
});
}, 200);
},
editurl:"/submit"
});
// Action Option jQuery("#citype").jqGrid('navGrid','#pager',
{}, //options
{ // edit options
closeAfterEdit:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // add options
closeAfterAdd:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // del options
reloadAfterSubmit:true
},
{} // search options );