More than 5 years have passed since last update.

jQuery-UIのdatePickerのボタンイメージにBootstrapのGlyphiconsを使う

Last updated at 2013-10-01Posted at 2013-10-01

<!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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up