We Keep Coding

Why date is not displaying for jquery date picker?

Iam using date picker jquery and it is not displaying inside input field. My link is https://jsfiddle.net/sbk2hd4c/10/ .
My code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
My link is: https://jsfiddle.net/sbk2hd4c/10/
Thankyou in advance!!!

Check this
https://jsfiddle.net/sbk2hd4c/11/
You used your Id in div which should be in your input tag
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' >
<input type='text' class="form-control" id='datetimepicker1' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

<input type='text' class="form-control" id='datetimepicker1' />
Change the id for input as above. Div should have different id.

You can bind the changeDate to the datepicker and can set the date in textBox
$('#datetimepicker1').datetimepicker().on('changeDate', dateChangeListener);
function dateChangeListener(event) {
var formattedDate = event.format('dd.mm.yy');
$('text_box_id').val(formattedDate);
}

clear checkboxes of selected options in jquery multiple select

In below fiddle, I have a bootstrap modal and there is a Select Users MultipleSelect.
I need to clear the selection on modal close, like set the dropdown to defaults without any selection.
For example, if I select user 1 and user 2, then on modal close, none should be selected. The previous selection must be gone.
The code I am trying isn't helping me out and neither are any posts here on stack overflow.
A little that I tried is this :
$("#usersDropDown option:selected").attr("checked",false);
And this :
$("#usersDropDown option:selected").attr("selected",false);
And also this:
$("#usersDropDown option:selected").removeAttr("checked");
Please guide me what should I do ?
Fiddle

Hi can you check now fiddle. Its working I guess.
I add this code to modal shown. If you want you can add it to hidden function
$("#usersDropDown").siblings(".ms-parent")
.find("li.selected input[type='checkbox']").click();

You can use the following code to reset the form data and the multi select box in the drop-down on bootstrap modal window to clear contents.
$('#shareLocationModal').on('hidden.bs.modal', function(){
$('#usersDropDown').multipleSelect('refresh'); // to reset the multi select users dropdown
$(this).find('form')[0].reset(); // To reset form fields
})

You can use $('#usersDropDown').multipleSelect("uncheckAll"); inorder to deselect all.
JSFiddle
var currentDate = new Date();
var day = currentDate.getDate();
if (day < 10)
day = "0" + day;
var month = currentDate.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var hours;
var year = currentDate.getFullYear();
todayDateReport = year + "-" + month + "-" + day;
$("#currentDate").html(todayDateReport);
startDate = todayDateReport + " 00:00:00";
endDate = todayDateReport + " 23:59:59";
hours = " 00:00";
$('.input-group').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
collapse: true,
sideBySide: false,
useCurrent: false,
showClose: true,
});
$('#hoursInput').datetimepicker({
format: 'HH:mm',
collapse:true,
sideBySide:false,
useCurrent:false,
showClose:true,
focusOnShow: false,
});
$('#hoursInputExpiry').datetimepicker({
format: 'HH:mm',
collapse:true,
sideBySide:false,
useCurrent:false,
showClose:true,
focusOnShow: false,
});
$("#startDateInputExpiry").val(startDate);
$("#endDateInputExpiry").val(endDate);
$("#hoursInput").val(hours);
$("#hoursInputExpiry").val(hours);
$("#sendDropDownOptions").on('change', function() {
if ($("#sendDropDownOptions option:selected").text() == "Datetime") {
$("#durationHoursSend").addClass('hide');
$("#sendTD").append($("#startdatetimeSend"))
$("#startdatetimeSend").removeClass('hide');
} else if ($("#sendDropDownOptions option:selected").text() == "Hours") {
$("#startdatetimeSend").addClass('hide');
$("#sendTD").append($("#durationHoursSend"))
$("#durationHoursSend").removeClass('hide');
} else {
$("#startdatetimeSend").addClass('hide');
$("#durationHoursSend").addClass('hide');
}
});
$('#shareLocationModal').on('shown.bs.modal', function() {
$('#usersDropDown').multipleSelect("uncheckAll");
if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") {
$("#startdatetimeExpiry").removeClass('hide');
$("#expiryTD").append($("#startdatetimeExpiry"))
}
});
$("#expiryDropDownOptions").on('change', function() {
if ($("#expiryDropDownOptions option:selected").text() == "HoursExp") {
$("#startdatetimeExpiry").addClass('hide');
$("#durationHoursExpiry").removeClass('hide');
$("#expiryTD").append($("#durationHoursExpiry"))
}else if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") {
$("#durationHoursExpiry").addClass('hide');
$("#startdatetimeExpiry").removeClass('hide');
$("#expiryTD").append($("#startdatetimeExpiry"))
}
else {
$("#durationHoursExpiry").addClass('hide');
$("#startdatetimeExpiry").addClass('hide');
}
});
$("#usersDropDown").multipleSelect({
placeholder: "Select Users",
selectAll: true,
width: "100%",
filter: true,
});
$("#send").on("click", function()
{
$("#sendDropDownOptions").val('Now').trigger('change');
});
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<button class="btn btn-primary btn-responsive md-btn" id="btnn" data-toggle="modal" data-target="#shareLocationModal">
Share
</button>
<div id="shareLocationModal" class="modal fade">
<div class="modal-dialog wideModal">
<div class="modal-content">
<div class="modal-header modal-header-custom">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
<h4 class="modal-title" id="modaltitle">Share Location Preferences</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row form-group">
<div class="col-xs-12">
<div class="form-group col-md-12 col-sm-6">
<form id="shalreLocationDetails" class="form">
<div>
<div class="form-group">
<label>Phone No:</label>
<input type="tel" class="form-control" id="phoneNo" data-toggle="tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Phone No" onkeypress="return checkValidation(event)" data-placement="bottom" placeholder="Mobile Number"
maxlength="10" data-validation="number">
<!-- <input type="text" class="form-control" id="phone"placeholder="Phone No" data-validation="number" data-validation-allowing="+" /> -->
</div>
<div class="form-group">
<label>e-mail:</label>
<input type="email" class="form-control" id="email" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="e-mail" placeholder="e-mail" data-validation="email">
</div>
<div class="form-group">
<label>Select Users:</label>
<select id="usersDropDown" multiple="multiple" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Select Users">
<option>User 1</option>
<option>User 2</option>
<option>User 3</option>
<option>User 4</option>
</select>
</div>
<div class="form-group">
<label>Send:</label>
<select id="sendDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Send Options" class="form-control" style="width:100%;">
<option value="Now">Now</option>
<option value="Datetime">Datetime</option>
<option value="Now">Hours</option>
</select>
</div>
<div id="sendTD"></div>
<br>
<div class="form-group">
<label>Expiry:</label>
<select id="expiryDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Expiry Options" class="form-control" style="width:100%;">
<option>DatetimeExp</option>
<option>HoursExp</option>
</select>
</div>
<div id="expiryTD"></div>
<br>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-responsive md-btn" id="send">Send</button>
<button type="button" class="btn btn-default btn-responsive md-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div id="startdatetimeSend" class="hide">
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" placeholder="Start Date" id="startDateInputExpiry" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div id="durationHoursSend" class="hide">
<div class='date' id='startDate'>
<input type='text' class="form-control" placeholder="Start Date" id="hoursInput" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div id="startdatetimeExpiry" class="hide">
<div class="input-group date" id='endDate'>
<input type='text' class="form-control" placeholder="End Date" id="endDateInputExpiry" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div id="durationHoursExpiry" class="hide">
<div class='date' id='startDate'>
<input type='text' class="form-control" placeholder="Start Date" id="hoursInputExpiry" style="position: relative;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

