I am using https://eonasdan.github.io/bootstrap-datetimepicker/ and is it possible to cofigure to use 24 hours format?
Nowadays I use it like this but it is not what I need
$('.dayWorkTime').datetimepicker({
format: 'LT'
});
Yes, you have to set format to HH:mm.
As the docs says:
See momentjs' docs for valid formats. Format also dictates what components are shown, e.g. MM/dd/YYYY will not display the time picker.
Here a working example:
$("#datetimepicker1").datetimepicker({
format: 'HH:mm'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<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>
Related
I am looking to integrate ckeditor-full 4.14 into a razor page. I have downloaded the NuGet package into my project in Visual Studio. I cannot find any documentation on how to implement it into a .razor page. Can anyone help?
Error Message
In razor page,we add scripts in #section Scripts,you can add the script liking this:
<div>
<textarea id="textarea111"></textarea>
</div>
#section Scripts {
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script type="text/javascript">
var ckeditor;
$(function () {
ckeditor = CKEDITOR.replace("textarea111");
});
</script>
}
And this is my result of the code.
Update:
In blazor pages:
Firstly, You can install from NuGet using the following command:
Install-Package Blazored.TextEditor
Next,in Pages/_Host.cshtml :
Add the following CSS in the head tag
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
Then add the JS script at the bottom of the page using the following script tag.
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script>
<script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script>
And this is my page：
#inherits LayoutComponentBase
#using Blazored.TextEditor
<div>
<BlazoredTextEditor>
<ToolbarContent>
<select class="ql-header">
<option selected=""></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</ToolbarContent>
<EditorContent>
<br />
<h4>You can edit the text.</h4>
</EditorContent>
</BlazoredTextEditor>
</div>
Below is the code. can someone pls help me to identify 3 text boxes individually, without using indexes.
<html>
<head>
<title>test</title>
<script></script>
</head>
<body>
name:
<input type="text"/>
<br/>
name:
<input type="text"/>
<br/>
name:
<input type="text"/>
<div>testdiv</div>
</body>
</html>
You can try below expressions to match each input:
For the first one:
//input[not(preceding-sibling::input)]
For second:
//input[preceding-sibling::input and following-sibling::input]
For third:
//input[not(following-sibling::input)]
I'm trying to apply a jQuery etalage in my Rails 5 app.
I copied all the assets file to 'app/assets' folder. I removed the CSS and JavaScripts links from html header file and my 'css' working just fine but JavaScripts not working. JavaScripts only works if I add the link in the body section of my 'html.erb' file.
My 'html.erb' file is below: `
<!DOCTYPE html>
<html>
<head>
<title>Pedal House | Single :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<!--webfont-->
<!-- dropdown -->
<!--js-->
</head>
<body>
<!--banner-->
<script>
$(function () {
$("#slider").responsiveSlides({
auto: false,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
<div class="banner-bg banner-sec">
<div class="container">
<div class="header">
<div class="logo">
<img src="assets/logo.png" alt=""/>
</div>
<div class="top-nav">
<label class="mobile_menu" for="mobile_menu">
<span>Menu</span>
</label>
<input id="mobile_menu" type="checkbox">
<ul class="nav">
<li class="dropdown1"><a>BIKES</a>
<ul class="dropdown2">
<li>NEW BIKES</li>
<li>VELOCE</li>
<li>TREK</li>
<li>PHOENIX</li>
<li>GIANT</li>
<li>GHOST</li>
<li>BINACHI</li>
<li>CORE</li>
<li>MUSTANG</li>
<li>OTHERS</li>
</ul>
</li>
<li class="dropdown1">KIDS ITEM
</li>
<li class="dropdown1">PARTS
</li>
<li class="dropdown1">ACCESSORIES
</li>
<li class="dropdown1">ABOUT US
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--/banner-->
<div class="product">
<div class="container">
<div class="ctnt-bar cntnt">
<div class="content-bar">
<div class="single-page">
<!--Include the Etalage files-->
<script src="assets/jquery.etalage.min.js"></script>
<script>
jQuery(document).ready(function($){
$('#etalage').etalage({
thumb_image_width: 400,
thumb_image_height: 400,
source_image_width: 800,
source_image_height: 1000,
show_hint: true,
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
});
</script>
<!--//details-product-slider-->
<div class="details-left-slider">
<div class="grid images_3_of_2">
<ul id="etalage">
<li>
<a href="optionallink.html">
<img class="etalage_thumb_image" src="assets/m1.jpg" class="img-responsive" />
<img class="etalage_source_image" src="assets/m1.jpg" class="img-responsive" title="" />
</a>
</li>
</ul>
</div>
</div>
<div class="details-left-info">
<h3>SCOTT SPARK</h3>
<h4></h4>
<p><label>$</label> 300 </p>
<h5>Description ::</h5>
<p class="desc">The first mechanically-propelled, two-wheeled vehicle may have been built by Kirkpatrick MacMillan, a Scottish blacksmith, in 1839, although the claim is often disputed. He is also associated with the first recorded instance of a cycling traffic offense, when a Glasgow newspaper in 1842 reported an accident in which an anonymous "gentleman from Dumfries-shire... bestride a velocipede... of ingenious design" knocked over a little girl in Glasgow and was fined five
The word bicycle first appeared in English print in The Daily News in 1868, to describe "Bysicles and trysicles" on the "Champs Elysées and Bois de Boulogne.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<!---->
<div class="footer">
<div class="container wrap">
<div class="logo2">
<p class="copyright">2017 | Developed By Hussain & Zaman</p>
</div>
<div class="ftr-menu">
<ul>
<li>BIKES</li>
<li>KIDS ITEM</li>
<li>PARTS</li>
<li>ACCESSORIES</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<!---->
</body>
</html>
My 'application.js' file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require jquery.easydropdown
//= require jquery.etalage.min
//= require jquery.min
//= require responsiveslides.min
//= require rails-ujs
//= require turbolinks
//= require_tree .
`
I'm new with rails and I spent a lot of time to fix this problem. I tried so many ways but none worked. Some expert user please help me to fix this issue. Thanks in advance.
Have you added gem 'jquery-rails', '~> 4.3', '>= 4.3.1' to your Gemfile? In Rails 5 jquery does not come by default.
I'm trying to get the following Bootstrap 3 plugin to work:
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
One of the requirement is Moment.js:
http://momentjs.com/docs/#/customization/
My HTML is:
<div class="container">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
The JS:
<script type="text/javascript" src="/clip-art/static/datepicker/moment.js"></script>
<script type="text/javascript" src="/clip-art/static/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap.min.css" />
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap-datetimepicker.min.css" />
$(function () {
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
//format: moment().format('YYYY-MM-DD'),
format: moment().format('LLLL'),
locale: "en"
});
$('#datetimepicker7').datetimepicker({
useCurrent: false, //Important! See issue #1075
allowInputToggle: true,
enabledHours : false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
I'm a bit confused, as I can't seem to get the format to work. If I use this to set the format:
format: moment().format('LLLL'),
I get a REALLY weird date! (not even sure what language that is??)
If I change it to:
format: moment().format('YYYY-MM-DD'),
The date DOES show correctly, but then the dropdown stops working for me!
Can anyone suggest where I'm going wrong? I've done loads of playing around, googling etc, but I still can't figure it out :(
BTW: The dropdown itself works when I don't try and edit the format of the date:
Ok, well I'm not sure why it didn't like taking a moment().format() value, but after checking the GitHub issues, I came across an issue with the format. It led me to this example:
https://jsfiddle.net/dugujianxiao/ad64awL7/11/
So after tweaking my code to use format: 'YYYY-MM-DD' instead, and this seems to have sorted it:
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
locale: moment().local('en'),
format: 'YYYY-MM-DD'
});
The date is correct, as well as the format.
Hopefully this helps someone else!
How can I set a particular format in bootstrap 3 Datetimepicker?. The format should be "hh:mm:ss" and I don't want "AM" and "PM". Actually, this is for selecting Hours, minutes and seconds. I tried with this code,but it is not working.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
pickDate: false
});
</script>
</div>
</div>
I want to get it to appear like this -
You can use format option to set the date format you prefer. In your case you can have:
$('#datetimepicker4').datetimepicker({
format: 'HH:mm:ss'
});