Comparing two custom format dates jquery - javascript

I have tried to validate my dates if start date is less than end date it should alert but it only work with in same month, but when i compare dates of one month date to another month date it keeps stops me select less date even it is already.
here is what i have done so far,
$('#datepicker2').change(function () {
var startDate = new Date($('#datepicker').val());
var endDate = new Date($('#datepicker2').val());
if (startDate < endDate){
alert("selected date is above pickup date, ");
}
});
here is my html
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
</div>
<div class="col-md-6">
<input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row ct-date-row">
<div class="col-md-6">
<input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
</div>
<div class="col-md-6">
<input class="" autocomplete="off" id="datetimepicker5" required name="dropTime" placeholder="Drop Time">
</div>
</div>
</div>
my date format is d/m/y if this is making issue then how could i possibly define formate within new date and compare them. Thanks
I want when same date it hides previous time on time drop down of jquery.
$('#datetimepicker5').timepicker({
timeFormat: 'HH:mm',
});
$('#datetimepicker4').timepicker({
timeFormat: 'HH:mm',
});
format of my time i am not being to get time which is selected,
jQuery('document').ready(function(){
jQuery('#datetimepicker5').on('change paste keyup', function() {
var x = jQuery("#datetimepicker5").val();
alert(x);
});
});

So, you are using jQuery Ui DatePicker, there is native way to get date with getDate, here you go:
For compare your dates if equal or same you need to use Date.parse() , you need to do this:
if (Date.parse(startDate) === Date.parse(endDate))
$(function() {
$("#datepicker").datepicker({
dateFormat: "d/m/y"
});
$("#datepicker2").datepicker({
dateFormat: "d/m/y"
});
$('#datetimepicker5').timepicker({
timeFormat: 'HH:mm',
});
$('#datetimepicker4').timepicker({
timeFormat: 'HH:mm',
});
});
$('#datepicker2').on('paste keyup change', function() {
var startDate = $('#datepicker').datepicker("getDate");
var endDate = $('#datepicker2').datepicker("getDate");
if (startDate > endDate) {
alert("selected date is above pickup date, ");
} else if (Date.parse(startDate) === Date.parse(endDate)) {
alert("same");
var dt = new Date();
var phours = dt.getHours() + 3;
var time = phours + ":" + "00";
alert(time);
jQuery('#datetimepicker5').timepicker({
minTime: time
});
jQuery('#datetimepicker4').timepicker({
minTime: time
});
$('#datetimepicker4').val(time)
$('#datetimepicker5').val(time)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.jonthornton.com/jquery-timepicker/jquery.timepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" integrity="sha256-zV9aQFg2u+n7xs0FTQEhY0zGHSFlwgIu7pivQiwJ38E=" crossorigin="anonymous" />
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
</div>
<div class="col-md-6">
<input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row ct-date-row">
<div class="col-md-6">
<input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
</div>
<div class="col-md-6">
<input class="" autocomplete="off" id="datetimepicker5" required name="dropTime" placeholder="Drop Time">
</div>
</div>
</div>

You can convert your both dates to seconds and then compare it. then it will work like charm:
i.e.
var date1 = new Date("2015-08-25T15:35:58.000Z");
var seconds1 = date1.getTime() / 1000; //1440516958

Use Date.parse()
The Date.parse() method parses a string representation of a date and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC
$('#datepicker2').change(function () {
var startDate = new Date($('#datepicker').val());
var endDate = new Date($('#datepicker2').val());
if (Date.parse(startDate) < Date.parse(endDate)){
alert("selected date is above pickup date, ");
}
});

Related

Boostrap datepicker stuck after setStartDate when click on decade or century

i have issue with boostrap datepicker after setting a start date allowed to pick which is when start date allowed is in 07-11-2021, but if a goes to decade view i can't go back to year 2021 or 2022, when i saw in decade years 2020 that supose to show it back years in allowed that decade is being disabled.
It is because the setStartDate is at 2021, so in decade view mode the 2020 is being disabled and can't show allowed year in that decade.
Here the example
let d = new Date('08/11/2021');
$('.datepicker').datepicker({
todayBtn: "linked",
clearBtn: true,
format: 'd MM yyyy'
}).datepicker('setStartDate', d);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="input" class="form-control-label">Date</label>
<div class="input-group">
<input class="form-control datepicker" placeholder="d M yyyy" type="text" name="waktu_bayar" id="input" data-date-end-date="0d">
<div class="input-group-append">
<span class="input-group-text"><i
class="ni ni-calendar-grid-58 px-1"></i></span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
For serval hour i'm tyring to digs these bug, look for other people question and so on, and the i'm get an epiphany that i should do something when the datepicker table being show, and the rest add some javascript in that show event.
First we can create a function that can return a value abaut what decade or century from a date, than do some DOM to enableing some decade or a some century.
Even through this is bit messy hire and there but i got the result what i want.
Here The code
let d = new Date('08/11/2021');
// extended function for datepicker
const dateRanges = (date = new Date(), rule = 10, sum = 0) => Math.floor(date.getFullYear() / rule) * rule + sum;
$('.datepicker').datepicker({
todayBtn: "linked",
clearBtn: true,
language: 'id',
format: 'd MM yyyy'
}).change(function(e) {
// submitControl(e.target);
}).on('show', function(e) {
let allowedPicker = [],
untilPicker = undefined,
year = undefined;
if (e.viewMode == 3) {
// Start From This(d) Decade
allowedPicker = [dateRanges(d)];
// Until This(default dateRanges) Decade
untilPicker = dateRanges();
year = 10;
} else if (e.viewMode == 4) {
// daterange second params set to 100 a century
// Start From This(d) Century
allowedPicker = [dateRanges(d, 100)];
// Until This(now) Century
untilPicker = dateRanges(new Date(), 100);
year = 100;
}
if (allowedPicker.length > 0) {
if (allowedPicker.find(element => element == untilPicker) == undefined) {
allowedPicker.push(untilPicker)
}
if (allowedPicker.length > 1 && allowedPicker[1] - allowedPicker[0] > year) {
let loop = 1;
do {
if (allowedPicker.find(element => element == (loop * year)) == undefined) {
allowedPicker.push(allowedPicker[loop - 1] + year);
}
loop++;
} while ((allowedPicker[1] - allowedPicker[0]) / year > loop);
allowedPicker.sort();
}
allowedPicker.forEach(pickElement => {
$('.datepicker.datepicker-dropdown table tbody td>span.disabled:contains(' + pickElement + ')').removeClass('disabled');
});
}
}).datepicker('setStartDate', d);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<div class="form-group">
<label for="input" class="form-control-label">Date</label>
<div class="input-group">
<input class="form-control datepicker" placeholder="d M yyyy" type="text" name="waktu_bayar" id="input" data-date-end-date="0d">
<div class="input-group-append">
<span class="input-group-text"><i
class="ni ni-calendar-grid-58 px-1"></i></span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

compare date entered in textbox with javascript

asp.net Code:
<div class="form-group">
<label class="control-label col-md-5">Received Date</label>
<div class="col-md-7">
<div class="input-group date date-picker" id="recvdate" data-date-format="dd-mm-yyyy" runat="server">
<asp:TextBox ID="txtRecvdDate" CssClass="form-control tooltips" data-original-title="dd-mm-yyyy" data-placement="top" runat="server"></asp:TextBox>
<span class="input-group-btn">
<button class="btn default dtp-btn " id="Button2" type="button" runat="server"><i class="icon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5">Expiry Date</label>
<div class="col-md-7">
<div class="input-group date date-picker" id="expdate" data-date-format="dd-mm-yyyy" runat="server">
<asp:TextBox ID="txtExpiryDate" CssClass="form-control tooltips" onkeyup="validation();" data-original-title="dd-mm-yyyy" data-placement="top" runat="server"></asp:TextBox>
<span class="input-group-btn" id="expiryDatePicker">
<button class="btn default dtp-btn " id="Button1" type="button" runat="server"><i class="icon-calendar"></i></button>
</span>
<asp:Label ID="lblreasonMessagedvTabNavigationAction" Font-Bold="true" runat="server"></asp:Label>
</div>
</div>
</div>
Javascript
function validation() {
var startDate = $("[id*=txtRecvdDate]").val();
var endDate = $("[id*=txtExpiryDate]").val();
var newDate = new Date(startDate);
var newToDate = new Date(endDate);
if (newDate != '' && newToDate !='') {
if (newDate < newToDate)
{
alert("check");
}
}
return false;
}
I am unable the compare the expiry date with received date textbox. In which expiry date should be greater than received date
You have date as dd-mm-yyyy format from textbox(startdate). so when you use it in conversion like new Date(dd-mm-yyyy). It will throw invaliddate. So before converting change its format to yyyy-mm-dd by using below code. because new Date accept datestring in yyyy-mm-dd format.
function validation() {
var startDate = $("[id*=txtRecvdDate]").val();
var newdatestring = startDate.split("-").reverse().join("-");
var newDate= new Date(newdatestring);
var endDate = $("[id*=txtExpiryDate]").val();
var newToDatestring = endDate.split("-").reverse().join("-");
var newToDate= new Date(newToDatestring);
if (newDate != '' && newToDate !='') {
if (newDate < newToDate)
{
alert("check");
}
}
return false;
}
Note: If you are using / instead of - then replace - with / in the above code

Change attribute min of input type=date in javascript

I have two input fields of type date.
<input id="startdate" type="date" min='#DateTime.Now.AddDays(1).ToShortDateString()' onchange="handler(event)" />
<input id="enddate" type="date" min="#DateTime.Now.AddDays(2).ToShortDateString()" onchange="handler(event)" />
I want in enddate min date be alaways two days ahead towards selected date in start date. So far I use script adding days and selecting attribute min.
<script type="text/javascript">
function handler(e) {
var someDate = new Date($("#startdate").val());
document.getElementById("enddate").setAttribute('min', addDays($("#startdate").val(),2));
}
</script>
<script type="text/javascript">
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
</script>
This proposition is not working. Any ideas?
using moment.js
<input id="startdate" type="date" min='' />
<input id="enddate" type="date" min="" />
<!-- import moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
(function(){
$('#startdate').attr('min', moment().format('YYYY-MM-DD'))
$('#startdate').on('change', function(e){
var startDate = $(this).val();
var endDate = moment(startDate).add(2, 'days').format('YYYY-MM-DD');
$('#enddate').attr('min', endDate);
})
})()
</script>

Datetimepicker bootstrap not working proberly in asp.net website

I could use some eyes to check what i have done wrong with this code. I have tried to follow an example where i have made to input boxes for check-in and check-out.
It look like this:
Check-in
Input box (datetimepicker1)
Check-out
Input box (datetimepicker2)
I'm trying to make it so when you pick a date in datepicker1, you can pick an earlier date with the datetimepicker2 form. You have to pick a day at least 1 day ahead.
My asp code:
<div class="form-group">
<div class="input-append date form_datetime">
<asp:Label ID="Label1" runat="server" Text="Check-in Date:"></asp:Label>
<input type="text" class="form-control" id="datetimepicker1" />
</div>
</div>
<div class="form-group">
<div class="input-append date form_datetime">
<asp:Label ID="Label2" runat="server" Text="Check-out Date:"></asp:Label>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
Javascript:
<script type="text/javascript">
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#datetimepicker1').datepicker({
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#datetimepicker2')[0].focus();
}).data('datepicker');
var checkout = $('#datetimepicker2').datepicker({
onRender: function (date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
</script>
I'm sure that i got the right js files in, because it have worked with some other code before, but it was not that smart, because i don't want any icons, it should only be a text box, and when u click on it, the datetimepicker should open it self.
Hope someone can see what is wrong with this.

bootstrap linked datetime picker not working properly

hi i am trying to develop bootstrap jquery for linked datetime pickers but is not working correctly am using jsfiddle http://jsfiddle.net/srknthcse/CujDK/311/ i have selected No-library ...any help will be appreciated .thank you
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div id="startdatetime-from" class="input-append date">
<input type="text" id="datetimepicker-input" readonly ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
<div class='col-md-5'>
<div class="form-group">
<div id="startdatetime-from1" class="input-append date1">
<input type="text" id="datetimepicker-input1" readonly ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
var hours= d.getHours();
var minutes=d.getMinutes();
$(function() {
$('#startdatetime-from').datetimepicker({
language: 'en',
showMeridian:'true',
autoclose:'true',
format: 'hh:mm PP dd-MM-yyyy '
});
$("#startdatetime-from").data('datetimepicker').setLocalDate(new Date(year, month, day, hours, minutes));
var d1=new Date();
var d2=new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
$('#startdatetime-from1').datetimepicker({
language: 'en',
showMeridian:'true',
autoclose:'true',
format: 'hh:mm dd-MM-yyyy '
});
$("#startdatetime-from1").data('datetimepicker').setLocalDate(new Date(year, month, day, hours, minutes));
$("#startdatetime-from").on("dp.change", function (e) {
$('#startdatetime-from1').data("DateTimePicker").minDate(e.date);
});
$("#startdatetime-from1").on("dp.change", function (e) {
$('#startdatetime-from').data("DateTimePicker").maxDate(e.date);
});
});
<div class="container">
<div class='col-md-10'>
<div class="form-group">
<div id="startdatetime-from" class="input-append date">
<input type="text" id="datetimepicker-input" readonly></input>
</div>
<div></div>
<div class='col-md-10'>
<div class="form-group">
<div id="startdatetime-from1" class="input-append date1">
<input type="text" id="datetimepicker-input1" readonly></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
var hours = d.getHours();
var minutes = d.getMinutes();
$(function () {
$('#startdatetime-from').datetimepicker({
language: 'en',
autoclose: 'true',
format: 'HH:mm PP dd-MM-yyyy '
});
$("#startdatetime-from").data('datetimepicker').setLocalDate(new Date(year, month, day, hours, minutes));
$('#startdatetime-from1').datetimepicker({
language: 'en',
autoclose: 'true',
format: 'HH:mm PP dd-MM-yyyy '
});
$("#startdatetime-from1").data('datetimepicker').setLocalDate(new Date(year, month, day, hours+4, minutes));
});

Categories

Resources