I have the following markup:
<div class="scheduleNav">
<a id="btnPrevDate" href="#" class="ui-button-icon-only" />
<span id="currentDate">???</span>
<a id="btnNextDate" href="#" class="ui-button-icon-only" />
</div>
And the following javascript:
var rightNow = new Date(); // Default to today
var dd = rightNow.getDate();
var mm = rightNow.getMonth() + 1;
var yyyy = rightNow.getFullYear();
if (dd < 10) { dd = '0' + dd; }
if (mm < 10) { mm = '0' + mm; }
var today = (mm + "/" + dd + "/" + yyyy);
var prev = $('#btnPrevDate').button({ icons: { primary: "ui-icon-seek-prev"} });
var next = $('#btnNextDate').button({ icons: { primary: "ui-icon-seek-next"} });
var currentDate = $('#currentDate');
currentDate.text(today);
The jsbin is here: http://jsbin.com/AgiSICE/1/edit?html,js,output
How can I prevent the first anchor from swallowing the span?
When I closed your first anchor by adding instead of it worked for me.
Related
I am having an issue with the angular ui bootstrap datepicker popup (https://angular-ui.github.io/bootstrap/) where I cannot get my model to update.
I have in place 2 different calendars - one with the popup and one without (uib-datepicker-popup and uib-datepicker) inside one of my angular component.
This is my code:
function headerCtrl () {
const self = this;
self.$onInit = () => {
self.dateOptions = {
showWeeks: false,
formatYear: 'yyyy',
startingDay: 1
};
self.today = function() {
self.calendar_date2 = new Date();
};
self.today();
self.clear = function() {
self.calendar_date2 = null;
};
self.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
self.toggleMin = function() {
self.inlineOptions.minDate = self.inlineOptions.minDate ? null : new Date();
self.dateOptions.minDate = self.inlineOptions.minDate;
};
self.toggleMin();
self.open = function() {
self.popup.opened = true;
};
self.setDate = function(year, month, day) {
self.calendar_date2 = new Date(year, month, day);
};
self.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
self.format = self.formats[0];
self.altInputFormats = ['M!/d!/yyyy'];
self.popup = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
self.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < self.events.length; i++) {
var currentDay = new Date(self.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return self.events[i].status;
}
}
}
}
self.changeCalendarDate = () => {
console.log('changeCalendarDate');
console.log(self.calendar_date);
};
self.changeCalendarDate2 = () => {
console.log('changeCalendarDate2');
console.log(self.calendar_date2);
};
}}
export default {
bindings: {
duration: "<",
zoom: "<",
selection: "<",
selections: "<",
calendar_date: "<",
onDurationChange: "&",
onCalendarDateChange: "&",
onHeatmapSelectionChange: "&"
},
controller: headerCtrl,
template: `
<div class="pp-header-container">
<div uib-datepicker
ng-model="$ctrl.calendar_date"
datepicker-options="$ctrl.dateOptions"
class="heatmap-header pp-sch-header-item"
ng-change="$ctrl.changeCalendarDate()"></div>
<div class="pp-header-calendar">
<input type="text"
uib-datepicker-popup="{{$ctrl.format}}"
ng-model="$ctrl.calendar_date2"
is-open="$ctrl.popup.opened"
datepicker-options="$ctrl.dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="$ctrl.altInputFormats"
maxlength="10"
size="10"
ng-change="$ctrl.changeCalendarDate2()" />
<button type="button" class="btn btn-default" ng-click="$ctrl.open()"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>`
}
http://prnt.sc/esq9c9
The calendar on the left (uib-datepicker) works, as soon as I pick a date, it triggers changeCalendarDate() and it prints the selected date (console.log(self.calendar_date);)
Now what I am trying to do is change calendar as I would like the one with the popup ( uib-datepicker-popup ) which does trigger changeCalendarDate2() but when I print the value (console.log(self.calendar_date2);) it is undefined.
I am sure I need to grab that value differently but I don't know how.
Can anyone help?
Thanks :)
I have solved this problem :D
The problem was this
uib-datepicker-popup="{{$ctrl.format}}"
as soon as I have removed thee value assigned and left only
uib-datepicker-popup
it worked. I don't know why but I am happier now :)
I am facing an problem in phonegap while integrating native EmailComposer.
MailComposer should open up on button click, but it does not shows the mailComposer for IOS, same code for android is working,
My Code is as follow:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", deviceready, true);
function deviceready() {
console.log("Device ready");
}.
//function to send mail using mail composer
function composeText(){
var vehiclemileage = document.getElementById('vehiclemileage').value;
var vehiclemodel = document.getElementById('vehiclemodel').value;
var message1 = document.getElementById('message_body').value;
var vechicleyear = document.getElementById("yeardropdown");
var strUser = vechicleyear.options[vechicleyear.selectedIndex].value;
var vehiclemake = document.getElementById("vehiclemake");
var makevehicle = vehiclemake.options[vehiclemake.selectedIndex].value;
var deviceName = device.platform;
var devicemodel = device.model;
if(vehiclemodel == '' || makevehicle == ''){
alert("Please Enter all the Value");
navigator.notification.alert(
'Please Enter all the Value', // message
alertDismissed, // callback
'Vehicle and Model', // title
'Ok' // buttonName
);
}
else
{
//function to check folder named "RepairMyCar" and extract picture from folder to attach it to mail
var attachPath;
var attachFile= new Array();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("RepairMyCar", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
var dated, fnamed, phoned, emailed;
if(typeof(Storage)!=="undefined")
{
dated = localStorage.date;
fnamed = localStorage.fname;
phoned = localStorage.phone;
emailed= localStorage.email;
}
console.log(attachFile);
var newattachment = attachFile.toString();
//Open mail composer with all datas
setTimeout(function(){window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Date: " + dated + '<br>' + "First Name: " + fnamed + '<br>' + "Phone Number: " + phoned + '<br>' + "Email Address: " + emailed + '<br>' + "Year of Vehicle: " + strUser + '<br>' + "Make of Vehicle: " + makevehicle + '<br>' + "Model of Vehicle: " + " " + vehiclemodel + '<br>' +
"Mileage of Vehicle: " + " " + vehiclemileage + '<br>' + message1 + '<br>' + "Sent from My:" + deviceName + devicemodel,
[sth#sth.com],
[],
[],
true,
attachFile
);},100);
//Clear LoccalStorage
localStorage.clear();
//exit the app after clicking this button
navigator.app.exitApp();
// navigator.camera.cleanup(onSuccess,fail);
// function onSuccess(){
// }
// function fail(){
// }
}
}
function onFail(message) {
alert('Failed because: ' + message);
}
/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
//function to load year in drodown. Default selected year : Current Year
function populatedropdown(yearfield){
var today=new Date()
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
//Select Year
var thisyear=today.getFullYear()
for (var y=0; y<25; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Get a Repair Estimate</h1>
<div class="main-content">
<p>
Please Enter the Year, Make, Model and Mileage of Your Vehicle and any other information we should know.
</p>
<form class="vehicle-detail-form">
<ul>
<li>
<label>Year of Vehicle: </label>
<form action="" name="someform">
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("yeardropdown")
}
</script>
</li>
<!-- Vehicle Year Selection -->
<li><label>Model of Vehicle:</label>
<input type="text" name="vehiclemodel" id = "vehiclemodel">
</li>
<li><label>Mileage of Vehicle:</label>
<input type="number" name="vehiclemileage" id = "vehiclemileage"></li>
<li>
<textarea name="message_body" id = 'message_body' placeholder="Add Notes here(if any)"></textarea>
</li>
</form>
<div style="clear:both;"></div>
<div class="large-button-wrapper">
<button onclick="composeText();">Get Your Estimate</button>
</div>
</div>
</div>
</body>
</html>
I have kept EmailComposer.h and EmailComposer.m in plugin folder as stated in this link
I found a workaround if you work on an iOS project. I have the same issue.
After view change in backbone router console.log stops working in Xcode you can use Safari Web Inspector on your Mac. Every console.log is visible there.
I use jQuery-Mobile-DateBox for date and time picker in jQueryMobile.
<input id="start" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "useFocus": true, "overrideDateFormat": "%m/%d/%Y"}'>
<input id="end" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "useFocus": true, "overrideDateFormat": "%m/%d/%Y"}'>
I need not to allow user to select end day that are before start day.
$("#end").datebox("minDays", $("#start").val());
The above code doesn't work.
If you want to prevent end day from been lower then a start day
Working example: http://jsfiddle.net/Gajotres/QTuma/
HTML :
<label for="start-date">Start Date</label>
<input name="start-date" id="start-date" type="date" data-role="datebox" data-options='{"mode": "calbox", "useNewStyle":true,"overrideDateFormat":"%-m/%-d/%Y"}'/>
<label for="end-date">End Date</label>
<input name="end-date" id="end-date" type="date" data-role="datebox" data-options='{"mode": "calbox", "useNewStyle":true,"overrideDateFormat":"%m/%-d/%Y"}'/>
Javascript
$('#end-date').bind('datebox', function(e, p) {
if ( p.method === 'set' && $('#start-date').val().length > 0) {
e.stopImmediatePropagation();
var startDate = new Date($('#start-date').val());
var endDate = new Date($('#end-date').val());
if (startDate > endDate)
{
$('#end-date').val('');
}
}
});
Here is how to disabled date as per selection of start or end dates:
If a date is selected in start datebox, then end date will be limited to selection of days after start date (inclusive of start date) and vise-verse for end date too.
$(document).on('pageinit', '#index', function(){
$('#end-date').bind('datebox', function(e, p) {
if ( p.method === 'open') {
// Make it a date
var startDate = new Date($('#start-date').val());
var todaysDate = new Date();
// Length of 1 Day
var lengthOfDay = 24 * 60 * 60 * 1000;
// Get the difference
var diff = parseInt((((startDate.getTime() - todaysDate.getTime()) / lengthOfDay)+1)*-1,10);
// Set minDays to disallow anything earlier
$('#end-date').datebox({'minDays': diff});
}
});
$('#start-date').bind('datebox', function(e, p) {
if ( p.method === 'open') {
// Make it a date
var endDate = new Date($('#end-date').val());
var todaysDate = new Date();
// Length of 1 Day
var lengthOfDay = 1000 * 60 * 60 * 24;
// Get the difference
var diff = parseInt((((endDate.getTime() - todaysDate.getTime()) / lengthOfDay)+1),10);
// Set minDays to disallow anything earlier
$('#start-date').datebox({'maxDays': diff});
}
});
});
check the updated fiddle link: http://jsfiddle.net/QTuma/6/
OR as per below solution a simpler method to set min and max:
$(document).on('pageinit', '#index', function(){
$('#start-date').bind('datebox', function(e, p) {
if ( p.method === 'set') {
var endDate = $('#start-date').val().replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})$/,'$3-$1-$2');
$('#end-date').attr({'min':endDate,'max':'2999-01-01'});
$('#end-date').datebox('applyMinMax');
}
});
$('#end-date').bind('datebox', function(e, p) {
if ( p.method === 'set') {
var endDate = $('#end-date').val().replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})$/,'$3-$1-$2');
$('#start-date').attr({'min':'1000-01-01','max':endDate});
$('#start-date').datebox('applyMinMax');
}
});
});
Here is my javascript code snippet:
<script>
function returnStringForID(param) {
var retStr =
param.replace(/[\. ,:-]+/g, '').replace(/'/g, '')
.replace(/&/g, '').replace(/\(|\)/g, '');
return retStr;
}
$(document).ready(function () {
var chanId = 'Demo';
var fs_dyn = $('#fs_dyn');
var data = ['Sony', 'Pix', 'Max', 'Set'];
var seriesColors = ['#4000E3', '#FFC526', '#FF0000', '#C0504D'
, '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'];
for (var i = 0; i < data.length; i++) {
var checkId = "graphItem_" + i;
var color;
color = seriesColors[i];
var chanId = returnStringForID(data[i]);
var tmp = "";
tmp = "<input type='checkbox' checked='true' class='custom' value='" + data[i]
+ "' id='" + chanId + "' name='" + chanId + "'/>"
+ "<label for='" + chanId + "' style='font-size:12pt;font-weight:bold;color:"
+ color + "'>" + data[i] + "</label>";
fs_dyn.append(tmp);
}
fs_dyn.trigger('create');
});
</script>
Here is the HTML:
<td width='30%' style="vertical-align: top;" id="tdDynamic">
<fieldset data-mini='true' id='fs_dyn'></fieldset>
</td>
This code works perfect if done in raw html. However when inside a webview, checkbox doesn't style.
Also I have used .trigger('create') to style a nested collapsible in the same app which is also inside a webview, but that works fine.
PS: I am using JQM 1.3.1 version, just in case this helps.
Use pageinit event which is equivalent to .ready() or any jQuery Mobile events.
Demo
$(document).on('pageinit', function () {
// code
});
Using .ready() in jQuery Mobile isn't recommended, please refer to this post.
I want to be able to show the recent captured image via the button <button onclick="showImage();">Show Image</button><br>, but not sure how to do this and I can't find any good information about it in the Phonegap API. Basically it's the function showImage(); I need help creating.
The code for capturing an image is being executed correctly and I am running iOS 6.
Phonegap/Cordova:
<title>Capture Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
readDataUrl = mediaFiles[i].fullPath;
}
};
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
document.getElementById('errormsg').innerHTML = msg;
}
function captureImage(){
document.getElementById('format-data').innerHTML = "";
document.getElementById('capture-result').innerHTML = "";
navigator.device.capture.captureImage(captureImageSuccess, captureError, {limit: 1});
}
}
function captureImageSuccess(mediaFiles) {
var i, len;
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
};
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// uploadFile(mediaFiles[i]);
document.getElementById('capture-result').innerHTML = "<br/><strong>" + (i+1) + " file<br/> Path: " + mediaFiles[i].fullPath + "</strong><br/>" +
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
mediaFiles[i].getFormatData(formatSuccess, formatError);
}
console.log("captureImageSuccess");
}
</script>
</head>
HTML:
<body>
<button onclick="captureImage();">Capture Image</button> <br>
<button onclick="showImage();">Show Image</button><br>
<div class="result-block">
Capture Result: <span id="capture-result"></span><br/>
<span id="errormsg"></span>
</div>
</body>
</html>
Well you have the image's full path, just create an img element :
<img id="picResult" />
and in your javascript set it's url whenever you get a response:
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
//HERE:
document.getElementById('picResult').src = mediaFiles[i].fullPath;
};
I posted answer to issue similar like yours. That post show you how you show captured picture on a thumbnail.
See how you could solve your issue: https://stackoverflow.com/a/14043467/1853864
HTML
<img id="picResult" width="100px" border="1" />
JS
// capture callback
function captureSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
// do something interesting with the file
$('#picResult').attr('src',path);
}
};
Make sure to check the PhoneGap version number on top right of these online docs to make sure you are doing things right.
SEE HOW HERE TOO PhoneGap - Media Docs