I am using Two types of datepicker in my page in one field I am using jQuery Multidatepicker and on another input field I am using datepicker. Both are working fine but the problem is datepicker is not hiding after selecting a date.
HTML
<div>
<label>Start Date:</label> <br />
<s:textfield type="text" readonly="true" id="startDate" name="startDate"
class="form-control" autocomplete="off"/>
</div>
JAVASCRIPT
In below code I used autoclose: true, but not working.
$("#startDate").datepicker({
prevText : "click for previous months",
nextText : "click for next months",
showOtherMonths : true,
dateFormat : 'dd/mm/yy',
selectOtherMonths : false,
maxDate : new Date(),
autoclose: true
});
In below code I used autoHide: true, still not working
$("#startDate").datepicker({
prevText : "click for previous months",
nextText : "click for next months",
showOtherMonths : true,
dateFormat : 'dd/mm/yy',
selectOtherMonths : false,
maxDate : new Date(),
autoHide: true
});
I wants to close calendar after selecting date automatically.
Please tell me what is the problem.
Check this code:
$(document).ready(function () {
$('#startDate').datepicker({
prevText : "click for previous months",
nextText : "click for next months",
showOtherMonths : true,
dateFormat : 'dd/mm/yy',
selectOtherMonths : false,
maxDate : new Date()
}).on('change', function(){
$('.datepicker').hide();
});
});
The datepicker should be closed automatically after user picking a date.
I think maybe the bug is caused by some where else in your code,
or you can simply try this first
$("#startDate").datepicker({});
Related
I am trying to add date picker but I am facing issue that Air DatePicker is showing date in both English and One more language I guess Russian
//Here it is code I am using for this
<input required type="text" class="form-control datepicker-here" id="textSchorOfficeOrderDate" autocomplete="off" data-language='en' data-date-format="yyyy-mm-dd">
//And Function for Date
$("#textSchorOfficeOrderDate").datepicker({
autoClose: true,
clearButton: true,
onSelect: function (formattedDate, date, inst) {
self.currentDate = date;
//It does't effct if I comment or not below line
self.onChangeMonthAndYear();
}
})
I want just English Language Date
Add language option in your script.I hope it will works for you.
$("#textSchorOfficeOrderDate").datepicker({
autoClose: true,
clearButton: true,
language: 'en', //add this line
onSelect: function (formattedDate, date, inst) {
self.currentDate = date;
//It does't effct if I comment or not below line
self.onChangeMonthAndYear();
}
})
This is ref link: http://t1m0n.name/air-datepicker/docs/
there. I just updated my daterangepicker on my website.It's working really fine on fields for posting ( starts on / ends on ), but...In my profile, I had my date picker with value="{{$user->dob}}" which gaves me the date of birth of my profile. Now, I updated my datepicker from DOB with this line :
<input type="text" name="dob" id="dob" value="{{ $user->dob }}">
but I'm getting NaN at value and when it's open up it looks like that :
.
Here is my script
$(function() {
$('input[name="dob"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: 2099,
}, function(start, end, label) {
});
});
I'm using Daterangepicker : http://www.daterangepicker.com/
You should use the locale in your settings as described here:
http://www.daterangepicker.com/#example2
Because you need to specify in which format your date is passed to the component
Im using the datetimepicker here (https://xdsoft.net/jqplugins/datetimepicker/)
I'm trying to a reservation, and I want that if the first datetime selected is the 20th of september at 12o'clock, i'd that in the second input I can only select of the previously selected day and above the previously selected hour
Can sombedy help please ? Thank's a lot in advance!
(the variable "nextDayReservation" is a date that's been been echo from the database, don't worry about it)
$("#datetimeFrom").datetimepicker({
minDate:nextDayReservation,
maxDate: '+1970/02/01',
format:'d/m/Y H:i', // d/m/Y H:i
minTime: '09:00',
maxTime: '22:00'
});
$("#datetimeTo").datetimepicker({
minDate:reservationDate,
format:'d/m/Y H:i',
maxDate: '+1970/02/01',
minTime:'09:00',
maxTime:'22:00'
});
Following works for date:
$("#datetimeFrom").datetimepicker({
format: 'Y/m/d H:i',
onShow: function(ct) {
this.setOptions({
maxDate: jQuery('#datetimeTo').val() ? jQuery('#datetimeTo').val() : false,
})
}
});
$("#datetimeTo").datetimepicker({
format: 'Y/m/d H:i',
onShow: function(ct) {
this.setOptions({
minDate: jQuery('#datetimeFrom').val() ? jQuery('#datetimeFrom').val() : false,
})
}
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<input id="datetimeFrom" type="text">
<input id="datetimeTo" type="text">
I am using the following date picker on my website for a start and end date selection:
https://bootstrap-datepicker.readthedocs.org/en/latest/index.html
The rules are:
start date can be between today and + 30 days, no more
end date can be no more than 1 year after the selected start date
So when the form loads, I've set the endDate option to "+1y -1d" which works great. But if the customer picks a start date of +30 days for example, I need the endDate option on the second field to extend to "current start date +1y -1d" again.
I've started the code but really not sure how to acheive this:
<script type="text/javascript">
$(function() {
$(".startdate").datepicker({
format: 'd MM yyyy',
startDate: '+0d',
endDate: '+30d',
autoclose: true,
startView: 0,
minViewMode: 0,
todayHighlight: true,
orientation: "top"
});
$(".enddate").datepicker({
format: 'd MM yyyy',
startDate: '+1d',
endDate: '+1y -1d',
autoclose: true,
startView: 0,
minViewMode: 0,
todayHighlight: true,
orientation: "top"
});
$("#startdate").change(function() {
var startdate = new Date ( $("#startdate").val() ) ;
//alert(startdate);
var newendatemaximum;
$(".enddate").datepicker({
endDate: ???????
});
});
});
</script>
Work In Progress Solution:
$(".startdate").change(function() {
//alert("start date change");
var newendatemaximum = new Date ( $(".startdate").val() ) ;
newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
alert(newendatemaximum);
$(".enddate").datepicker("option", "endDate", newendatemaximum);
});
You don't have to use json to set datepicker options. You can set them directly. Once you have the new max date that you want to use as a javascript date, you can just set that option directly:
$("#startdate").change(function() {
var newendatemaximum = new Date ( $("#startdate").val() ) ;
newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
$(".enddate").datepicker("option", "endDate", newendatemaximum);
});
I am using Bootstrap Datepicker.
I want to put an Age Restriction of 18 Years.
Dates less than Age 18 Years from current date should be disabled.
Here is my Fiddle:
http://jsfiddle.net/kGGCZ/17/
JS:
$(function()
{
$('#datepicker').datepicker(
{
viewMode: "years",
defaultDate: '-2yr',
}
);
});
Simply put endDate: '-18y' if you only want to allow user whose age is 18 years and above.
<input type="text" class="datepicker">
<script>
$('.datepicker').datepicker({
endDate: '-18y'
});
</script>
Working Example: https://jsfiddle.net/sparshturkane/w46euf5q/1/
Please refer Bootstrap Date picker docs for more options and instructions
This is the JavaScript you are after:
var dt = new Date();
dt.setFullYear(new Date().getFullYear()-18);
$('#datepicker').datepicker(
{
viewMode: "years",
endDate : dt
}
);
But your fiddle is using coffeescript so here is the same in coffee:
dt = new Date()
dt.setFullYear new Date().getFullYear() - 18
$("#datepicker").datepicker
viewMode: "years"
endDate: dt
working example: http://jsfiddle.net/Ln5x6/1/
You can use yearRange, to let users choose only years which comes under 18+ from current year. Like,
jQuery('#dateob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-110:-18',
showButtonPanel: true
});