Skip to content

Instantly share code, notes, and snippets.

@mikestratton

mikestratton/index.html

Created November 1, 2019 07:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikestratton/59d8ca61dbc93edc8afa80a61fcbe08f to your computer and use it in GitHub Desktop.
Save mikestratton/59d8ca61dbc93edc8afa80a61fcbe08f to your computer and use it in GitHub Desktop.
Download ZIP
Simonwep pickr, Bind with input
Raw
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<b>Use Case:</b>
<ul>
<li>Bind pickr with input</li>
</ul>
</div>
<div class="col-md-9">
<form id="myForm" class="form-horizontal" action="#">
<div class="form-group">
<label for="color">Choose Color:</label>
<div class="pickr"></div>
<input type="input" class="pickr-field" value="#FF0000" name="color"></input>
</div>
<br>
</form>
</div>
</div>
</div>
<br>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
</body>
Raw
script.js
$(document).ready(function() {
//
var $input = $("input.pickr-field");
var current_color = $(".pickr-field").val() || null;
//
var pickr = new Pickr({
el: $(".pickr")[0],
theme: "nano",
swatches: null,
defaultRepresentation: "HEXA",
default: current_color,
comparison: false,
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsva: false,
input: true,
clear: true,
cancel: true,
save: true
}
}
});
//
pickr
.on("clear", function(instance) {
//console.log("clear");
$input.val("").trigger("change");
})
.on("cancel", function(instance) {
current_color = instance
.getSelectedColor()
.toHEXA()
.toString();
//console.log("cancel", current_color);
$input.val(current_color).trigger("change");
})
.on("change", function(color,instance) {
current_color = color
.toHEXA()
.toString();
//console.log("change", current_color);
$input.val(current_color).trigger("change");
});
//
});
Raw
simonwep-pickr-bind-with-input.markdown
Raw
style.css
body{
padding-top:10px;
}
.row{
padding:5px;
}
.pickr {
display: inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment