How to hide the datepicker after selecting a date - javascript

I am using bootstrap to pick the date and wants that it hides when user select the date . Here is my datepicker code
<div class="form-group">
<input type="date" class="form-control datepicker" datepicker id="startdate2" placeholder=" Due Date" name="due_date" >
</div>
<div class="form-group">
<input type="date" class="form-control datepicker" datepicker id="startdate" placeholder=" Expire Date" name="expiry_date" >
</div>
And trying to hide by using this code.Could anyone help to aware me how it will work correctly.
<script>
$(document).ready(function () {
$('#startdate2').datepicker({
format: "dd/mm/yyyy",
autoclose: true
});
$('#startdate').datepicker({
format: "dd/mm/yyyy"
}).on('change', function () {
$('.datepicker').hide();
});
});
</script>
Thanks in advance.Any help will be appreciated.

You can use You can use event changedate() :
$('#startdate2').on('changeDate', function(ev){
$(this).datepicker('hide');
});
$(document).ready(function () {
$('#startdate2').datepicker({
format: "dd/mm/yyyy",
autoclose: true
}).on('changeDate', function () {
$('.datepicker').hide();
});
$('#startdate').datepicker({
format: "dd/mm/yyyy"
}).on('changeDate', function () {
$('.datepicker').hide();
});
});
IF it not work try blur() instead of hide() :
$(this).blur();

Related

Starting date and ending date are same using Bootstrap datepicker

Starting date and ending date are same. If change starting date automatically changed end date. Here my code
<input id="startingDate" class="datePicker form-control" name="startingDate" value="14-01-2017" type="text">
<input id="endingDate" class="datepicker form-control" name="endingDate" value="" type="text">
Javascript code
$(document).on('blur', '#startingDate', function(){
var date = $(this).val();
$("#endingDate").datetimepicker({
dateFormat: "dd-mm-yy",
defaultDate: date
});
});
What is my problem and how i can solve that problem ??
if you want to have the same value in endingDate when you leave your startingDate
you can do that's
<script>
$(document).ready(function(){
$("#startingDate").blur(function (){
$("#endingDate").val($(this).val());
});
});
</script>

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>

How to prevent auto open in bootstrap date picker?

I'm using bootstrap datepicker in my application which is dynamically built.
the dialog box is automatically open when the form is submitted with the data.
Below is my code:
JSP:
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" id="Q${qaf.id}_${qaf.type}" name="${qaf.id}" type="text" value="${fn:escapeXml(qaf.answerValue[0])}"/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
Javascript::
$(function (event) {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
});
});
Help me out to prevent the auto open .
I appreciate your help! Thanks in advance...
$(function () {
$('.datepicker').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
"autoApply": true,
locale: {
format: 'YYYY-MM-DD'
}
});
});
use this

Bootstrap datepicker auto fill end date

I am using the Bootstrap Datepicker here in order to display a simple calendar range picker. All is working well so far, however I would like some additional functionality that I can't seem to figure out.
I would like to select a start date and then automatically fill in the end date (+10 days).
I'm sure this is possible however I can't figure it out.
I have created a Fiddle. Any help is greatly appreciated.
My JS is as follows;
$( document ).ready(function() {
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yy",
startDate: "0d",
endDate: "+10d",
todayBtn: "linked",
clearBtn: true,
multidateSeparator: " ",
forceParse: false,
daysOfWeekDisabled: "0,6",
orientation: "top auto",
todayHighlight: true,
toggleActive: true
});
});
My HTML is as follows;
<div class="col-md-5" id="sandbox-container">
<h2>Select borrow date</h2>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
<input type="text" class="input-lg form-control" name="end" placeholder="return date" />
</div>
</div>
You can check this link
Datepicker using jquery
You have to include javascript on change fuction of first datepicker
$('firstdatepicker').change(function() {
var date2 = $('firstdatepicker').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('seconddatepicker').datepicker('setDate', date2);
});

jquery datepicker steals click/focus event from inputfield

in the following code
http://jsfiddle.net/KRFCH/24/
<pre>
<input type="text" id="d" />
<div id="z"></div>
pseudo code:
$('#z').datepicker({
inline: true,
altField: '#d'
});
$('#d').change(function(){
$('#z').datepicker('setDate', $(this).val());
});
$('#d').click();
$('#d').focus();
I can't get the input box to get the focus?
any ideas how I can make this happen?
just implement onSelect event handler:
$("#z").datepicker({
inline: true,
altField: '#d',
onSelect: function () {
this.focus();
}
});

Categories