Enable To Date Only after filling the From Date [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am using bootstrap datepicker and I want to know is there a way to enable To Date Only after filling the From Date.Before that it will be disable. Both javascript or jQuery solutions are welcome.
my html
<div id="div2" style="display: none">
<div class="row m-t-5">
<div class="col-md-8">From Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_from" onblur="checkDate();" name="leave_from" placeholder="dd/mm/yyyy"></div>
</div>
<div class="row m-t-5">
<div class="col-md-8">To Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_to" onblur="checkDate();" name="leave_to" placeholder="dd/mm/yyyy"></div>
</div>
</div>
<script>
my javascript code
function checkDate(){
var error;
var $validator = $("#myform").validate();
var date1 = document.getElementById('leave_from').value;
var date = date1.substring(0, 2);
var month = date1.substring(3, 5);
var year = date1.substring(6, 10);
var FROM = new Date(year, month - 1, date);
var date2 = document.getElementById('leave_to').value;
var date1 = date2.substring(0, 2);
var month1 = date2.substring(3, 5);
var year1 = date2.substring(6, 10);
var TO = new Date(year1, month1 - 1, date1);
if(FROM > TO)
{
error = {leave_to:"Invalid Date!"};
$validator.showErrors(error);
$('#leave_to').val('');
}
}

Try with,
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("changeDate", function (e) {
$('#datepicker2').prop('disabled',false);
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
Hoe this will help you!! :)

Check this version of the code. Make sure that the first date must be set before heading to the second one. If someone is setting the first date, then the second and then delete the first, the second will also be cleared and disabled again.
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("change", function (e) {
if($('#datepicker1').val() == ""){
$('#datepicker2').prop('disabled',true);
}else{
$('#datepicker2').val('');
$('#datepicker2').prop('disabled',false);
}
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>

Related

how to validate only one years of dates in jQuery datepicker

I want to validate within one years months and dates, and i created to allow only one year of dates but its not validated.
For example
Im created with in one year, Current date is 7/11/2019, i can allowed to pick date upto 7/11/2020, thats im created working fine.. but if i enter some date in manually its allowed. example: if i enter (type manually) 1/1/2022 its allowed.. i dont want to allow overthan 1 year dates.. how to validate this??
hope my question is understand..
Example Fiddle here..
FIDDLE HERE..
Example code here..
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
I have change in your code, see below answer.
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
$(document).on( ' input change', '#vochDate', function(){
$('.err').remove();
const nr_years = 1;
var maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + nr_years));
var curDate = $(this).datepicker("getDate");
if (curDate > maxDate) {
//alert("invalid date");
$('#vochDate').after('<span class="err"> Invalid Date </span>');
$(this).datepicker("setDate", new Date());
}
})
});
.err {
color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
Use change event to validate on change. Here you can have a look
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "mm/dd/yy",
maxDate: '1y',
minDate: "-10m"
});
$("#vochDate").change(function(){
if((new Date($("#vochDate").val()).getTime()-new Date().getTime())/(1000*3600*24)>365){
alert("invalid")
//
}
})
});

i am not able to bind the date-picker with ng-model

I am trying to save the value of selected date to db. But the ng-modal is not reflecting the selected date from the datepicker. Also none of the validation is working in this.
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.valid = false;
var today=new Date();
$scope.today = today.toISOString();
$scope.submit = function(){
$scope.valid = true;
}
$scope.close = function(){
$scope.valid = false;
}
addFlood =function(){
alert(JSON.stringify(addFlood));
}
});
//here is the html file for the datepicker
<!-- here is my html file -->
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Form Validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<style type="text/css">
.errortext {
color: red;
}
</style>
</head>
<body ng-controller="myController">
<div class="container-fluid">
<div class="row col-md-6 col-sm-6 col-xs-12">
<div class=" form-body">
<form role="form" name="myForm" novalidate>
<div class="form-group">
<label class="control-label "> Gate Open Date - Today:-> {{today | date:'yyyy-MM-dd'}} </label>
<div class="input-group date" date-picker>
<!-- <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="date"/>-->
<input type="text" id="date" name="gateOpenDate" class="form-control" placeholder="YYYY-MM-DD" [(ngModel)]="$parent.addFlood.gateOpenDate" min="{{today | date:'yyyy-MM-dd'}}" required autofocus date-picker-input/>
<div class="errortext" ng-show="myForm.gateOpenDate.$dirty && myForm.gateOpenDate.$invalid">
<span ng-show="myForm.gateOpenDate.$error.required">Gate Open Date is required</span>
<span ng-show="myForm.gateOpenDate.$error.date">Date Format Must Be MM-DD-YYYY</span>
<span ng-show="myForm.gateOpenDate.$error.min">Gate open Date should not be less than current date</span>
</div>
<div class="input-group-addon">
<i class="fa fa-calendar"> </i>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
ngModel :{{addFlood.gateOpenDate}}
<script src="angular.js"></script>
<script>
$(document).ready(function() {
var date_input = $('input[name="gateOpenDate"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date(),
})
})
function read() {
var value = element.find('input').val();
ngModel.$setViewValue(value);
}
</script>
</body>
</html>
ng-model $ - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.

