When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton.
I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="dialog-message" title="Download complete" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<input type="text"/>
<input type="radio" onClick="showDialog();"/>
<input type="radio"/>
</body>
</html>
And the jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: 'center',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.
the css:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-widget-overlay {
background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity: .50;
filter:Alpha(Opacity=50);
}
Related
I have two datepickers on the same page the first one (start date) I want to disable all previous dates which I've managed to do. The second datepicker (end date) I want it to disable all previous dates from when the first date picker is selected.
I've got the following code:
The start date - this is working as intended.
<div class="field">
<%= form.label :startDate %>
<%= form.text_field :startDate, {class: "form-control custom datepicker"}%>
<script type="text/javascript">
$(".datepicker").attr('readOnly', 'true');
$(document).ready(function(){
$('.datepicker').datepicker({
minDate: 0,
yearRange : '+0:+1',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
</div>
end date - I'd like it to disable all previous dates from when start date is selected
<div class="field">
<%= form.label :endDate %>
<%= form.text_field :endDate, {class: "form-control custom date"}%>
<script type="text/javascript">
$(".date").attr('readOnly', 'true');
$(document).ready(function(){
$('.date').datepicker({
minDate: 0 ,
yearRange : '+0:+1',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
</div>
I've also got another date picker which keeps selecting today's date I don't want it to do this how do I disable this? This date picker goes back 70 years on the year it shows 1948 but today's date is selected so if the user selects a date without changing the year or month it picks today's date.
Thanks in advance for any help.
Don't need to write JS script twice, I think it will be some complex if you write script twice, you can this to write script only once, for example, see this below snippets.
I think it will help you.
$( document ).ready(function() {
$( function($) {
var dateToday = new Date();
var dates = $("#start-date, #end-date").datepicker({
defaultDate: "+2d",
changeMonth: true,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "start-date" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
});
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.form-control {
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.book-now-form {
padding-top: 10px;
}
.book-now-form .form-group {
margin-right: 1.5em;
}
.book-now-form label {
font-size: 13px;
display: block;
color: #fff;
padding-top: 5px;
}
.book-now-form .form-control {
height: 25px;
line-height: 25px;
background: white;
display: block;
font-size: 12px;
color: #969696;
padding: 4px 6px;
}
.book-now-form #start-date, .book-now-form #end-date {
padding-right: 22px;
background: url(https://www.solodev.com/assets/booking-form/icon_calendar.png) no-repeat scroll 98% center rgb(255, 255, 255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form" >
<input id="campaign" type="hidden" value="visitflagler_topNavWidget" name="campaign"> <input id="clone_id" type="hidden" value="278" name="clone_id">
<!--check in element-->
<div class="form-group">
<label for="check-in">Check In</label> <!-- <input type="textfield" class="form-control" id="check-in" placeholder="12.20.2014"> -->
<input type="text" class="form-control" id="start-date" name="start-date" placeholder="mm/dd/yyyy">
</div>
<!--check out element-->
<div class="form-group">
<label for="check-out">Check Out</label> <!-- <input type="textfield" class="form-control" id="check-out" placeholder="12.27.2014"> -->
<input type="text" class="form-control" id="end-date" name="end-date" placeholder="mm/dd/yyyy" >
</div>
<!--submit-->
<div class="form-group">
<button name="Submit" href="#" class="btn btn-sm btn-success">Submit</button>
</div>
</form>
By default, hovering color of table and button in DateTimePicker is grey, how to change it into custom color? I tryed the css code below but nothing happens.
.bootstrap-datetimepicker-widget table td.active:hover{
background-color: #337ab7;
color:#fff;
}
.bootstrap-datetimepicker-widget button:hover{
background-color: #337ab7;
color:#fff;
}
Here you go:
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
background-color: #123456; // Your custom color
}
PS. Look into the basics of Chrome DevTools.
The problem is that the buttons are not <button> elements, so your CSS rule is not matched.
You can use data-action attribute to select a button element and set colors as you want.
Here a live example for the close button.
$('#datetimepicker1').datetimepicker({
useCurrent: false,
format: "YYYY/MM/DD HH:mm ZZ",
//locale: "ja",
sideBySide: true,
toolbarPlacement: "bottom",
showClose: true,
icons: {
close: 'closeText'
}
});
.closeText:before {
content: "Close";
}
.bootstrap-datetimepicker-widget table td a[data-action="close"]>span:hover {
/* Set her your custom color */
background-color: #337ab7;
color: #fff;
}
<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.17.1/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>
Note that the picker has the debug option that allows you inspect component's HTML to simplyfy style customization.
P.S. I've set up the example starting from your previous question.
How do I transform the usual input field tag <%= file_field_tag :file, multiple: true %> like
into a link :
This worked for me:
HTML:
<input type='file' id='file' name='file' />
<a href="#" id='link-upload'>Upload</a>
JS:
<script type="text/javascript">
$(function(){
$('#link-upload').click(function(e){
e.preventDefault();
$('#file').click();
});
});
</script>
CSS:
#file{ width:0; height:0; }
Make sure to add jQuery:
<script type="text/javascript">
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
This worked for me:
HTML
<a class="btn-input">seleccionándolos<input type="file" multiple="" id="comment-images" /></a>
CSS
.btn-input {
overflow: hidden;
position: relative;
cursor: pointer;
}
.btn-input input[type="file"] {
height: 30px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
opacity: 0.0;
/* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=0);
/* IE lt 8 */
-ms-filter: "alpha(opacity=0)";
/* IE 8 */
-khtml-opacity: 0.0;
/* Safari 1.x */
-moz-opacity: 0.0;
/* FF lt 1.5, Netscape */
}
Example here
I'm creating a page to manage the our times at the office (for example when we made home-office). This requires selecting a date and then time-range.
I know about the Date-Picker from jQuery-UI, and there also seems to be something interesting for time picking. But since I need a start and end time, a UI to select date and time range would be perfect. Is there something you could recommend?
Visit jQuery UI datepicker range example and click "view source".
Combine with jquery timepicking solution found here.
That should hopefully get you going in the right direction.
Another interesting option could be handle the date in the date-picker and the time-range with a separated UI component (in this specific case start and end time are in the same day).
You can take a look at these time-range sliders:
$("#slider-range").slider(options_object);
http://jsfiddle.net/jrweinb/MQ6VT/
http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/
$(document).ready(function(){
$(".datetimepicker").datetimepicker({
timepicker: true,
allowTimes: [
'12:00', '12:30', '13:00','13:30','14:00',
'14:30', '15:00', '15:30', '16:00', ]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.css">
<input type="text" class="datetimepicker" />
You can select time using this slider.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
background: url('https://www.w3schools.com/howto/contrasticon.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('https://www.w3schools.com/howto/contrasticon.png');
cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="10" max="22" maxvalue="10" class="slider" id="myRange">
<p>Value: <span id="demo">4PM</span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
slider.oninput = function() {
var time=slider.value;
if(time<12){
time=time+'AM';
}
else if(time>12){
time=time-12+'PM';
}
else if(time=12){
time=12+'PM';
}
//alert(time);
output.innerHTML = time;
}
</script>
</body>
</html>
I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.
I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
// window.setTimeout(function(){
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
//}, 1);
}
});
});
</script>
</head>
<body>
<form>
<ul id="wrapper">
<li id='one'>
<div style="width: 100px; height: 100px; border: 1px solid green">
one<br /></div>
</li>
<li id='two'>
<div style="width: 110px; height: 110px; border: 1px solid red">
two<br /></div>
</li>
</ul>
<br />
</form>
</body>
</html>