I am using two datetimepicker Bootstrap, the first is startDate, and the second is enddate, The problem is that i should pick the startdate, and in the enddate automaticlly to be minimum date(the date i select in startdate). And in the datatimepicker of enddate maximum of date to be +7 days. Can you help me please?
I tried to get the date in the first datatimepicker called datatimepicker6 , and i did it but i dont know how to use in the enddate datatimepicker called datatimepicker7. Below is the code:
//these part is to pick the date and it work
$("#datetimepicker6").on("dp.change", function(e) {
var drr = $('#datetimepicker6').data('date')
alert(drr);
});
$('#datetimepicker6').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
keyBinds: {'delete': null}
});
//I want to use that result as the minimum of this datatimepicker and to add +7 days as maximum
$('#datetimepicker7').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
//useCurrent: false,
//maxDate: drr,
keyBinds: {'delete': null},
useCurrent: false //Important! See issue #1075
});
add this in your onchange event it will works
e.date.add(7, 'day');
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
$('#datetimepicker7').data("DateTimePicker").date(e.date);
full code for onchange
$("#datetimepicker6").on("dp.change", function (e) {
//var val = $('#datetimepicker6').data('date');
e.date.add(7, 'day');
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
$('#datetimepicker7').data("DateTimePicker").date(e.date);
});
});
check the demo here
No need to carry variable into another function, you can just declare a variable inside the event, working Fiddle.
$(function () {
$('#datetimepicker6').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
keyBinds: {'delete': null}
});
$('#datetimepicker7').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
useCurrent: false,
keyBinds: {'delete': null},
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function(e) {
var drr = $('#datetimepicker6').data('date');
var endDate = new Date(e.date);
endDate.setDate(endDate.getDate()+7);
$('#datetimepicker7').data("DateTimePicker").minDate(drr);
$('#datetimepicker7').data("DateTimePicker").maxDate(endDate);
});
});
Related
I have two daterangepicker, I want to set plus two year as the maxdate for the second daterangepicker based on the value from first daterangepicker. For example if I set the value to "2019-10-10" on the first daterangepicker then the maxdate should be set to the second datepicker as "2021-10-10".
This is what I have tried but not seems to be working
$('.date-select').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
}).on("input change", function (e) {
$("#end_date").daterangepicker({ singleDatePicker: true, minDate: -0,dateFormat: 'YYYY-MM-DD', maxDate: "+0D+0M+2Y" });
});
$('#end_date').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
});
}
});
It shows invalid date. Help is much appreciated. Thanks.
I don't see you referencing the first date input at all. Try fetching it's value, convert it to a Date object, add two years and set it as the new maxDate of the #end_date input like so:
$('#start_date').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
}).on("input change", function (e) {
let d = new Date( $('#start_date').val() );
d.setFullYear(d.getFullYear() + 2);
$('#end_date').daterangepicker({
singleDatePicker: true, locale: {format: 'YYYY-MM-DD'}, maxDate: d
});
});
$('#end_date').daterangepicker({
singleDatePicker: true, locale: {format: 'YYYY-MM-DD'},
});
See this JS Bin for a demo.
By the way: you might have your reasons to choose otherwise, but it would be much easier if you don't use two seperate inputs and define maxSpan option. That way, you don't have to deal with events at all and the library does the work for you.
You can also use 'OnSelect' event of Datepicker for the same...
$("#From_Date").datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateStr) {
var d = $.datepicker.parseDate('dd/mm/yy', dateStr);
var years = parseInt(2);
d.setFullYear(d.getFullYear() + years);
$('#To_Date').datepicker('setDate', d);
}
});
$("#To_Date").datepicker({
dateFormat: 'dd/mm/yy'
});
this is html for it.
<input id="From_Date" />
<input id="To_Date" />
sorry my question maybe is too esay but i am not understand javascript. i have a range datepicker. arrival-departure. i want to when i selected arrival auto open departure picker. here is my js code.
$('#arrival').datetimepicker({
useCurrent: false,
format: 'DD/MM/YYYY',
minDate: 'now'
});
$('#departure').datetimepicker({
useCurrent: false,
format: 'DD/MM/YYYY',
minDate: 'now'
});
$("#arrival").on("change.datetimepicker", function (e) {
$('#departure').datetimepicker('minDate', e.date);
});
$("#departure").on("change.datetimepicker", function (e) {
$('#arrival').datetimepicker('maxDate', e.date);
});
You can use the onShow() callback with setOptions() to set the min and max dates on the datetimepicker on the fly.
A few other things I noticed:
e.date is undefined so I used the .val() of the date time picker for the dates.
Also your format was off you are doubling month names and days and quadrupling years. So I set it to format 04/May/2018 format in the below example.
I also set the max date on the arrival picker (to the departure time) if the departure is set, otherwise there is now max.
$('#arrival').datetimepicker({
useCurrent: false,
format: 'd/M/Y',
onShow: function(ct) {
this.setOptions({
minDate: "now",
maxDate: $('#departure').val() ? new Date($('#departure').val()) : false
})
}
});
$('#departure').datetimepicker({
useCurrent: false,
format: 'd/M/Y',
onShow: function(ct) {
this.setOptions({
minDate: new Date($('#arrival').val())
})
}
});
$("#arrival").on("change.datetimepicker", function(e) {
$('#departure').datetimepicker("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
arrive <input id="arrival" type="text">
depart <input id="departure" type="text">
All other attributes like format ,autoclose etc are working, but maxDate/minDate is not working.
Any help would be appreciated.
I am using bootstrap-datetimepicker
$(function() {
$("#fdate").datetimepicker({
format: 'yyyy-mm-dd',
pickTime: false,
startView: 'month',
minView: 'month',
autoclose: true,
maxDate: '0'
});
});
Isn't it suppose to be a date value. And also it seems you forgot to use the option in it.
$("#datepicker").datepicker('option', {minDate: <some date>, maxDate: <some date>});
Please have a look here.
-> At first see that have you imported the correct path for bootstrap-datetimepicker
$('#date').datepicker('option', { minDate: new Date(startDate), maxDate: new Date(endDate) });
Thanks to Nargis ,Rajesh & sibeesh for your Quick replies..
I Solved the problem ..
The problem was maxDate and minDate are attributes used in some other plugin (i think jquery datatime picker) . as I am using an old Bootstrap plugin ,The valid attributes are startDate and endDate
The worked code is below
$(function() {
$( "#fdate" ).datetimepicker(
{
format: 'yyyy-mm-dd',
pickTime: false,
startView: 'month',
minView: 'month',
autoclose: true,
startDate: '-1d',//previous date
endDate: new Date()//current date
});
});
I am using simple-dtpicker javascript for 2 fields "from" and "to".
I want to validate date selection onchange of these fields like "from" < dates < "to".
$('#txt-to-date').change(function() {
$('#txt-from-date').appendDtpicker({
maxDate: $('#txt-to-date').val() // when the end time changes, update the maxDate on the start field
});
});
$('#txt-from-date').change(function() {
$('#txt-to-date').appendDtpicker({
minDate: $('#txt-from-date').val() // when the start time changes, update the minDate on the end field
});
});
$('#txt-to-date').trigger('change');
$('#txt-from-date').trigger('change');
I have tried this but its not working.
Help me for validation.
something like this?
CODE
$('input').appendDtpicker({ "futureOnly": true,todayButton : false});
$('#start_time').change(function() {
var $this = $(this);
$('#end_time').handleDtpicker('destroy');
$('#end_time').val($this.val());
$('#end_time').appendDtpicker({
todayButton : false,
minDate: $this.val()
});
});
$('#start_time').trigger('change');
As per my requirement validation is below
$('input').appendDtpicker({ "futureOnly": false,todayButton : true});
$('#txt-to-date').change(function() {
$('#txt-from-date').handleDtpicker('destroy');
$('#txt-from-date').appendDtpicker({
maxDate: $('#txt-to-date').val()
});
});
$('#txt-from-date').change(function() {
var $this = $(this);
$('#txt-to-date').handleDtpicker('destroy');
$('#txt-to-date').val($this.val());
$('#txt-to-date').appendDtpicker({
todayButton : false,
minDate: $this.val(),
maxDate: curdate
});
});
$('#txt-from-date').trigger('change');
How can I get data of a datapicker in jQuery ui?
I've the next code but only get default value. (I use only years)
$('#datePickerTempe').datepicker( {
changeMonth: false,
changeYear: false,
dateFormat: 'MM yy',
//To hide months:
stepMonths: 12,
monthNames: ["","","","","","","","","","","",""],
//Range
minDate: '-4y', //'M'-> month | 'w'-> week | 'd'-> day
maxDate: '0y',
buttonImageOnly: true
});
$('#datePickerTempe').on('click', function(){
console.log('año: '+$('#datePickerTempe').val()); });
Get current date from datepicker (or null if nothing selected):
var selectedDate = $('#datePickerTempe').datepicker("getDate");
You can also add onSelect handler to datepicker:
$('#datePickerTempe').datepicker( {
onSelect: function (dateText, inst) {
console.log(dateText);
}
});
Refer to datepicker getDate method and datepicker onSelect option
<input type="text" id="date" name="date" value=""/>
<script>
var date_fields = $('#date');
date_fields.datepicker({
format: 'mm/dd/yyyy'
}).on('changeDate', function(ev){
date_fields.datepicker('hide');
date_fields.blur();
});
</script>
The added scripts http://www.eyecon.ro/bootstrap-datepicker/
$("#datepicker").change(function() {
alert($(this).val());
});
Works perfectly fine here.