I downloaded one admin template that template has datetimepicker in that I want only date picker but I don't how to disable the time picker please help me how to fix these issues. I'll attach my class file and HTML code and same time I'll attach the time picker UI also.
<!-- Bootstrap Material Datetime Picker Css -->
<link href="{{asset('assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css')}}" rel="stylesheet" />
This one they using footer
<script src="{{asset('assets/plugins/momentjs/moment.js')}}"></script> <!-- Moment Plugin Js -->
<!-- Bootstrap Material Datetime Picker Plugin Js -->
<script src="{{asset('assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js')}}"></script>
This is my HTML code
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="zmdi zmdi-calendar"></i>
</span>
<input type="text" class="form-control datetimepicker" placeholder="Please choose date & time...">
</div>
</div>
You can do this by setting the time param as false like:
$('.datetimepicker').bootstrapMaterialDatePicker({ time: false });
Demo Here
Related
I want to use this Tab system:
https://material-components.github.io/material-components-web-catalog/#/component/tabs
I read the HTML source code of the above link and implemented a tab bar.
However, how do I switch displayed contents using this tab bar? Do I need to write JavaScript?
Yes, it is a JavaScript library.... so you will need to import the JavaScript.
Firstly you need to install the library, installation instructions can be found here.
Next you can proceed to using the tab bar, following these instructions.
Here's a quick working demo to show it's possible, (but I wouldn't recommend using this code)
<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<!-- Render tab barcomponent -->
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
I have a bootstrap modal with a body that allows vertical scrolling. Inside of this, I am trying to use a datetime picker, but the problem is that expanding the picker, causes the modal's body to add scroll bars. I need to keep the scrolling ability (for other things that can add content to the modal) but I also need the datetime picker to expand outside of the modal, and not cause the modal to scroll (so that it would occupy the red square without in the pic).
<div class="modal-body" style="overflow-y:scroll;">
<div class="row">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id="datetimepicker3">
<input type="text" class="form-control" data-bind="value: $data.visitdate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/axg1010/3xunve7r/
Check out your very first line: <div class="modal-body" style="overflow-y:scroll;">. If you take out the overflow-y:scroll the calendar will project over your modal.
I have all of these files in my website header:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="http://localhost:8080/Javascript/bootstrap.bundle.js" type="javascript/text"></script>
<link rel="stylesheet" href="http://localhost:8080/Css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" type="javascript/text"></script>
Then I have the following in my body:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#date").datepicker();
});
</script>
I want it to look like this: https://formden.com/blog/date-picker.
But instead it looks like this:
What do I do? I have been trying for hours. I have tried different ordering of the files. When I try to do datetimepicker(). I get an error. I just do not know what to do please help.
It looks like you are Using JqueryUI as well as BootstrapDatepicker. Since bootstrapDatepicker and JqueryUI both has got the same function name for their datepicker to be initialized hence there is an ambiguity.
Now your markup has got jqueryUI js loaded first so it is ideally using the jqueryUI datepicker function and expecting the CSS of jqueryUI which can be found here.
If you want to use the bootstrap datepicker then you might need to remove the jqueryUI.js or generate the jqueryUI js which is excluding the datepicker functionality.
I have a Laravel-based web application, and I have a very odd and specific problem appearing on some pages in Firefox only.
If I have a form on the page, and in that form there is a field with autofocus, the HTML loads before the CSS, and for a second or two, the user sees the page as plain text, before the CSS loads and then everything is back to normal.
The correlation sounds far-fetched, but removing the autofocus from the form field resolves the issue in 100% of cases on the website. Is the autofocus somehow requiring the browser to load the HTML before the styling? How do I fix this without removing autofocus from all my forms?
This is an example form field from the site:
<div class="form-group">
<label for="card-number" class="col-md-4 control-label">Card Number</label>
<div class="col-md-6">
<input id="card-number" type="text" class="form-control span4 card-number numbers-only" value="" required autofocus maxlength="16">
#if ($errors->has('card-number'))
<span class="help-block">
<strong>{{ $errors->first('card-number') }}</strong>
</span>
#endif
</div>
</div>
All the CSS files are loaded in the <head> of the page:
<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">
I am using the following source to create some good looking forms on my site.
If you look at the live demo, and go to the form titled "yoko" you will see that once you fill out the input box, it is supposed to stay open, and you are supposed to be able to see the text you input.
When I use this source, it opens when I click in the text box, but the form collapses even when it has been filled out, which it is not supposed to do.
On the demo when you click in the text box and fill it out, the class name of that span element goes from "input input--minoru" to "input input--minoru input--filled". When I use the css, and javascript files from the source the forms open up correctly when I click and type in them, but they do not stay open, and the class title does not changed to "input input--minoru input--filled".
In my header.php I all the css files in the following order:
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/normalize.css" >
<link type="text/css" rel="stylesheet" href="css/component.css" >
<link type="text/css" rel="stylesheet" href="css/style2.css" >
In my index.php I have the following piece of code:
<section class="test">
<div class="container">
<div class="row">
<span class="input input--minoru">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">First Name</span>
</label>
</span>
</div>
<div class="row">
<span class="input input--yoko">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">Last Name</span>
</label>
</span>
</div>
</div>
</section>
and at the very end of index.php I call the javascript files in this order:
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/script.js"></script>
The styles are all applying, so I know the css is at least styling correctly, but it is not doing the correct ::before and ::after functionality correctly.
JSFiddle of what I am talking about
If you type in something into a form, and then leave the input area the box collapses again. When it should stay up.
I did not include the .js files, but classie.js comes with the source, and they are ordered as mentioned above in my index.php