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);
});
Related
Using bootstrap datepicker to pick a date. Everything works fine as expected. But, because of server restriction we need to send data on submit like "022021" instead of "Feb 2021" now.
Not sure how to send data after formatting from original? Can help to provide any documentation or hints?
Thanks
$.fn.datepicker.defaults.format = 'M yyyy';
$('[data-key="from_date"]').datepicker({
format: 'M yyyy',
viewMode: 'months',
minViewMode: 'months',
autoclose: true,
todayHighlight: true,
endDate: new Date()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="from_date" data-key='from_date' />
<input type="submit" class="submit-date">
I test it in Fiddle.
Bootstrap v4.5.2
Datepicker for Bootstrap v1.9.0
This code should work.
<input type="text" class="form-control" id="date">
And this is the simple Javascript
$('#date').datepicker({
format: 'mmyyyy',
});
The result is
022021
Here you can set 2 formats 1 for display and 1 for getting data from backend.
$('.datepicker').datepicker({
format: {
toDisplay: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() - 7);
return d.toISOString();
},
toValue: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() + 7);
return new Date(d);
}
},
autoclose: true
});
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/
I am having an issue where the regular datepicker updates the value on the rails side in this format '2017-09-12 22:49:27', but I am trying to use datetimepicker and its not updating the value, it updates the text field with the format: M/DD/YYYY but not the actual value in the param as I need that in '2017-09-12 22:49:27' format but its staying the same value which is currently MM/DD/YYYY as what's loaded up for the text field and I am getting an undefined value when I try to see the current value:
var selectedDate = $("#from").find(".active").data("day");
Here is the ruby code
= text_field_tag :from_js, l((params[:from].to_datetime or #item.created_at), format: :american_no_time), class: 'form-control input-sm datetimepicker', id: 'from'
= hidden_field_tag :from, l((params[:from].to_datetime or #item.created_at), format: :american_no_time)
= text_field_tag :to_js, l((params[:to].to_datetime or Time.zone.now.to_datetime), format: :american_no_time), class: 'form-control input-sm datetimepicker', id: 'to'
= hidden_field_tag :to, l((params[:to].to_datetime or Time.zone.now.to_datetime), format: :american_no_time)
and here is the current javascript:
var maxDate = new Date();
var minDate = $("#from").val();
$(function () {
$('#from').datetimepicker({
format: "M/D/YYYY",
minDate: minDate,
maxDate: maxDate,
pickTime: false
});
$('#to').datetimepicker({
format: "M/D/YYYY",
minDate: minDate,
maxDate: maxDate,
pickTime: false
});
});
Any ideas or suggestions would be appreciated
Using daterangepicker plugin for this booking. Additional requirement needed for improvement.
Used below script to load 'Select departure date' on click input date field. But, once user clicked 'start' date. Have to change text to 'Select return date'.
With current behaviour of plugin, return date is not changable. Have to change both start & end date. Is it possible to change only 'end' date if user mistakenly selected wrong date? no changes in 'start' date until user changes.
HTML:
<input class="form-control input-lg" id="returnTripDepart" name="ReturnTrip" />
JS:
$('#returnTripDepart').click(function(){
$('.daterangepicker').addClass('returnTripDatePicker');
$('.departure--date').hide();
$(".returnTripDatePicker").prepend("<div class='departure--date'>Select Departure Date</div>");
});
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('input[name="ReturnTrip"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"minDate": today,
"maxDate": maxLimitDate,
"locale": {
format: 'DD MMM YYYY'
}
},function(start:any, end:any) {
$("#returnTripDepart").val(start.format('DD MMM YYYY'));
$("#returnTripReturn").val(end.format('DD MMM YYYY'));
});
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
});