How to Display year only Calendar? - javascript

I am using Predefined bootstrap calendar in my page. Its working Properly, but for few text box I need to display year only calendar.
My Codes are
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="~/Content/adminlte/components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- bootstrap datepicker -->
<script src="~/Content/adminlte/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script>
$(function () {
$('#Date').datepicker({
autoclose: true
})
})</script>
Design
<label>Date</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="Date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
My datpicker with text box image as follows
Its working fine to pickup a date.
But for few text box I need year only option as shown in image below
If I use code from some other stackoverflow answers or from this link code , it affect my date picker design and it also change the option for all text boxes to choose normal date also... Kindly help.. TIA.

use this config options:
$("#Date").datepicker({
autoclose: true,
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});

Look if you go to jquery page and searched for calender.
They will tell you the properties for calender format and how to use them and thus you copy and paste thrm in your bootstrap calender since it will be the same.
Regards.

Related

Datepicker not working / showing - Bootstrap 5

I am trying to add a timepicker to my page using bootstrap 5, for some reason the calendar is not loading so I can not pick any date. I do not know if I have done something wrong or the plugin is not compatible with the latest version of bootstrap.
If you click 'launch demo modal' you will see the date input field and datepicker is not working there.
This is the code for the input date field:
<div class="col-12">
<label for="date" class="col-sm-1 col-form-label">Date</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-append">
<span class="input-group-text bg-white d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
JS (truncated):
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker();
...
});
</script>
I also tried using $('.datepicker').datepicker(); according to the bootstrap-datepicker docs but nothing changed.
Demo page
Stackoverflow source
You should put bootstrap-datepicker.min.js after jquery.js. It somehow make errors because of that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
Why add additional JS for datepicker fields?
You can simply make the input field of type date to get a native browser date selector.
Example:
<input type="date" class="form-control" name="date-field" />
Support for date (along with time) fields can be found on Can I Use.
Include below CSS and js in your file
Reference: https://cdnjs.com/libraries/bootstrap-datepicker
<!-- Bootstrap datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
<!-- Bootstrap datepicker JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
For custom styling please have a look at the below link
Bootstrap Datepicker - Custom Styles

Bootstrap Datetimepicker disappears on second click

I have an Input control on my webform on which I am using bootstarp datetimepicker. The datetimepicker works perfectly when I click for the first time on the Input control. But if I click again on the input control, Datetimepicker disappears. I have click somewhere else on the webform and then click again on input control to show it. I am not able to find what is problem. Any kind of help is highly appreciated.
I hope my explanation is not confusing!
I have checked several question here on stackoverflow but none of them are working for me. I tried checking in datetimepicker documentation also but couldn't find anything or maybe I was not able to understand it properly.
HTML Code:
<div>
<div class="input-group date form_date" id="dt_1" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:inherit;">
<input class="form-control" type="text" value="" readonly="true" id="date1" style="width:inherit;" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
Jquery:
<script type="text/javascript">
$('.form_date').datetimepicker({
//language: 'fr',
weekStart: 1,
//todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
</script>
Bootstrap scripts:
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../date/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="../date/bootstrap-datetimepicker.js"></script>
Expected result is that Datetimepicker should not disappear on second click. It should only disappear if date selected or if clicked somewhere outside the control.
Thanks for help in advance.

jQuery datepicker maxDate issue

I have the following code for jQuery datepicker
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.
Updated with full html markup.
<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">
Using jQuery 1.10.2 and Angular 1.4.1
Hope this will work for you
$( "#datepicker" ).datepicker({
format: "dd/mm/yyyy",
maxDate: 0
});
Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.
HTML
<input id="Datepicker" type="text" readonly='true' />
Demo : Click here
Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

JQuery Date Picker Not Showing on Refresh

From what I can see including examples such as this one
jQuery Datepicker - refresh pickable days based on selected option
This code should work.
Here is where I am calling my external jquery scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
I will note in case it matters I am using a bootstrap theme but do not have boot strap datepicker loaded.
When I load the page the date picker loads fine using the code below. (I will note I was using a jquery change event but switched my code to more closely match the above answer in case it was something small I was missing
$(function(ready){
$(function() {
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
});
});
HTML
<input type="radio" onchange="loadDatePicker()" tabindex="7" class="change" id="radio_1" name="freq" value="1"> Monthly <input type="radio" onchange="loadDatePicker()" tabindex="8" id="radio_2" class="change" name="freq" value="2"> Bi-Weekly
<input class="form-control" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="{{date}}">
The outputted HTML is below:
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
Then I click my radio buttons and the following code is called
function loadDatePicker(){
console.log("test")
$('#datepicker').datepicker("destroy");
if($("input[type='radio'][name='freq']:checked").val() == 1){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
}else if($("input[type='radio'][name='freq']:checked").val() == 2){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+2W10D"
});
}
$('#datepicker').datepicker("refresh");
}
I can see the input change for a second but it quickly goes back
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
However, now the datepicker no longer comes up when the input for the datepicker is clicked.
I finally solved this.
It was an external piece of code modifying the DOM.
Part of a chat script I am working on for the same solution included the following lines of code which caused it. (I commented out lines until I found which ones were breaking it)
jQuery(document).ready(function($) {
$("body").append('<div id="chat" title="Basic chat"><div id="chats">Please Enter your Name: <input id="username" type="text" ></div></div>');
$("body").append('<div id="chat2" title="Basic chat"><div id="chatc"> </div><div id="chate"><input id="chatb" type="text" ></div></div>');
});
For some reason the system objected to this line being between where the date picker was initially declared, and where it was modified.
I moved the entire chat code library above the date picker code and above the jquery-ui library and it all started working as if by magic.

bootstrap datepicker from eternicode not selecting date

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

Categories