I am desperately trying to integrate a time picker in my app, but without success. I tried to use this code to do it: https://github.com/weareoutman/clockpicker
I have all the files and the paths are properly set. Here is the weird thing. If I integrate this code:
<!-- Or just a input -->
<input id="demo-input" />
<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script type="text/javascript" src="../dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker()
.find('input').change(function(){
// TODO: time changed
console.log(this.value);
});
$('#demo-input').clockpicker({
autoclose: true
});
if (something) {
// Manual operations (after clockpicker is initialized).
$('#demo-input').clockpicker('show') // Or hide, remove ...
.clockpicker('toggleView', 'minutes');
}
</script>
I have declared the css file in the header too:
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" type="text/css" href="../dist/bootstrap-clockpicker.css">
into the input.html file of my app and starts this app, I can see the box where the clock is supposed to be active but nothing happens when I click on the box, while the clock should appear.
However, if I run the html file in the browser, as a stand alone unit, then the clock works as it should be.
In the app, the input file is called from a higher up file view.py:
#app.route('/input')
def addresses_input():
return render_template("input.html")
I coded in python and used flask
Anyone has an idea? I have been struggling with this for quite some time now and I cannot find an answer...
Thanks!
Your #route should look like
from wtforms.fields.html5 import DateField
class TimeForm(Form):
time_picker = DateField('DatePicker', format='%Y-%m-%d')
#app.route('/current_page', methods=['POST'])
def show_time():
time_form = TimeForm() # this could be the class as well
if time_form.validate_on_submit():
return time_form.time_picker.data.strftime('%Y-%m-%d')
return render_template('bootstrap_template.html', form=form)
You can get the time picker in the jinja2 template in following way
bootstrap_template.html
<form action="some_action" method="post">
{{ time_form.time_picker(class='datepicker') }}
{{ time_form.hidden_tag() }}
<input type="submit"/>
</form>
Please note - you will need to add your js library and css file in template file.
Related
I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
I need slider and I use AdminLTE in my project
<input type="text" value="" class="slider form-control"
data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show"
data-slider-id="yellow">
to convert input to div , it needs
<!-- Ion Slider -->
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- Bootstrap slider -->
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(function () {
/* BOOTSTRAP SLIDER */
$('.slider').slider();
});
</script>
first 2 I imported in index.html und last function in my tamplate after input
it doesn't work
Where and how can I input this function? I did it in index.html but it doesn't work
The Javascript you are trying to use is jQuery, if you are not using jQuery than that code will not work. You can tell it is jQuery because of the $.
If you are using jQuery in your AngularJs app than double check that
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
are actually loading.
Here is a "plain vanilla" Javascript implementation you can use in place of the jQuery implementation if you are not using jQuery:
<script>
function initSlider() {
var sliderInputElem = document.getElementsByClassName('slider');
sliderInputElem.slider();
}
window.onload = initSlider;
</script>
By the way should be able to change
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
to
<script src="/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="/plugins/bootstrap-slider/bootstrap-slider.js"></script>
if plugins folder is at the root of your app. I try to avoid up directory ../ for any resource, because the paths are more fragile (become broken links do to some code reorganization in the future).
Angular compiler flushes out your JS code in the application.
To include any JS code, you need to include the definition filename.d.ts along with the JS and declare all the variables you are going to use in the JS code in filename.ts.
I guess you just need to cut you function from index.html and have to paste in the constructor of same HTML where you are going to use carousel.
let suppose you are using this in your app.component.html file
<input type="text" value="" class="slider form-control"
data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show"
data-slider-id="yellow">
then you need to use this function in app.component.ts like this
declare var $: any;
#component({
....
})
export class AppComponent{
constructor(){
/* BOOTSTRAP SLIDER */
$('.slider').slider();
}
........
}
I'm trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.
Here's my code:
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="js/timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="js/timepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
</script>
<form method="post" action = "makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name = "date">
What time would you like to start?<br>(example format: 3 pm)
<input type="text" id="timepicker1" name = "time" >
...
I get the following error when I run this in firefox:
TypeError: $(...).timepicker is not a function
I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.
I'd appreciate any suggestions for troubleshooting this. Thanks!
The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.
$(function() {
$("#datepicker").datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<form method="post" action="makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name="date">What time would you like to start?
<br>(example format: 3 pm)
<input type="text" id="timepicker1" name="time">
</form>
It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"
If the file is there, than check to make sure that the JS file actually has content in it.
I ran into the same issue. Call it amateurish, but the issue was resolved by adding both JQuery and JQuery UI plugins to my code in addition to the the CSS and JS file custom to Timepicker.co.
Timepicker's site states:
To use jQuery Timepicker you'll need to include two files:
jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming
you have an element in your document, with class timepicker,
you can use the code on the right (or the code below, if you are
reading on mobile) to initialize the plugin.
They miss the part about having JQuery and JQuery UI in your code as well (probably due to obviousness for most coders. Regardless, I've submitted a request to change the wording on the website so beginners (like me) don't experience frustration over this silly mistake.
I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.