change date format of datepicker

I'm creating a web app in angularJS with ASP.NET, here is my JavaScript of a datepicker:
$('#sandbox-container input').datepicker({
autoclose: true
});
$('#sandbox-container input').on('show', function (e) {
console.debug('show', e.date, $(this).data('stickyDate'));
if (e.date) {
$(this).data('stickyDate', e.date);
} else {
$(this).data('stickyDate', null);
}
});
$('#sandbox-container input').on('hide', function (e) {
console.debug('hide', e.date, $(this).data('stickyDate'));
var stickyDate = $(this).data('stickyDate');
if (!e.date && stickyDate) {
console.debug('restore stickyDate', stickyDate);
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
The code in ASPX is the following:
<div id="sandbox-container" class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="datefrm" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="From" date-only />
</div>
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="dateto" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="To" date-only>
</div>
</div>
</div>
The current format is MM/dd/yyyy. This is how the date is showing:
02/08/2017
I need to change the date format to:
dd-MM-yyyy
The data which I want to see is:
08-02-2017
All the help is appreciated!
Just add format option of datepicker:
format: 'dd-mm-yyyy'
Please find below snippet for more information
$('#sandbox-container input').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="sandbox-container">
<input type="text" type="text" class="form-control" />
</div>
The following code will work:
var date = "01/24/1977";
var datearray = date.split("/");
var newdate = datearray[0] + '-' + datearray[1] + '-' + datearray[2];

How to calculate two asp text box values using JavaScript and save it on database?

I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});
You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

validate Date time picker

i need to give user to select a date and a time and get that as an input here i have added the basic code i use and i need to restrict user only to add future date and a time not past dates or time!
$(function () {
var currentDate = new Date();
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
format: 'DD/MM/YYYY'
});
$('#datetimepicker2').datetimepicker({
format: 'LT'
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Select a date:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker1'>
<input name="datepicker" id="datepicker" type='text' class="form-control" min="2015-01-01" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!--Time picker-->
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px ; font-size:18px">* </a>Select a time:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker2'>
<input name="timepicker" id="timepicker" type='text' class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
my question is i need to allow user only to put future date not past ones!
Restrict the range of selectable dates with the minDate and maxDate options.
$('#datetimepicker1').datepicker({ minDate: 0});
See the official documentation here.
or you can check this example from the documentation bootstrap datetimepicker
$('.starts_on, .ends_on').datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false,
minDate: moment()
});
$('.starts_on').datetimepicker()
.on('dp.change', function(v){
var incrementDay = moment(new Date(v.date));
incrementDay.add(1, 'days');
$('.ends_on').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('.ends_on').datetimepicker()
.on('dp.change', function(v){
var decrementDay = moment(new Date(v.date));
decrementDay.subtract(1, 'days');
$('.starts_on').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
Try this
$("#datetimepicker1").datepicker({
minDate: 1,
onSelect: function(theDate) {
$("#datetimepicker1").datepicker('option', 'minDate', new Date(theDate));
},
dateFormat: 'mm/dd/yy'
});
use minDate: 1, this should allow only future date
$('#datetimepicker1').datetimepicker({
minDate:1,
format: 'DD/MM/YYYY'
});
i got issue solved by this thank you everyone for your help they were very helpful!
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
//minDate:0,
//format: 'DD/MM/YYYY'
format: "MM/DD/YYYY",minDate: new Date()
});

Categories