i want to write this code with svelte framework
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#datetimepicker1').datetimepicker(); });
</script>
</div>
</div>
Or if there is another way to write the timing as in the picture
enter image description here
I searched for a long time and didn't find a solution
I can see you're using jQuery in svelte, do note that the $ shorthand is a reserved word in svelte and this won't work.
Please visit this question to see how to use jQuery and Svelte together... Otherwise you could use the vanillajs-datepicker library to implement the date picker in your svelte web app.
See my demo of the library here. Do read the comments for more guidance
Happy Coding 😊 ....
Related
I need some help, i have datepicker on bootstrap and want to find a way to position it. According to be left and mine does not do that at help. Please help me to improve my logic below. Thanks and also want to find a way to make my datepicker be in South African format, 'yy-mm-dd'. Mine shows 'dd-mm-yy', e.g 11/24/2019 it does not make. Please assist, thanks.
<div class = "container">
<div align="left">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from"
placeholder="startdate" width="110"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control"
placeholder="enddate" width="110"/>
</div>
</div>
</div><br>
// date functionality
$(document).ready(function(){
$('.input-daterange').datepicker({
dateFormat: "dd.mm.yy",
"orientation":"left"
});
});
Your bootstrap Html should be like this:
<div class = "container">
<div class="row">
<div class="col d-flex">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from"
placeholder="startdate" width="110"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control"
placeholder="enddate" width="110"/>
</div>
</div>
</div>
</div>
Then it'll be left aligned.
And for dd-mm-yyyy format your script should be like this.
// date functionality
$(document).ready(function(){
$('.input-daterange').datepicker({
dateFormat: "dd-mm-yy",
"orientation":"left"
});
});
I hope it'll help you
I have been tryng to use this datetimepicker for the last few days and no matter what i try the best i can get is the calendar appearing in the top left hand corner. I cannot find any real tutorials on how to implement the control and past answers on this site havent helped either.
Here is what i have now:
View
#Scripts.Render("~/Scripts/knockout-3.4.0.js")
#Scripts.Render("~/Scripts/jquery-1.10.2.js")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
In reference to addressing your second issue with the calendar glyphicon being spaced apart from the input you need to do either of these (your preference):
<div class="row">
<div class='col-sm-6' /*change this to col-sm-3 or any that is below 6*/>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar></span>
</span>
</div>
</div>
</div>
OR:
<div class="row">
<div style="width: 25%;/*or something close to that*/" class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
Also just a nit picky thing.. try to keep your Scripts and Styles together and not mixed between each other.. makes for easier reading.
The js script "bootstrap-datetimepicker"
requires Moment.js and Jquery.js to be loaded first.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/moment.js",
"~/Scripts/moment.min.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/bootstrap-datetimepicker.js"));
I am using bootstrap datetimepicker version 3. Here datetimepicker de-faulty taking current date and time. But in next version this problem is resolved. So I will try to use Eonasdan bootstrap datetimepicker version v4. For that what are the js and css files I have include in my jsp page?
Check manual installation guide here.
You must include:
jQuery
Moment.js
Bootstrap + collapse + transitions
So the files needed would be:
bootstrap.min.js
bootstrap.min.css
moment-with-locales.js
bootstrap-datetimepicker.css
bootstrap-datetimepicker.js
Check this fiddle for a working example.
HTML:
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
JS:
$('#datetimepicker1').datetimepicker();
I'm having a problem with button groups for bootstrap.
Right now I have jquery ui js called before bootstrap js and the button gorup works fine. However, if i keep this structure, jquery ui dialog buttons do not work, specifically the close button does not show due to conflicting js code.
If i switch the order then the jquery ui dialog close button shows but the button groups for bootstrap are all messed up, because of the conflict between the two js libraries.
I have tried using bootstraps solution:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Then when calling $(".btn").bootstrapBtn() and testing the button group every time i click a new button in the group i get the error:
cannot call methods on button prior to initialization; attempted to call method 'toggle'
I have done a ton of research and still can't come up with a solution.
Here is my code:
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
And my JS to handle the buttons:
$('.btn').button();
$('input[type=radio]').on('change', function () {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
PS: Using Jquery UI version 1.11.1 and Jquery version 1.11.1
If you simply Google that error message, you'll see that it's a jQuery UI error message, so $.fn.button at that point in your code is referring to the jQuery UI Button plugin, not the Bootstrap Button plugin.
You need to put the noConflict after you've loaded Bootstrap but before you load jQuery UI, e.g.:
<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>
You will then need to use $(...).bootstrapBtn(...) instead of $(...).button(...) in the rest of your code.
If you're using gulp or Grunt to build your assets (with main-bower-files for example) an option would be not to include the whole of jQueryUI. Just take the parts you need and skip buttons and tooltip. Those two are the ones that conflict the most in my experience.
For example put the following section in your bower.json:
"overrides":
"jqueryui": {
"main": [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/datepicker.js",
"ui/draggable.js",
"ui/droppable.js",
"ui/resizable.js",
"ui/selectable.js"
]
}
Just using the parts you need is also good practise to void page size when loading and sidesteps the conflict problem altogether. Hope this works in your case as well.
edit fixed typo
I know this an old post but I had the same issue. I had Bootstrap 3.0.3 and upgrading it to version >=3.4.1 solved the issue.
$('.btn').button();
$('input[type=radio]').on('change', function() {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
</div>
https://jsfiddle.net/codinglattice/gu4mjaep/29/
Try to move jquery UI js before bootstrap js. This way it works for me.
var bundle = new ScriptBundle("~/bundles/CommonJs")
.Include("~/js/jquery-1.12.4/jquery-ui.js")
.Include("~/js/bootstrap.min.js")
I am trying to use the jquery-ui accordion functionality on a drupal page. I have teams with multiple people in each team that I want to display. I have a view set up that groups by team, and has contact info for each team member. My accordion doesn't seem to be working. I used <?php jquery_ui_add('ui.accordion'); ?> to import the correct js file from the jquery ui module, and it is showing up in the js file.
I was wondering if I have too many div tags and that is shomehow messing with it. Does anyone see anything that may be affecting this?
Thanks for any thoughts.
Here is some sample code -
<div id="accordion">
<div>
<h3>Team: 1</h3>
<p>
<div class="views-field-title">
<label class="views-label-title">
Title:
</label>
<span class="field-content">John Doe</span>
</div>
<div class="views-field-field-email-value">
<label class="views-label-field-email-value">
Email:
</label>
<span class="field-content">John.Doe#email.com</span>
</div>
<div class="views-field-field-phone-value">
<label class="views-label-field-phone-value">
Phone:
</label>
<span class="field-content">555-555-5555</span>
</div>
<div class="views-field-field-extension-value">
<label class="views-label-field-extension-value">
Extension:
</label>
<span class="field-content"></span>
</div>
<div class="views-field-field-role-value">
<label class="views-label-field-role-value">
Role:
</label>
<span class="field-content">Team Leader</span>
</div>
</p>
and here is my jquery accordion call -
<script>
$(document).ready(function() {
$(function() {
$( "#accordion" ).accordion();
});
});
</script>
I hope you have figured it out already, but here's a solution I wrote up a while back...
http://www.cleaver.ca/content/jquery-ui-accordion-drupal-6
There can be some incompatibilities based on the version of jQuery and jQueryUI, so this may help sort things out. There's a link to the site where I got it workin
First off, when troubleshoot jQuery I have found it very useful to scale down any HTML that I pass to it to be parsed. Next, are you sure that the UI library is being called in. Try using drupal_add_js('/path/to/jquery.ui.js'); when you load your module.