We Keep Coding

past dates are not hiding in date picker?

Hello Everyone I'm beginner in Jquery and javascript.In my project I have to use bootstrap.I have tried to execute datepicker to hide past datesDate picker is working even though past dates are not hiding..I have attached the below the code..
<!--html:-->
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="FromDate" class="control-label">FromDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="fromDate" id="fromDate" class="form-control pull-right" data-validation-engine="validate[required]" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="ToDate">ToDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon"> <i class="fa fa-calendar"></i>
</div>
<input type="text" name="toDate" id="toDate" class="form-control pull-right" data-validation-engine="validate[required]"
onchange="report();" />
</div>
</div>
</div>
<!--script:-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
// Date picker
$('#fromDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#toDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#fromDate').datepicker({ minDate: new Date() });
$('#toDate').datepicker({ minDate: new Date() });
/*]]>*/
</script>
Thanks!!

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
Try the above piece of code

I replicated your code and it is working fine.
Can be more clear on the versions and packages you use.
For Datepicker which package you use. I used jquery ui
For bootstrap you have used v3 (which is not a consideration here), but the latest version is 4
http://jsfiddle.net/0oL2yh6r/1/
jQuery(document).ready(function(){
$( "#fromDate" ).datepicker({
minDate: new Date(),
autoclose : true,
todayHighlight : true,
format : 'dd-M-yyyy'
});
});

How to do something when date is selected from date picker

I am using this date picker http://bootstrap-datepicker.readthedocs.io/en/latest/events.html#hide.
The code is written as,
<div class="form-group" id="purchasedatediv">
<label class="col-sm-3 control-label">Purchase Date *</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" value="<?php if($result != '') echo date('m/d/Y', $result->purchasedate->sec); ?>"
name="purchasedate" id="purchasedate" class="form-control required">
</div>
</div>
</div>
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
});
I am trying to find the event when the date is selected and do something on that event but in this document, I am not able to find that. Please help!

Please Try
$('#datepicker').datepicker().on("change", function(e) {
console.log("Date changed: ", e.target.value);
});

Since you are using bootstrap plugin for datepicker, you can check reference manual for it.
Trigger to changeDate event event like
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}).on('changeDate', function(e) {
//Print e variable
console.log('date changed', e);
//Do your stuff here, read date, parse it, whatever.
});
Date is stored in callback parameter e.date.

$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}). on(picker_event, function(e){
//do your stuf
}) ;
this code will hold everything you need

Try to below code
<input type="text" value=""
name="purchasedate" id="purchasedate" class="form-control required" onChange="functionname(this)">
JS Code
function functionname(e){
your logic
}
Click Here to show demo in jsFiddle

$('#purchasedate').off('change').on('change', function(){
// enter code here
})

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];

Set Current Date as Selected in Bootstrap datepicker

I am using bootstrap-datepicker in my code. How Do I select current date in JavaScript and show it as selected?
After research this is code I am using but current day does not appear as selected:
var today = moment();
datepicker1.datepicker({
endDate: today.toDate()
});
datepicker2.datepicker({
startDate: today .toDate(),
endDate: today.toDate()
});
datepicker1.datepicker('setDate', today.toDate());
datepicker2.datepicker('setDate', today.toDate());
datepicker1.datepicker('update'); //update the bootstrap datepicker
datepicker2.datepicker('update');

Im using bootstrap datepicker. below code worked for me:
$('#my-datepicker').datepicker('setDate', 'now');

No idea about the code you are using and without HTML markup doesn't make much sense,
Here is a working example of what you are after
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker1,#datepicker2').datepicker('setDate', today);
});
<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>

The problem in selecting currentdate when using minDate : moment().
The solution is to use below code for assigning datetimepicker:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});

This works for me
$("#order_date").datepicker( {
autoclose: true,
});
var orderDate = '2021-03-05';
$('#order_date').datepicker('update', new Date(Date.parse(orderDate)));
Reference

$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker1,#datepicker2').datepicker('setDate', today);
});
<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>

With this you can highlight current date!
$('#datetimepicker6').datetimepicker({
todayHighlight:true
})

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()
});