I have problem with code:
<div class="control-group input-append date">
<label class="control-label" for="cid">Check In</label>
<div class="controls">
<input class="span8 required" name="cid" type="text" id="cid">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
and the javascript:
<script>
$('#cid').datepicker();
</script>
Exactly I have done insert jquery and datepicker javascript.
Problem:
The date can't auto close. I want to after click date, the table date will autoclose.
The icon calender can't click. I want to if user click icon calender beside form input, the table calender will showing.
Thanks
Can you try :
$('.datepicker tbody').on('click', function(){ $('.datepicker').hide() });
$('.icon-calendar').on('click', function(){ $('.datepicker').toggle() });
You have to precise the jquery selector in case where you have multi icon calendar or datepicker;
Related
I am trying to remove the button on the bottom of the HTML default date picker. I can't seem to find a way. The Button says: "Today"
<div class="form-group" id="datepicker">
<label id="WinterStart:" for="usr">Winter: </label>
<input type="date" class="form-control" id="winterStartFrom:" min="2019-11-10">
</div>
It may be your browser delivered setting,
Try with this or this
This will give you a custom date pickers.
Currently, my issue is that the calendar isn't showing (tells me the datetimepicker function isn't properly initialized on the controls).
Note that the implementation shown here is based on a different implementation elsewhere on the site which does work.
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
I've stripped out all the scripts like datatables and knockout as I believe they're superfluous and the list of scripts used is quite extensive.
Full [redacted to remove client information] markup for the page can be found here.
The form is simple, just inputs with .datetimepicker class on them:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-5">Start Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="StartDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">End Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="EndDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
</div>
</div>
Right now when I click on either of these inputs they just give me autocomplete options for values which I've entered in the past.
Used to be with things like this you'd initialize the javascript with something like this at the bottom of the page:
$(document).ready(function () {
$("#StartDate").datetimepicker();
$("#EndDate").datetimepicker();
});
This, however, doesn't appear to be necessary in this case as the page on which these datetimepickers work doesn't do it.
If I do initialize the controls this way, the calendar shows, but whether I use the locale option or the format option as indicated in this SO Answer, it never gives the dates the correct format that I need which is yyyy/mm/dd.
Ideally, I want to be able to see the calendar pop-out and have it display dates on the input with the correct format. If anyone can indicate possibly what I'm doing wrong I'd greatly appreciate it.
Here's a fiddle: https://jsfiddle.net/h3809a7r/
I just imported these libraries and its working now
Javascript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js
CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css
JsFiddle Link with your code
Can you please try this
$("#StartDate").datetimepicker({
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true
});
I have a problem using Bootstrap DateTime picker when nested within a panel.
The datetime calender and datetime hours and minutes components render an "empty" box when clicked.
Here's an example to show you what I mean
I am using the latest Bootstrap frameworks and components (Bootstrap framework V3.3.4) with Bootstrap 3 DateTimePicker v4.14.30.
Here is my HTML code
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Basic Search Criteria</h3>
<form id="frm1">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Start Date</span>
<input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon2">Start Time</span>
<input type="text" id='searchStartTime' name="searchStartTime" class="form-control" placeholder="Search start time" aria-describedby="basic-addon2">
</div>
</form>
</div>
and here is the Jquery code for the date and time input fields
$(function () {
$('#searchStartDate').datetimepicker({
format: 'DD-MM-YYYY',
});
});
$(function () {
$('#searchStartTime').datetimepicker({
format: 'HH:mm',
});
});
If I move the two statements
<input type="text" id='searchStartDate'
and
<input type="text" id='searchStartTime'
outside of the panel div both date control components render find.
But, when I move them into the Panel div, the DateTime calender and DateTime hour and minutes boxes render empty / or blank ~ as in the example above.
I have used the DOM Explorer and have managed at least to find an issue / problem within the Bootstrap.CSS that suggests the problem is with the div.panel-heading statement, specifically this
If I uncheck the color selection within the DOM Explorer I am then able to render the calender control as follows
But, this then leaves me with two new problems
1) the color of the panel title has changed from white to black
2) the default color of my calender control has changed to black
I have considered making an update to the bootstrap.css file to remove the color attribute div.panel-heading ~ but If I do that then I will lose the default setting on any other times I use a panel. Also, I am worried that if I did make a manual change, if I then say, in 12 months time download and use the next latest and greatest incarnation of Bootstrap ~ I will lose any changes I have made and my controls will not render again.
Does anyone know of what I can do to fix this, what is the 'best' approach for overriding the default settings so that I do not lose any 'fix' in future?
I tried to implement the solutions mention by #loni and #Jason but my calendar box still renders empty
However, I can render a calender control (but the styling has been lost) by changing the div class="panel panel-primary" to just div class="panel" as follows
but as you can see, of course now my panel has lost its formatting, the calendar does render, but not in it's correct color format.
The solution is simple as follows
1) close the panel header div.
2) wrap the panel contents within a panel-body div.
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Basic Search Criteria</h3> </div>
<div class="panel-body">
<form id="frm1">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Start Date</span>
<input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon2">Start Time</span>
<input type="text" id='searchStartTime' name="searchStartTime" class="form-control" placeholder="Search start time" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon3">End Date</span>
<input type="text" id='searchEndDate' name="searchEndDate" class="form-control" placeholder="Search end date" aria-describedby="basic-addon3">
<span class="input-group-addon" id="basic-addon4">End Time</span>
<input type="text" id='searchEndTime' name="searchEndTime" class="form-control" placeholder="Search end time" aria-describedby="basic-addon4">
</div>
<br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon5">Job Name</span>
<input type="text" id='jobName' name="jobName" class="form-control" placeholder="Search job name" aria-describedby="basic-addon5">
<span class="input-group-addon" id="basic-addon8">Application</span>
<input type="text" id="applicationName" name="applicationName" class="form-control" placeholder="Search by application" aria-describedby="basic-addon8">
<span class="input-group-addon" id="basic-addon7">Table</span>
<input type="text" id="tableName" name="tableName" class="form-control" placeholder="Search by schedule table" aria-describedby="basic-addon7">
<span class="input-group-addon" id="basic-addon6">Server</span>
<input type="text" id='serverName' name="serverName" class="form-control" placeholder="Search server name" aria-describedby="basic-addon6">
</div>
</form>
</div>
An example of the correctly rendered solution
I am creating a mobile app using HTML5 and jQuery mobile.
I have a form containing a field of the type "date":
<form id="registrationForm">
<div data-role="fieldcontain">
<input type="date" name="dateOfBirth"/>
</div>
<img id="calendar_logo"/>
</form>
When the user taps the field, the browser native calender shows.
What i need, is for that calender to show upon a click on the calender_logo image.
I tried setting the focusin with jQuery, but it does'nt work:
$('#calendar_logo').click(function(){
$("#registrationForm input[name='dateOfBirth']").focusin();
});
Can anybody please help?
thank you!
Your calendar logo could be wrapped in a label tag that points to the field. You just need to give the field an ID.
<form id="registrationForm">
<div data-role="fieldcontain">
<input type="date" id="dateOfBirth" name="dateOfBirth"/>
</div>
<label for="dateOfBirth">
<img id="calendar_logo"/>
</label>
</form>
Most browsers will focus the field if the user clicks on the label.
I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker
I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516