$('input[name="event_startdate"]').datepicker({
format: 'yyyy-mm-dd'
startDate: new Date()
});
The above is my code. It displays the error: "Uncaught SyntaxError: Unexpected identifier"
you forgot comma(,) between format: 'yyyy-mm-dd' and startDate: new Date()
Or
Try This
For css Class -
$('.datepicker').datepicker({ format: 'yyyy-mm-dd', startDate: new Date() });
here .daterpicker is a class name appiled on input control
For ID -
$('#datepicker').datepicker({ format: 'yyyy-mm-dd', startDate: new Date() });
here #daterpicker is a class name appiled on input control
You can try like this.
$('input[name="event_startdate"]').datepicker({ format: 'yyyy-mm-dd', minDate:"0" });
in html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<input type="text" name="event_startdate">
</body>
</html>
here is plunker : https://plnkr.co/edit/nSbc4nJqU2VgvNZzrhMt?p=preview
Related
I am trying to add this DateTime Picker to my application, I am not sure why. I already have the needed library to make it work.. Here are my libraries below:
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap library -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
And here is the code of the dateTime picker
<label for="dateTime">Date and Time</label>
<input type="text" name="datetime" id="datetime" class="form-control" readonly>
<script type="text/javascript">
$(function () {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes();
var dateTime = date+' '+time;
$("#datetime").datetimepicker({
format: 'yyyy-mm-dd hh:ii',
autoclose: true,
todayBtn: true,
startDate: dateTime
});
});
</script>
Include the necessary scripts and styles:
<head>
<!-- ... -->
<script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>
I am using the following library:
https://github.com/fragaria/angular-daterangepicker
These are the script tags I am Using:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css"/>
I cant find the following file:
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
Following is my initialization code:
$scope.datePicker = {startDate: moment().subtract(6, 'days'), endDate: moment()};
$scope.dateRangeOptions = {
applyClass: 'btn-green',
locale: {
applyLabel: "Apply",
fromLabel: "From",
format: "YYYY-MM-DD", //will give you 2017-01-06
toLabel: "To",
cancelLabel: 'Cancel'
}
}
HTML:
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker" options="dateRangeOptions"/>
The CSS is not working and the UI is all broken.
i'm using jquery date rangepicker. while i select date from daterange picker i don't want to close the calendar. so i use this code. but it's not working. can any one help. please. here is my code
<div class="form">
<input id="d" class="form__daterange">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="src/jquery-ui.js"></script>
<script src="src/jquery.daterange.js"></script>
<script>
$(function () {
$("#d").daterange({
numberOfMonths: 12,
minView: 2,
autoclose: false,
});
});
</script>
you need autoClose: false
<script>
$(function () {
$("#d").daterange({
numberOfMonths: 12,
minView: 2,
autoClose: false,
});
});
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
or modify yours like
<script>
$(function () {
$("#d").datepicker({
});
});
</script>
I want to disable days before tomorrow and set tomorrow as the default but I cant.my code shows today as the default and disabled days before today.
view:
<input id="date_modified" type="text" class="form-control" value="">
jquery:
$('#date_modified').persianDatepicker({
observer: true,
format: 'YYYY/MM/DD',
maxDate: new Date(),
})
.pDatepicker('setDate');
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
//Following line of code is to set the default and minDate of datepicker.
$( "#datepicker" ).datepicker({minDate: tomorrow,defaultDate:tomorrow});
//Following line of code is to set value of default date on text box.
$("#datepicker").val($.datepicker.formatDate('mm/dd/yy', tomorrow));
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I need to add time in a daterangepicker using jQuery and JavaScript. I am explaining my code below.
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="" onfocus="removeBorder('stdate')">
$('input[name="startgroupdate"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
Here only the date is coming from the calendar, but I need to add also the time, so the result should be like "03/04/2017 12 10 PM".
Check this out..You need to add time property and daterangepicker js
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="">
<script>
$(function() {
$('input[name="startgroupdate"]').daterangepicker({
timePicker: true,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
singleDatePicker: true,
showDropdowns: true,
drops: "down",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
});
</script>
</body>
</html>
Yo have to add property
timePicker: true
may this links helps
http://www.daterangepicker.com/#ex2
You need to add the timepicker flag to daterangepicker.
$('input[name="startgroupdate"]').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
singleDatePicker: true,
showDropdowns: true
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});