<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css">
</head>
<body>
<h4>jQuery-UIのdatePickerのボタンイメージにBootstrapのGlyphiconsを使う</h4>
<label for="date1">標準ボタン</label>
<input type="text" value="" name="date1" id="date1" class="datepicker">
<label for="date2">Bootstrap3</label>
<input type="text" value="" name="date2" id="date2" class="datepicker">
<!-- script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$(function(){
var $datepicker = $(".datepicker")
$datepicker.datepicker(
{showOn:'button'}
);
$("#date1").next("button.ui-datepicker-trigger").html("<span class='glyphicon glyphicon-calendar'></span>");
})
</script>
</body>
</html>
More than 5 years have passed since last update.
jQuery-UIのdatePickerのボタンイメージにBootstrapのGlyphiconsを使う
Last updated at Posted at 2013-10-01
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme
List of users who liked
54