Trouble understanding DatePicker for Phonegap - javascript

Need help implementing this DatePicker plugin for Phonegap. Maybe I'm missing something here, but I am totally lost as to what to do after adding the plugin to my project via CLI. The documented "usage" is not helping me out whatsoever.
With the following example html, what should be added for its hook?
<form>
<label for="user_name">Name</label>
<input name="user_name" type="text" id="user_name" placeholder="Name" />
<!-- what here?? -->
<input type="submit" value="Register" />
</form>
And using jQuery, how would I initialize it?
Repository: https://github.com/nicholasareed/cordova-plugin-datepicker/tree/007feae6393d7022af51d9a60055f7de4dd89e54
Thank you in advance for any information helping me resolve this.

All modern phones (Android / iPhone) have support for the HTML5 input types. This will trigger the native date-selection. No need for complex datepicker-jquery-javascript magic anymore. Just try this:
<input type="date" name="mydate" />
And click the textfield on your phone.

You probably have to add servicing of your input. Usually you do it in separate *.js file.
Create test.js file in your project's www catalog and add it to youd index.html head section:
<html>
<head>
...
<script type="text/javascript" src="path-to-test/test.js">
</head>
<body>
...
</body>
In your test.js file add datePicker configuration:
var options = {
date: new Date(),
mode: 'date'
};
and onClick event handler (jQuerMobile example):
$('#idButton').on('click',function(){
// show picker
datePicker.show(options, function(date){
//get result
alert("date result " + date);
});
});

Related

adding the data-i18n attribute using jquery

I'm working on a form which is supporting multiple languages by using data-i18n, and I want to use jquery to add the message below the form if the input of the form cannot be validated.
(The multi-language message content of all sites is included in the local json files: the form page is named as formPage and the input section is named as inputDescription)
But the message content doesn't show up although I'm using $(jquery).attr(), can anyone help to check if I do anything wrong or what should I do to make it works?
Thanks in advance!
$(".msg").attr("data-i18n", "formPage.inputDescription" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" step=any class="form-control" min="5000" max="1000000" value="">
<small data-i18n="" class="form-text msg"></small>
</form>
Finally got the answer, post and share here. It's necessary to call localize $(jquery).localize() again after the attribution $(jquery).attr(), although localize has been called in the html file.

JQuery UI Datepicker not functioning

I am running into an issue where I feel as though I have everything set up correctly; but, no matter what, the JQuery UI Datepicker will not show up.
I have the following set up in my header (Angular project, header is always loaded no matter the route):
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
As well as this
<script type="text/javascript">
$(function() {
var nativeDateInputIsSupported = Modernizr.inputtypes.date;
if (!nativeDateInputIsSupported) {
$("input[type='date']").datepicker();
}
});
</script>
However when I am in Firefox and click on the following, nothing happens
<tr ng-repeat="revenue in runway.revenues">
<!-- Other table elements go here -->
<td>
<input type="date" id="date" max="{{maxDate}}" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" required/> </td>
<td>
It also does not show up here
<input type="date" class="form-control" ng-model="user.startofbusiness" name="startofbusiness" id="startofbusiness" required>
I've checked many different StackOverflow threads but even when I follow the methodologies put forth by them, I can't get it to cooperate.
Any tips would be greatly appreciated!
As it turns out, this was implemented correctly, and is actually working. The issue was with regards to having used ng-repeat to generate the table's information dynamically. I am addressing this by writing a custom directive to handle the datepicker.

Execute JavaScript on Form Submit

I have a form displayed on a layer (I'm using ChicoUI as UI Framework), everything is managed through Google Apps Script. Everything went fine (The submit sends data to a google spreadsheet), but I need the following: When the submit button is pressed I need to change the layer content through a simple js line. to display the classic "Thank you message" with a close button.
As far as I saw, everything leads to return something in the gs script, for instance in the doGet() method.
It´s posible to execute a framework method instead of returning something? Remember that I have no issues with JS, but with Google Apps Script.
Thanks a lot in advance!
Here is an example I have done with jQuery. I think it might help to understand what you want to achieve.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#myform").submit(function(event) {
event.preventDefault();
google.script.run.withSuccessHandler(function(e){
alert("Thank you"); // Here you can write thank you message.
}).myFunction(this); // passing forms data to apps script.
});
});
</script>
<form id="myform">
<input name="user1" id="user" type="text" value="">
<input name="user2" id="user" type="text" value="">
<input name="user3" id="user" type="text" value="">
<input type="submit" value="Submit Form">
</form>

