Your code has a few problems that are stopping this from working... here they are:
- The plugin requires jQuery UI - you need to load that
- You are not loading the actual Javascript file that contains the plugin
- You are not loading the stylesheet file
- You need to wait for the page to load before using
.colorPicker
- This is not that important, but I recommend changing your selector (
input#myColorPicker
) to something like#myColorPicker
So.. here would be the final code, after making all of these changes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.ui.colorPicker.min.js"></script>
<link rel="stylesheet" href="css/jquery.ui.colorPicker.css">
<script>
$(function() { // wait for page to load
$("#myColorPicker").colorPicker({
format: 'hex',
size: 100
});
});
</script>
Then where you want to put your color picker in your HTML, put
<input type="text" id="myColorPicker" name="color" />