Have you tried $("#usersDropDown").prop('selectedIndex',-1); ?

Works for me:
$("input:checkbox").removeAttr("checked");

How to display the start date one day ahead with bootstrap-datepicker

The select date seem to be empty when I added startDate: '+1d' into the javascript. Otherwise, it is just displaying today's date. I need it to display one day ahead and in some situations, two days ahead as well.
Javascript below:
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: false,
startDate:'+1d',
dateFormat: 'dd-mm-yy'
}).datepicker('update', new Date());
HTML Code below:
<div class="form-group">
<div class="col-sm-2"></div>
<label for="inputName" class="col-sm-3 control-label">Select Date Range</label>
<div class="col-sm-4">
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="start"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker2" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="end"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>

you can use moment.js for this type of date/time manipulation
var tomorrow = moment().add(1, 'day').format('DD/M/YYYY');
outputs
03/11/2016
see jsbin:
here is the full working jsfiddle: https://jsbin.com/haxamaxaqe/edit?html,output

$('#txtDate').datepicker('setDate', "+1d");

How to get the value of input and sum the total

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.
Here my html code for the inputs i will not include all of the fields to lessen the code.
var ma = +(document.getElementById('majore').textContent);
var qu = +(document.getElementById('quize').textContent);
var hss = +(document.getElementById('hs').textContent);
var attt = +(document.getElementById('att').textContent);
var laboo = +(document.getElementById('labo').textContent);
var acttt = +(document.getElementById('act').textContent);
var recitss = +(document.getElementById('recits').textContent);
var total = ma + qu + hss + attt + laboo + acttt + recitss;
document.getElementById('totals').innerHTML = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
here's my js. this code is inside in the `success function` of `ajax`.

Use value property, not textContent/innerHTML to get the value from Input-Element
Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo
var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>

You may try this code
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<script>
function sum() {
var ma = parseInt(document.getElementById('majore').value);
var qu = parseInt(document.getElementById('quize').value);
var hss = parseInt(document.getElementById('hs').value);
var totals = ma + qu + hss;
document.getElementById('totals').innerHTML = totals;
}</script>

You can get or set the value for the input element using val property.
Get the value from the input element and sum the values
Set the value for the total input field
Here is the Code :
var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val());
$('#totals').val(total);
Check your output in Jsfiddle
This is simple and optimized way. Read more about val property here

function numberSum(N) {
var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;
}
function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
<p id="results"></p>
Your showing only your body part ...kindly do the script like this way

button for Date and Time in Bootstrap Datetimepicker

I'm trying to have two buttons. One for time and another for date.
For example
http://jsfiddle.net/RR4hw/1383/
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" readonly />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
jQuery(function () {
jQuery('#startDate').datetimepicker();
jQuery('#endDate').datetimepicker();
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
});
how can i approach it? Is this possible?

I solved this by using option "sideBySide":
jQuery('#startDate').datetimepicker({sideBySide: true});
jQuery('#endDate').datetimepicker({sideBySide: true});
I hope it helps.