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. 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>
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>
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
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);
});
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();
}
});