Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Edward campbell malan van wyk
6,403 PointsReset Bootstrap dateTimePicker options depending on Select tag value?
Hi,
I have a select tag in HTML with 3 different options, each option should change the datatimepicker's options I have next to the select tag. Is there a function that resets the datetimepicker options when a new select is chose.
What should happen is on each selection option certain days should be disabled in the datetimepicker, but I can only get the datetimepicker to change once when the page is loaded and I have chosen a select option. If I chose a different one again the datetimepicker does not change its options at all.
TIA
Code
HTML
<div class="form-group">
<label> * Training package</label>
<select name="trainingpackage" class="form-control" id="packageselector">
<option value="default">-- Select --</option>
<option value="visionunique">Vision Unique</option>
<option value="visionenterprise">Vision Enterprise</option>
<option value="mtt">MTT</option>
<option value="makro">Makro</option>
<option value="jobcosting">Job Costing</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="choosedate">
<label for="dtp_input2" class=" control-label">* Date Picking</label>
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" >
<input id="datepicker" class="form-control" size="16" type="text" value="" name="date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
</div>
```javascript
$(document).ready(function(){
$("#packageselector").change(function(){
var packagename = $("#packageselector").find(":selected").val();
if (packagename == "visionunique")
{
$('.form_date').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
daysOfWeekDisabled:[0,2,3,4,5,6]
});
$("#choosedate *").show();
}
else if(packagename == "visionenterprise")
{
$('.form_date').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
daysOfWeekDisabled:[0,1,2,4,6]
});
$("#choosedate *").show();
}
else if(packagename == "mtt" || packagename == "makro" || packagename == "jobcosting")
{
$('.form_date').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
daysOfWeekDisabled:[0,1,3,5,6]
});
$("#choosedate *").show();
}
});
});
Edward campbell malan van wyk
6,403 Pointssorry forgot to add the resources i use,
jquery 3.2.1 - updated my version Bootstrap.js - 3.2.6 bootstrap.css- 3.2.6 bootstrap-datetimepicker
Steven Parker
243,318 PointsCan you point me to CDN's for those, or to where you are hosting them?
Steven Parker
243,318 PointsSteven Parker
243,318 PointsI wasn't able to replicate your issue (I got ".datetimepicker is not a function"), but then I was just guessing about the versions of Bootstrap and jQuery you might be using.
Perhaps it would help if you show the part of the code that loads those and any other necessary resources, or at least identify the versions?
If you're using a workspace, you can make a snapshot of your workspace and post the link to it here.