Display date picker below input field - javascript

I am using bootstrap datepicker when I click on input field calendar display above the input field. I want to display it bellow input field.
JS
$(function () {
$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
}).datepicker("setDate", new Date());
//alert("#FirstFiscalTo");
});
Input Field
<input class="textboxCO input-sm form-control datePickerPickcer" id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">


Lücks solution is the one, just one minor detail dateFormat option is not valid, is format as referenced in the official doc here. You are not noticing this error because "mm/dd/yy" is the default format.
So, te solution will look like:
$(function () {
$("#fiscalYear").datepicker({ //<-- yea .. the id was not right
format: "mm/dd/yy", // <-- format, not dateFormat
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // <-- and add this
});
});


$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // add this
});
});
Reference: https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation


$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "bottom left" // left bottom of the input field
});


$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
});
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">


For datepicker from jquery rather than bootstrap, option [orientation] is not available.
The positioning of the datepicker panel is auto set by jquery depending on the cursor position relative to the window.
To ensure that datepicker is always below the cursor position when an input field is selected, I used the below code
$("input").datepicker().click(function(e){
$('.ui-datepicker').css('top', e.pageY);
})
e.pageY is the current mouse Y axis position in window.
as class ui-datepicker position is absolute, when "top" attribute is set to cursor Y axis value, the datepicker ui panel will be displayed always below cursor.

Related

how to change format datapicker to YYYY-MM-DD

how to make the datapicker format be like 2020-01-08
$(".datepicker").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
});
$("#tgl_mulai").on('changeDate', function(selected) {
var startDate = new Date(selected.date.valueOf());
$("#tgl_akhir").datepicker({
dateFormat: 'yy-mm-dd'
}, 'setStartDate', startDate);
if ($("#tgl_mulai").val() > $("#tgl_akhir").val()) {
$("#tgl_akhir").val($("#tgl_mulai").val());
}
});

You can use { dateFormat: 'yy-mm-dd' } to format your datepicker.
Try:
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true,
todayHighlight: true,
});
$(function(){
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true,
todayHighlight: true,
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<input type="text" class="datepicker" />
You can find the demo at http://jsfiddle.net/gaby/WArtA/

I want this date picker to choose dates from years between 1990 to 2000

Can someone help me correct this code. I want to pick dates that are between the years 1990 and 2000 only without allowing other dates like the ones in future to be selected.
<script>
$(document).ready(function(){
$( "#EmpBirthdate" ).datepicker({
dateFormat: 'yy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "-30"
});
});
</script>

$(function () {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeMonth: true,
changeYear: true,
yearRange: '1999:2012',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: new Date(1999, 10 - 1, 25),
maxDate: '+30Y',
inline: true
});
});
Just added year range option. It should solve the problem

You can use the min max attributes
Min Max
$( "#datepicker" ).datepicker({ minDate: value1, maxDate: value2 });

jQuery Date Picker hides when pressing Next/Previous

I have a jquery datepicker calendar.
When I press next button the calendar popup hides.
Due to this error I cannot select next month date.
Here is my code
$( "#moviedate" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
});

$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
});
});
http://jsfiddle.net/u2n3nnts/
If you are using another JavaScript library alongside jQuery. Your code should be in between the noConflict area:
jQuery.noConflict();
(function( $ ) {
$( "#moviedate" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
});
})(jQuery);

Jquery timepicker addon not working correctly

I have this code in my view (JS):
$("#mydivelement").timepicker();
Instead of only timepicker, it displays datetimepicker. I have datepicker defaults set in Layout page if it matters:
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy',
yearRange: '1930:2012',
changeYear: true,
changeMonth: true,
autoSize: true,
showAnim: 'slideDown',
firstDay: 1
});
Update: Used Library- jquery-ui-timepicker-addon.js

You are missing to add {} to inside of .timepicker()
Jquery
$(function() {
$( "#mydivelement" ).datepicker({
dateFormat: 'dd/mm/yy',
yearRange: '1930:2012',
changeYear: true,
changeMonth: true,
autoSize: true,
showAnim: 'slideDown',
firstDay: 1
});
$('#timepicker').timepicker({}); // it shows only timepicker without datepicker
});
jsFiddle example

How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker

I have following datepicker script:
<script>
$(function(){
$("#to").datepicker();
$("#from").datepicker().bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
Now dateformat is MM/DD/YY .how to change the date format to YYYY-MM-DD?

Use the dateFormat option
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
Demo at http://jsfiddle.net/gaby/WArtA/

Try the following:
$('#to').datepicker({
dateFormat: 'yy-mm-dd'
});
You'd think it would be yyyy-mm-dd but oh well :P

I had the same issue and I have tried many answers but nothing worked.
I tried the following and it worked successfully :
<input type=text data-date-format='yy-mm-dd' >

$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
See:
http://jqueryui.com/demos/datepicker/
and
http://docs.jquery.com/UI/Datepicker/formatDate#utility-formatDate

If in jquery the dateformat option is not working then we can handle this situation in html page in input field of your date:
<input type="text" data-date-format='yyyy-mm-dd' id="selectdateadmin" class="form-control" required>
And in javascript below this page add your date picker code:
$('#selectdateadmin').focusin( function()
{
$("#selectdateadmin").datepicker();
});

You need something like this during the initialization of your datepicker:
$("#your_elements_id").datepicker({ dateFormat: 'yyyy-mm-dd' });

this also worked for me. Go to the bootstrap-datepicker.js.
replace this code :
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
with :
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};

I used this approach to perform the same operation in my app.
var varDate = $("#dateStart").val();
var DateinISO = $.datepicker.parseDate('mm/dd/yy', varDate);
var DateNewFormat = $.datepicker.formatDate( "yy-mm-dd", new Date( DateinISO ) );
$("#dateStartNewFormat").val(DateNewFormat);

Try this:
$.datepicker.parseDate("yy-mm-dd", minValue);

Use .formatDate( format, date, settings )
http://docs.jquery.com/UI/Datepicker/formatDate

just add dateFormat:'yy-mm-dd' to your .datepicker({}) settings, your .datepicker({}) can look something like this
$( "#datepicker" ).datepicker({
showButtonPanel: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
});
</script>

Just need to define yy-mm-dd here. dateFormat
Default is mm-dd-yy
Change mm-dd-yy to yy-mm-dd. Look example below
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
} );
Date: <input type="text" id="datepicker">

Thanks for all. I got my expected output
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script>
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
<div class="">
<p>From Date: <input type="text" id="from"></p>
<p>To Date: <input type="text" id="to"></p>
</div>

this worked for me.
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});

This work for me:
$('#data_compra').daterangepicker({
singleDatePicker: true,
locale: {
format: 'DD/MM/YYYY'
},
calender_style: "picker_4", },
function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});

This is what worked for me in every datePicker version, firstly converting date into internal datePicker date format, and then converting it back to desired one
var date = "2017-11-07";
date = $.datepicker.formatDate("dd.mm.yy", $.datepicker.parseDate('yy-mm-dd', date));
// 07.11.2017

For me in datetimepicker jquery plugin format:'d/m/Y' option is worked
$("#dobDate").datetimepicker({
lang:'en',
timepicker:false,
autoclose: true,
format:'d/m/Y',
onChangeDateTime:function( ct ){
$(".xdsoft_datetimepicker").hide();
}
});

$('#selectdateadmin').focusin( function()
{
$("#selectdateadmin").datepicker();
});

Categories