Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
OK a couple quickie questions... using bootstrap 3 datepicker. in laravel project
I have multiple date selections on a form that vary. I want to just apply data-provide="datepicker" instead of using the javascript method. I cant seem to get this to work. Both code sets below. Also I am getting weird images in place of the glyphicon
<div class='input-group date'>
<input type='text' class="form-control" data-provide="datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span></div>
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
format: 'MM/YYYY'
});
});
</script>
</div>
@tebowner the reason you're getting weird 'images' I assume is because they're not being included properly.
Can you post more code?
Any errors in the console you're receiving? As this will shed light on why the glyphicons aren't showing, and that may also help to know why the date picker isn't working too.
To format your code correctly, use three consecutive backticks ` to open your code block, and three more to close it like so:
```
code goes here
```
OK... i see glyphicon looking in a directory i dont have (fonts/bootstrap/glyphicons-halflings-regular.woff) not sure why it would look here... maybe there is a conflict or something? I have FontAwesome installed and use this for other stuff
The code is now above
I think you should be using datepicker not datetimepicker
I have two in my form, and they are as such (simplified)
<script>
$('#myDatepicker').datepicker({
'formatDate': 'Y-m-d H:i:s'
});
$('#myDatepicker2').datepicker({
'formatDate': 'Y-m-d H:i:s'
});
</script>
I think you can use font awesome icons too. Are you using this date picker?
Ok, I see, I think you're using this datepicker.
glyphicon font is fixed , my fault
https://github.com/eternicode/bootstrap-datepicker
this is the datepicker i used
I will look at yours
I think you will like Fuel UX's better as they have other controls too, and they work great.
It woirks if i do what you do using javascript but i want to use the data-provide="datepicker"
@tebowner does that date picker give you that API? A quick search suggests it isn't.
With Fuel UX however, you can do that. :D
Let me know if you have any questions about using it, their API is really nice and very straightforward to use.
@mstnorris switched it :) do i need all this code ? seems weird to me. what is the simplest code to place here to get a date selection
<div class="input-group">
<input class="form-control" id="myDatepickerInput" type="text"/>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"></span>
<span class="sr-only">Toggle Calendar</span>
</button>
<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
<div class="datepicker-calendar">
<div class="datepicker-calendar-header">
<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
<button type="button" class="title">
<span class="month">
<span data-month="0">January</span>
<span data-month="1">February</span>
<span data-month="2">March</span>
<span data-month="3">April</span>
<span data-month="4">May</span>
<span data-month="5">June</span>
<span data-month="6">July</span>
<span data-month="7">August</span>
<span data-month="8">September</span>
<span data-month="9">October</span>
<span data-month="10">November</span>
<span data-month="11">December</span>
</span> <span class="year"></span>
</button>
</div>
<table class="datepicker-calendar-days">
<thead>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="datepicker-calendar-footer">
<button type="button" class="datepicker-today">Today</button>
</div>
</div>
<div class="datepicker-wheels" aria-hidden="true">
<div class="datepicker-wheels-month">
<h2 class="header">Month</h2>
<ul>
<li data-month="0"><button type="button">Jan</button></li>
<li data-month="1"><button type="button">Feb</button></li>
<li data-month="2"><button type="button">Mar</button></li>
<li data-month="3"><button type="button">Apr</button></li>
<li data-month="4"><button type="button">May</button></li>
<li data-month="5"><button type="button">Jun</button></li>
<li data-month="6"><button type="button">Jul</button></li>
<li data-month="7"><button type="button">Aug</button></li>
<li data-month="8"><button type="button">Sep</button></li>
<li data-month="9"><button type="button">Oct</button></li>
<li data-month="10"><button type="button">Nov</button></li>
<li data-month="11"><button type="button">Dec</button></li>
</ul>
</div>
<div class="datepicker-wheels-year">
<h2 class="header">Year</h2>
<ul></ul>
</div>
<div class="datepicker-wheels-footer clearfix">
<button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
</div>
</div>
</div>
</div>
</div>
You're right, that is the markup, you can always abstract it to a partial. That's what I've done.
It's only what the other plugins create anyway.
I used this exact code but it does look or perform like i would expect. I will mess with it. seems unstyled etc
Then you haven't included the bootstrap files or the other required ones.
What errors do you see in the console?
What OS and browser are you using?
You need to add this to your body tag
<body class="fuelux">
Include the two css files
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet">
And lastly, add the three JavaScript files to the bottom of your page
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.6.3/js/fuelux.min.js"></script>
firefox / windows 7 .... no errors in console... the calendar opens but without any styling really. and when you choose a visible month it closes the calendar
i use bower to bring in fuelux. i didnt know about the body tag
Try the body tag, and make sure you're including all of the relevant files
body tag helped... but i still get a semi-blank calendar (no years, no months, etc) and when i choose arrows to move or anything it just closes. maybe versions of jquery or bootstrap causing issues
Have you used the versions from their site (not that I think it matters) I think something else is going on, but worth a try for now to rule anything out.
@tebowner so I have included a full page example for you to try out:
Apologies that it looks scary, but as I said, you can extract most of the datepicker to a partial.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Test</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet">
</head>
<body class="fuelux">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="fu-example section">
<div id="myDatepickerContainer">
<div class="form-group">
<label class="control-label" for="myDatepickerInput">Choose a date (default) </label>
<div>
<div class="datepicker" data-initialize="datepicker" id="myDatepicker">
<div class="input-group">
<input class="form-control" id="myDatepickerInput" type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-calendar"></span>
<span class="sr-only">Toggle Calendar</span>
</button>
<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
<div class="datepicker-calendar">
<div class="datepicker-calendar-header">
<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
<button type="button" class="title" data-month="3" data-year="2015">
<span class="month">
<span data-month="0">January</span>
<span data-month="1">February</span>
<span data-month="2">March</span>
<span data-month="3" class="current">April</span>
<span data-month="4">May</span>
<span data-month="5">June</span>
<span data-month="6">July</span>
<span data-month="7">August</span>
<span data-month="8">September</span>
<span data-month="9">October</span>
<span data-month="10">November</span>
<span data-month="11">December</span>
</span> <span class="year">2015</span>
</button>
</div>
<table class="datepicker-calendar-days">
<thead>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody><tr><td class="last-month past restricted" data-date="29" data-month="2" data-year="2015" title="Restricted"><span><b class="datepicker-date">29</b></span></td><td class="last-month past restricted" data-date="30" data-month="2" data-year="2015" title="Restricted"><span><b class="datepicker-date">30</b></span></td><td class="last-month past restricted" data-date="31" data-month="2" data-year="2015" title="Restricted"><span><b class="datepicker-date">31</b></span></td><td data-date="1" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">1</b></span></td><td data-date="2" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">2</b></span></td><td data-date="3" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">3</b></span></td><td data-date="4" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">4</b></span></td></tr><tr><td data-date="5" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">5</b></span></td><td data-date="6" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">6</b></span></td><td data-date="7" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">7</b></span></td><td data-date="8" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">8</b></span></td><td data-date="9" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">9</b></span></td><td data-date="10" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">10</b></span></td><td data-date="11" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">11</b></span></td></tr><tr><td data-date="12" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">12</b></span></td><td data-date="13" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">13</b></span></td><td data-date="14" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">14</b></span></td><td data-date="15" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">15</b></span></td><td data-date="16" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">16</b></span></td><td data-date="17" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">17</b></span></td><td data-date="18" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">18</b></span></td></tr><tr><td data-date="19" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">19</b></span></td><td data-date="20" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">20</b></span></td><td data-date="21" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">21</b></span></td><td data-date="22" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">22</b></span></td><td data-date="23" data-month="3" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">23</b></span></td><td data-date="24" data-month="3" data-year="2015" class="current-day"><span><button type="button" class="datepicker-date">24</button></span></td><td data-date="25" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">25</button></span></td></tr><tr><td data-date="26" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">26</button></span></td><td data-date="27" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">27</button></span></td><td data-date="28" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">28</button></span></td><td data-date="29" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">29</button></span></td><td data-date="30" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">30</button></span></td><td class="next-month selected" data-date="1" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">1</button></span></td><td class="next-month" data-date="2" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">2</button></span></td></tr></tbody>
</table>
<div class="datepicker-calendar-footer">
<button type="button" class="datepicker-today">Today</button>
</div>
</div>
<div class="datepicker-wheels" aria-hidden="true">
<div class="datepicker-wheels-month">
<h2 class="header">Month</h2>
<ul>
<li data-month="0"><button type="button">Jan</button></li>
<li data-month="1"><button type="button">Feb</button></li>
<li data-month="2"><button type="button">Mar</button></li>
<li data-month="3"><button type="button">Apr</button></li>
<li data-month="4"><button type="button">May</button></li>
<li data-month="5"><button type="button">Jun</button></li>
<li data-month="6"><button type="button">Jul</button></li>
<li data-month="7"><button type="button">Aug</button></li>
<li data-month="8"><button type="button">Sep</button></li>
<li data-month="9"><button type="button">Oct</button></li>
<li data-month="10"><button type="button">Nov</button></li>
<li data-month="11"><button type="button">Dec</button></li>
</ul>
</div>
<div class="datepicker-wheels-year">
<h2 class="header">Year</h2>
<ul></ul>
</div>
<div class="datepicker-wheels-footer clearfix">
<button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.6.3/js/fuelux.min.js"></script>
</body>
</html>
this has more in it than on their web site ... look at
...on the web site its missingI pulled it from a page that I built, I don't think they've changed the docs, but anyway, the page above works.
it is working. you use a partial and pass in the default somehow?
sorry :) I know how to handle partials BUT I didnt know where to set the default date in the markup? do i need to set month day year?
As per the docs you just need to pass it a valid date object or a valid date-formatted string.
<div class="datepicker" data-initialize="datepicker" data-date="03/01/2014" id="myDatepicker">
or
$('#myDatepicker').datepicker('setDate', new Date());
OK thank you again :) I just dont see how to handle all the options via the data aware not using js. also Your link didnt work?
@tebowner I've updated the link above.
All you need to do is look at the available options and prepend "data-" to them as I showed you in the markup when you asked how to set a default date.
so OPTIONS cannot be passed in via data elements? http://getfuelux.com/javascript.html#datepicker-usage-options i need to set format and allow past dates
*** I SEE THIS - WILL TRY IT ** THX
Yes you can do that
<div class="datepicker" data-initialize="datepicker" data-date="03/01/2014" id="myDatepicker" data-allow-past-dates="allowPastDates">
how did you know that format to use..............
@tebowner I just did ;)
It is a fairly standard thing to do
JavaScript is camel-case allowPastDates, date, formatDate etc
HTML5 Data Attributes are hyphenated data-date, data-allow-past-dates
Please or to participate in this conversation.