I'm trying to create a range slider using HTML and CSS.
I want the range to be between two dates.
I looked up the code for a range slider and found this,
<form method="post" action="/action_page_post.php">
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true" value="Submit">
<p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
</form>
This is perfect in terms of what I want, but I want the minimum and maximum values to be dates. Lets say I want the slider to range from 2018-05-29 and 2018-06-25.
I'm not sure how to make this happen...
You can use this sample in CodePen provided by Rod Reyes. It's using jquery-ui plugin.
$(function () {
$("#slider-range").slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2014.01.01').getTime() / 1000,
step: 86400,
values: [new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
slide: function (event, ui) {
$("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
}
});
$("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
" - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<p>
<label for="amount">Date range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100" />
</p>
<div id="slider-range"></div>
See it in action also here: https://codepen.io/2rod/pen/JtIki
You should try this plugin. I think this does exactly what you need.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script src="jquery.js"></script>
<script src="jquery-ui.custom.js"></script>
<script src="jQDateRangeSlider-min.js"></script>
<script>
//<!--
$("#slider").dateRangeSlider();
//-->
</script>
</body>
</html>
This is the basic usage of the plugin. Unfortunately it's a 3rd party plugin if the link went not accessible you may lose the plugin as well.
Related
When using <input type="month"> with min and max, for example:
<input type="month" min="2020-01" max="2020-12">
Is it possible to disable certain months between them?
You could try a custom JavaScript library or a third-party date picker component. I had something on my pc about this one. Modify it to work as you want.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>
<input type="text" id="date-picker" />
<script>
const disabledMonths = [5, 6, 7];
flatpickr("#date-picker", {
minDate: "2020-01",
maxDate: "2020-12",
mode: "month",
disable: [
function(date) {
return disabledMonths.includes(date.getMonth());
}
]
});
</script>
</body>
</html>
Such widgets are built into browsers. Of course, in different cases a certain control is given. In this case, the maximum possible is to use the native argument step. For example:
<input type="month" min="2020-01" max="2021-02" step="2" />
I have the following program for the jQuery Mask plugin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="./scripts/jquery.mask.js"></script>
<script>
// https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(
function () {
$("#ssnId").mask("999-99-9999");
}
);
</script>
</head>
<body>
SSN:<br />
<input type="text" id="ssnId" name="ssn" />
</body>
</html>
When I blank out the SSN text field and type in a test pattern such as
33y
33=
33(
33+
or
33G
the last character gets changed to a minus and
33--
becomes the output.
(Notice that there are two minuses in the final output)
Is there some way I can get the jQuery Mask plugin to stop changing the last character of my test patterns to "--"?
NOTES:
I'm using v1.7.7 of the jQuery Mask plugin found at https://plugins.jquery.com/mask/
Please abstain from lecturing on best security practices for processing PII and SSN data since I'm only using SSN as an example.
Try making your mask use # instead of 9
$("#ssnId").mask("###-##-####");
And also add maxlength to the input tag:
<input type="text" id="ssnId" name="ssn" maxlength="11" />
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin#1.14.16/dist/jquery.mask.min.js"></script>
<script>
// https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(
function () {
$("#ssnId").mask("###-##-####");
}
);
</script>
</head>
<body>
SSN:<br />
<input type="text" id="ssnId" name="ssn" maxlength="11" />
</body>
</html>
I am working on a demo Web Sockets application. I have the communication set up between the client and the server and they are able to exchange the information between them. I am interested in representing the chat history in the form of a scrollable, color differentiated UI. I initially went with a TextArea which was perfect. Only thing was I am unable to color code the server and user responses differently. I then fell back to LI elements from Bootstrap. But they are appearing very bloated and one more thing that I noticed is since they are part of an UL, I am not getting the scroll bar. So the user input textbox is getting pushed to the bottom of the page as and when there is more communication between the client and the server.
Request you to suggest me an alternative HTML construct which I can explore.
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>A WebSocket Example!</title>
</head>
<body>
<h1>Lets Chat!</h1>
<small id="subtextMessage" class="form-text text-muted">Great conversations happen over a socket!.</small>
<BR><BR>
<!-- Building the Form -->
<form class="" id="chatform" onsubmit="clearTextInput();return false">
<div class="form-group">
<label for="conversationHistory">Conversation History</label>
<ul class="list-group" id="conversationList">
</ul>
<textarea class="form-control" id="conversationHistoryTextArea" rows="10" readonly></textarea>
</div>
<div class="form-group">
<label for="labelMessage">Type your message</label>
<input type="text" class="form-control" id="inputMessageTextBox" aria-describedby="inputMessage">
</div>
<button type="submit" class="btn btn-primary" onclick="sendMessage()">Send Message</button>
</form>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/chatscript.js">
</script>
</body>
</html>
Javascript:
function clearTextInput()
{
$("#inputMessageTextBox").val("");
console.log( "Reached Here" )
}
function sendMessage() {
ws.send( $("#inputMessageTextBox").val() );
$("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "YOU: " + $("#inputMessageTextBox").val() );
let li = document.createElement('li');
li.innerText = $("#inputMessageTextBox").val();
li.classList.add("list-group-item");
li.classList.add("list-group-item-info");
document.getElementById('conversationList').appendChild(li);
}
let ws = new WebSocket("ws://localhost:8000");
ws.onopen = function(event) {
console.log("Client: WebSocket request accepted.");
};
ws.onmessage = function(event) {
console.log("Received from the server" + event.data);
if( $("#conversationHistoryTextArea").val().trim().length > 0 )
$("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "SERVER: " + event.data );
else
$("#conversationHistoryTextArea").val( "SERVER: " + event.data );
let li = document.createElement('li');
li.innerText = event.data;
li.classList.add("list-group-item");
li.classList.add("list-group-item-primary");
document.getElementById('conversationList').appendChild(li);
};
Please let me know if you have any suggestions.
You can use the HTML <p> element, and use CSS classes for each different party.
You can also use <span> but you will have to deal with the line break.
I am sure there are many other solutions for this.
So I am trying to build the simplest Angular JS application and no idea what I am doing wrong.
It is made of 4 files:
index.html - which I use like a layout to display main.html
app1.js - used for defining simple routing rules like /main should redirect to main.html in combination with MainController; when it doesn't find a valid path, revert to a default which equals the previous path
MainController.js - I just have some timer functions here
main.html - displays a search button and search textbox
For some reason, I can't see mainvtemplate from my index.html which should redirect me to /main.
Here is the code:
index.html file
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
the app1.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
the main.html file:
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
You may ignore the countdown, this is a timer created in MainController.js. I render its simplified logic:
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
$scope.countdown = 5;
};
app.controller("MainController", MainController);
}());
Isn't weird I'm not able to see the search button and search textbox? Maybe I am missing sth really obvious here.
in your index.html
<script src="app.js"></script>
replace with
<script src="app1.js"></script>
main.html
<div ng-app="githubViewer" ng-controller="MainController ">// add ng app ang nd cntroller
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.