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");
Related
I need some help on when my FullCalendar Select:function{} exectues I want to my div (form) to show. right now I implemented a alert/prompt to show. But I need help or guide me on what am I doing wrong in my code below. All I need is to show my div when I double click on the calendar, basically replace the prompt to the form. thank you for the help. here is my code.
Javascript snippet:
select: function(info ) {
let title = prompt("Event Content:");
if (title) {
calendar.addEvent({
title: title,
start: info.startStr,
end: info.endStr
})
}
calendar.unselect();
},
HTML:
<div class="modal fade" id="schedule-edit">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Add Task</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="event-form">
<div class="form-group">
<label>Title:</label>
<input type="text" name = "title" id="title" class="form-control">
</div>
<div class="form-group">
<label>Project:</label>
<input type="text" id="project" class="form-control">
</div>
<div class="form-group">
<label>Est. Time (hours)</label>
<input type="text" id="time" class="form-control" placeholder="(Examples: 3,12.5,5.75")>
</div>
<div class="form-group">
<label>Time Spent (hours)</label>
<input type="text" id ="timeSpent" class="form-control" placeholder="(Examples: 3,12.5,5.75")>
</div>
<div class="form-group">
<label>Description</label>
<!--Add rich text editor here -->
<div class="sample-toolbar" id="description">
<span class="fa fa-bold fa-fw"></span>
<span class="fa fa-italic fa-fw"></span>
<span class="fa fa-list fa-fw"></span>
<span class="fa fa-link fa-fw"></span>
</div>
<div class="editor" id="sampleeditor"></div>
<div class="form-group">
<label>Priority</label>
<select class="form-control" id='firstList' name='firstList' onclick="getFoodItem()">
</select>
</div>
<div class="form-group">
<label>Start Date</label>
<br>
<input type="date" id="myDate" placeholder="yyyy-MM-dd" />
</div>
<div class="form-group">
<label>Due Date</label>
<br>
<input type="date" id="myDue" placeholder="yyyy-MM-dd" />
</div>
</div>
</form>
</div>
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImageOnly: false,
buttonImage: '',
dateFormat: 'dd/mm/yy',
onSelect: function (dateString, txtDate) {
DisplayDate("Selected Date: " + dateString + "\nTextBox ID: " + txtDate.id);
}
});
});
function DisplayDate(message) {
alert(message);
};
</script>
As you see above, when we click on any date, DisplayData function is called and we display a message.
And to hide/show any div, you can do something like:
const targetDiv = document.getElementById("third");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
};
<body>
<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<div id="third">This is the THIRD div</div>
<button id="toggle">Hide THIRD div</button>
</body>
As it's obvious, I'm not going to make a fuss. However, if anything is unclear, feel free to ask!
I need help to adjust date range of date picker dynamically based on data-value selected on dropdown list. I've tried with code i written below but it just didnt work.
I use bootstrap, jquery, and bootstrap datepicker.
Here is my code
<link rel="stylesheet" href="<?php echo base_url(); ?>plug/bootstrap.min.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>plug/bootstrap-datepicker3.min.css"/>
<script src="<?php echo base_url(); ?>plug/jquery-3.1.1.min.js"></script>
<script src="<?php echo base_url(); ?>plug/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>plug/bootstrap-datepicker.min.js"></script>
<?php
$data[0] = array("id"=>"2", "name" => "Anton", "date_start" => "2016-10-04", "date_end" => "2016-10-14");
$data[1] = array("id"=>"4", "name" => "Boby", "date_start" => "2016-10-09", "date_end" => "2016-10-29");
$data[2] = array("id"=>"5", "name" => "Ciara", "date_start" => "2016-10-01", "date_end" => "2016-10-31");
$data[3] = array("id"=>"6", "name" => "Don", "date_start" => "2016-10-05", "date_end" => "2016-12-31");
$data[4] = array("id"=>"7", "name" => "Ester", "date_start" => "2016-10-01", "date_end" => "2016-12-31");
?>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<form class="form-horizontal mt-20" method="post" action="action/input">
<div class="form-group">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;">
<option disabled selected>Select name</option>
<?php
foreach ($data as $r) {
echo "<option value='$r[id]' data-value=\"{'date_start'='$r[date_start]', 'date_end'='$r[date_end]'}\">$r[name]</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Start Date</label>
<div class="col-sm-5">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="start_date" name="start_date" type="text" class="form-control pull-right">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">End Date</label>
<div class="col-sm-5">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="end_date" name="end_date" type="text" class="form-control pull-right">
</div>
</div>
</div>
</div>
<div class="box-footer col-md-offset-3">
<button type="submit" class="btn btn-success mr-10">Save</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button>
</div>
</form>
</div>
</section>
<script type="text/javascript">
$(document).ready(function () {
$('#date').change(function () {
var start = $(this).find(":selected").data("value").start_date;
var end = $(this).find(":selected").data("value").end_date;
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
startDate: start,
endDate: end,
autoclose: true
});
});
});
</script>
Could you please modify your HTML little bit to form <option> like:
<option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option>
Here date_start and date_end sits in two different attributes and hence easy to grab it:
$(document).ready(function() {
var start = null;
var end = null;
$('#date').change(function() {
start = $(this).find(":selected").data("date_start");
end = $(this).find(":selected").data("date_end");
$('.input-group.date').datepicker("remove"); //clearing the previos options and again initiating datepicker
initDatePicker();
});
function initDatePicker() {
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
startDate: new Date(start),
endDate: new Date(end),
autoclose: false
});
}
});
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<form class="form-horizontal mt-20" method="post" action="action/input">
<div class="form-group">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;">
<option disabled selected>Select name</option>
<option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option>
<option value='4' data-date_start="2016-10-09" data-date_end="2016-10-29">Boby</option>
<option value='5' data-date_start="2016-10-01" data-date_end="2016-10-31">Ciara</option>
<option value='6' data-date_start="2016-10-05" data-date_end="2016-10-22">Don</option>
<option value='7' data-date_start="2016-10-01" data-date_end="2016-10-17">Ester</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Start Date</label>
<div class="col-sm-5">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="start_date" name="start_date" type="text" class="form-control pull-right">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">End Date</label>
<div class="col-sm-5">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="end_date" name="end_date" type="text" class="form-control pull-right">
</div>
</div>
</div>
</div>
<div class="box-footer col-md-offset-3">
<button type="submit" class="btn btn-success mr-10">Save</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button>
</div>
</form>
</div>
</section>
I want to set mindate from another datetimepicker selected date in bootstrap datepicker. Is it possible to do this??
<div class="form-group hide" id="divStartsOn">
<div class="col-md-3">
<label>Start On</label>
</div>
<div class="input-group col-md-9" style="padding-left: 14px;">
<input id="datetimepicker8" type="text" class="date-picker form-control" />
<label for="datetimepicker8" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="input-group col-md-6" style="padding-left: 14px;">
<input id="datetimepicker9" type="text" class="date-picker form-control" />
<label for="datetimepicker9" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
jQuery Code:
$("#datetimepicker6").on("dp.change", function (e) {
var sdate = $('#txtdatetimepicker1').val().split('/');
sdate[2] = sdate[2].substring(0, 4);
var stdate = sdate[0] + "/" + sdate[1] + "/" + sdate[2];
$("#datepicker8").datepicker("option", { minDate: stdate })
});
I solved this is by removing datpicker.js and add jquery.ui.js after jquery.js
i have a field with 'add' and 'remove' field options and my problem is if someone click remove button at first time then there is nothing left. however i created a another button and hide it by this code.
$('#more_fields').hide();
is that possible to show this button when there is no field or no button with deleteMe class available
i'm using this code for delete fields.
$(document).on("click",".deleteMe", function(){
$(this).closest(".addform").remove();
});
var room = 1;
function add_fields() {
room++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="addform"><div class="input-group"> <label for="Services">Services '+room+'</label> <input type="text" class="form-control" id="Services" name="serve[]" style="max-width: 148px;" placeholder="Add Services"> <span class="input-group-btn" > <button class="btn deleteMe" style="">×</button> <button class="btn btn-success pull-right" onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button> </span> </div></div>';
objTo.appendChild(divtest)
}
//]]>
$(document).on("click",".deleteMe", function(){
$(this).closest(".addform").remove();
});
$('#more_fields').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form class="form-inline">
<div class="">
<div class="form-group">
<div id="room_fileds" class="text-center">
<div class="addform">
<!--<label for="qualification">Services 1</label>
<input type="text" class="form-control" id="Service" style="" placeholder="Add Services">
-->
<div class="input-group">
<label for="Services">Services 1</label>
<input type="text" class="form-control" id='Services' name="serve[]" style="max-width: 148px;" placeholder="Add Services">
<span class="input-group-btn" >
<button class="btn deleteMe" style="">×</button>
<button class="btn btn-success pull-right" onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button>
</span>
</div>
<span id="err_quali" style="color:red;display:none;font-size:13px;padding-left:105px;">Enter only Chars</span>
</div>
</div>
<input type="button" class="btn btn-success btn-sm" id="more_fields" onclick="add_fields();" value="Add Services" />
</div>
</div>
</form>
on delete do like
room -= 1;
than if at some point you do
if(room===0) { /*here show your button */ }
I've noticed that you use ID for buttons like #err_quali, #Services... Don't. you're going to have load of duplicate IDs on the page which is wrong. Use classes instead.
jsBin demo
var rooms = 1;
var c = 1;
var $roomsWrapper = $("#room_fileds"); // the parent
var $room = $(".input-group").clone(); // Store a group
$('#more_fields').hide();
$(".form-inline").on("click", ".deleteMe", function(ev) {
ev.preventDefault();
rooms -= 1;
$(this).closest(".input-group").fadeOut(300, function(){
$(this).remove();
});
$('#more_fields').toggle( !rooms );
}).on("click", ".addField, #more_fields", function(ev) {
ev.preventDefault();
rooms += 1;
c += 1;
var $klon = $room.clone();
$klon.find(".groupNum").text(c);
$roomsWrapper.append( $klon );
});
.err_quali{
color:red;
display:none;
font-size:13px;
padding-left:105px;
}
.form-control{
max-width: 148px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM -->
<form class="form-inline">
<div id="room_fileds">
<!-- CLONABLE FIELD HELPER -->
<div class="input-group">
<label for="Services">Services <span class="groupNum">1</span></label>
<input type="text" name="serve[]" placeholder="Add Service">
<span class="err_quali">Enter only Chars</span>
<span class="input-group-btn" >
<button class="deleteMe btn">×</button>
<button class="addField btn" type="button">+</button>
</span>
</div>
<!-- Here jQuery appends Room group clones -->
</div>
<button id="more_fields">Add Services</button>
</form>
I have a situation with datetimepicker. It doesn't show any calendar When I click the icon.
The chrome browser not showing any errors in the development console.
<script src="Scripts/jquery-2.1.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment.js"></script>
<link href="css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>
<div class="row cuadrado">
<div class="col-md-4 col-sm-6 col-xs-1"><h4>Fecha de Nacimiento :</h4></div>
<div class="col-md-8 col-sm-6 col-xs-1">
<div class="input-group date" id="datetimepicker1">
<input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
$(function () {
$('#datetimepicker1>input').datetimepicker({
format: "yyyy-mm-dd"
});
});
It's a lot easier if you provide the input with a proper id and bind the datetimepicker plugin to it.
HTML
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="date">Date</label>
<div class="input-group">
<input name="date" type="text" id="my-date" class="form-control form-date">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
JS
$( '#my-date' ).datetimepicker( { format: 'MM-DD-YYYY' } );
Here is a working JSFiddle
First of all just include the jquery ui.min.js file for example
<link href="Contents" src="Scripts/jquery-ui-2.1.1.min.js">
and then write the code accordingly as mentioned below:
$("#datetimepicker1").datepicker({
dateFormat: "dd,MM,yy",
showOn: "button",
buttonText: "Select Date",
changeYear: "true",
changeMonth:"true"
});
add class="form-group",this works for me, but I don't know why
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>