bad javascript? hello bar solo only working on homepage - no other pages

I'm running a bigcommerce store and have the hello bar solo custom code installed in the site footer. I've also tried placement of the hellobar code in various spots (header template files, default template files, page specific template files). For some reason the hello-bar only works on my homepage, but never on any of the other pages.
Any ideas as to why? Seems like if i place this in the footer it should show up on every pages but that's not what i'm getting. please let me know if you need more details or code samples to help.
thanks
btw, bigcommerce support also thinks that the hellobar should show up on every page if i have this code in the footer, but its not working. my guess is that it's the javascript but I dont know my way around that.
Here's the code I'm using:
<div id="mailchimp_form" style="display:none;">
<form action="http://xxxxx.us5.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="xxxxxxxx">
<input type="hidden" name="id" value="xxxxx">
Get an instant coupon code by signing up to our newsletter. Email: <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" />
<input class="button" type="submit" value="Subscribe" />
</form>
</div>
<!-- Hello Bar configuration start -->
<script type="text/javascript">
var mailChimpForm = document.getElementById('mailchimp_form').innerHTML;
new HelloBar( mailChimpForm, {
showWait: 1000,
positioning: 'sticky',
fonts: 'Arial, Helvetica, sans-serif',
forgetful: true
}, 1.0 );
</script>
And here are the references that I've placed in the header:
<link type="text/css" rel="stylesheet" href="content/hellobar.css" />
<script type="text/javascript" src="content/hellobar.js"></script>
No idea what bigcommerce is, but judging from what you supplied I am guessing one of two reasons.
There is no 'mailchimp_form' div except on your homepage.
Javascript, for some weird reason, does get executed before 'mailchimp_form' div gets loaded on all other pages.

HTML5 localStorage populate form onload

I am following the example in the O'Reilly "Building iPhone Apps with HTML, CSS and Javascript," I want the values entered from a form to populate after the app closes and reloads, similar to a php 'sticky form.'
The only aspects I changed from the example is that saveSettings is called on submit, and here I have it called on unload (previously on input blur).
Load settings is called on document ready rather than submit.
pageInit is not working though I have jquery mobile installed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$(document).ready(function(){
$(window).unload(saveSettings);
loadSettings();
});
function loadSettings() {
$('#monthly-income').val(localStorage.income);
$('#saving-per-month').val(localStorage.saving);
$('#current-age').val(localStorage.age);
}
function saveSettings() {
localStorage.age = $('#current-age').val();
localStorage.saving = $('#saving-per-month').val();
localStorage.income = $('#monthly-income').val();
}
</script>
</head>
<body>
<div data-role="content">
<div data-type="horizontal" data-role="controlgroup">
Input
Output
</div>
<input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>
<input type="number" min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>
<input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>
</body>
</html>
1) You could place your page in internet, at best providing QR code to fast load on mobile (free QR generator here), so everyone could easily test
2) Did the browser settings require to grant the domain the rights to store values in local storage? If so, onunload there's no place to accept such request. Place in your ready function one storage instruction to test
3) unload is a bit unreliable (example - browser crash). Have you considered saving values on onblur on inputs? When in large textareas, saving the value in timer, even if user is still editing, is practicised.
4) This question considers also problems with unload function. Maybe future answer to this question will solve your problem?

Categories