I am using materializecss for the first time in my web application and
I am struggling with datepicker. It is not working at all.
I imported materialize.css and js file and use the code
<div>
<input type="date" class="datepicker" />
</div>
and added script code
$(document).ready(function() {
$('select').material_select();
window.picker = $('.datepicker').pickadate({
selectYears: 16, // Creates a dropdown of 15 years to control year
format: 'yyyy-mm-dd'
});
});
but nothing worked, it shows a disabled text box.
Also I want to know how to add timepicker in materializecss?
I had the same problem. My problem was solved with downgrading jquery to 2.1.4. It seems, that on some reason the datetimepicker and jquery 2.2.1 are not working together.
cheers
Thomas
First to know, you need to check the version of your Materialize css and javascript version, also don't forget to check jquery version and use the initialization code in your custom init javascript.
check my code in init.js for initialization, CSS and JS Materialize via cdn
$(document).ready(function() {
$('.modal').modal();
//this are my init
$('#dtp').datepicker();
$('#dtp').setDate(new Date());
});
<html>
<head>
<!-- this is my CSS via cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="row">
<form class="col s12 m6 card">
<div class="row center">
<h4>Materialize DateTime Picker</h4>
<div class="input-field col s12 m12">
<input id="dtp" type="text" class="datepicker">
<label for="dtp">Birthday</label>
</div>
</div>
</form>
</div>
<!-- this is my JS via cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
Check the documentation from Materialize website, it is always helpful for programmers like me.
Hope this answer help you
Try to run my Code Snippet
<div class="row">
<div class="input-field col s12">
<input id="idate" type="text" name="idate" class="datepicker" >
<label for="idate">Issue Date</label>
</div>
</div>
$('.datepicker').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
Related
I had a weird problem with TinyMCE v6. If I use as follows:
<div class="main-wrapper">
<textarea id="wysiwyg">The text to edit.</textarea>
</div>
<script>
tinymce.init({selector:'#wysiwyg'});
</script>
I can see the editor window, but the content is not shown and can't write into it.
Changed it to:
<div class="mymain-wrapper">
<textarea id="wysiwyg">The text to edit.</textarea>
</div>
<script>
tinymce.init({selector:'#wysiwyg'});
</script>
It works like a charm.
When I use an anchor tag without an href="" all is good and the button style is there, the second a add an href it completely removes the anchor tag and leave only the text inside the parent div
without href:
<div class="container">
<a class="button"> my button</a>
</div>
result in browser devtools
<div class="container">
<a class="button"> my button</a>
</div>
with href
<div class="container">
my button
</div>
result in browser
<div class="container">
my button
</div>
Looks like this could be the work of the link checker. Try adding x-cq-linkchecker="skip":
<div class="container">
<a x-cq-linkchecker="skip" href="/content/mypage.html" class="button"> my button</a>
</div>
I guess it might be also related to xssconfig
as you add 'href' attribute to div in your example
<div href="/content/mypage.html" class="container">
<a class="button"> my button</a>
</div>
In general it is not allowed, therefore AEM can remove it
/libs/cq/xssprotection/config.xml
Bootstrap Datepicker 4.15.35 works well with Bootstrap 3.3.7, jQuery 1.11.0, and Moment 2.10.6.
But I would like to base my project on Bootstrap 4.0.0 and jQuery 3.1.1.
Does anyone now a combination that works?
Here you go..
$('#datepicker').datepicker();
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="input-group date">
<input type="text" class="form-control" id="datepicker" placeholder="MM/DD/YYYY">
</div>
</div>
Hope this help you good luck..
even this simple code will do:
<form action="/yourpage.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
How can I perfectly align and space my inline inputs forms in bootstrap
<div class="form-group col-lg-12">
<div class="col-lg-6">
<input type="text" class= "form-control" value="First Name">
</div>
<div class="col-lg-6">
<input type="text" class= "form-control" value="Last Name">
</div>
</div>
Use col-xs instead of col-lg
see this for a try
And keep all your input inside the
`<div class="form-group col-xs-12">`
I don't quite understand our question very well, maybe a picture to illustrate what you want to achieve would be helpful.
I have basically wrapped everything with a column-xs-12 so its perfectly aligned. Also included an example if you want to place two input forms on one line. I have made a plunk to help you out, hope it helps.
<div class="col-xs-12"> </div>
http://plnkr.co/edit/lj866U6QlvbLKhF4jujI?p=preview
basically guys i will like to layout a website with dojo where by i will have a header, content area ( this is divided in two with some accordions in the left pane and the right for the main content) then a footer.
since i need the site to always have this layout i decided to put it in the master layout. however when i view the site, i see the default index page alright but its not in the pane as i was hoping and none of the dijit widgets gets rendered.
not sure if pasting large code in a post is allowed if not i am sorry but below is the code for the master layout. i have not done much to the default zend tool structure. i have only created a couple of modules:
<?php
Zend_Dojo::enableView($this);
$this->dojo()->setCdnBase(Zend_Dojo::CDN_BASE_GOOGLE)
->addStyleSheetModule('dijit.themes.tundra')
->setDjConfigOption('parseOnload', TRUE)
->setDjConfigOption('locale', 'en-GB')
->setDjConfigOption('isDebug', TRUE);
echo $this->dojo();
?>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body>
<div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="false">
<div id="logo">
<img src="/images/logo.gif" />
</div>
<div id="menu">
HOME
SERVICES
CONTACT
</div>
</div><!-- end header -->
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
region="center" id="content">
<div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"
id="leftAccordion" region="leading" splitter="true">
<div dojoType="dijit.layout.AccordionPane" title="One fancy Pane">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Another one">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Even more fancy" selected="true">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Last, but not least">
</div> <!-- end AccordionContainer -->
</div>
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
<?php echo $this->layout()->content ?>
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
</div>
<div id="footer">
<p>Created with Zend Framework. Licensed under Creative Commons.</p>
</div><!-- end footer -->
</div>
You have a typo when setting your dojo config options. Instead of
->setDjConfigOption('parseOnload', TRUE)
it needs to be
->setDjConfigOption('parseOnLoad', TRUE)
Watch the uppercase 'L'. If you fix this then at least the dojo parser will do it's job.
Didn't check if your layout is OK, see the comment of Ken.