I'm trying to assign default value to Gijgo Datepicker but it submit the form each time I click on it, means that I cannot change the value.
var today, datepicker;
today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
datepicker = $('#datepicker').datepicker({
header: true,
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd',
minDate: '2020-01-01',
value: '2020-02-01', //add this and it broke
showRightIcon: true,
iconsLibrary: 'fontawesome',
maxDate: today,
change: function (e) { $('form').submit();}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<form action="" method="get" autocomplete="off">
<input id="datepicker" class="" width="276" name="date" />
</form>
It worked but when I don't assign the value, what I need is to show a current month so user don't have to choose the month again. Anything I tried just broke the input.
Thanks in advance.
It's your change: function (e) { $('form').submit()}; doing this - seems it's submitting the form as soon as you change the input: see below code for solution.
EDIT: Op is asking for a way to listen to submit the form when the user clicks a specific date.
You can do this by leveraging bootstrap datepicker events
$('.datepicker').datepicker()
.on('changeDate', function(e) {
// `e` here contains the extra attributes
if(e.date === yourDate)
$('form').submit()
});
var today, datepicker;
today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
datepicker = $('#datepicker').datepicker({
header: true,
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd',
minDate: '2020-01-01',
showRightIcon: true,
iconsLibrary: 'fontawesome',
maxDate: today
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<form action="" method="get" autocomplete="off">
<input value="2020-02-01" id="datepicker" class="" width="276" name="date" />
</form>
Related
Is there a way to hide (mm-dd) or disable (YYYY-mm-0000) the year input from the field? I tried this, but it shows the actual date. If so I need to show 0000
var year = new Date().getFullYear();
document.getElementById('date').setAttribute("min", year + "-01-01");
document.getElementById('date').setAttribute("max", year + "-12-31");
<input type="date" id="date" />
After searching for an hours,I found jquery datepicker can do the trick.
var date = new Date();
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "dd-M",
changeMonth: true,
minDate: new Date(date.getFullYear(), 0,1),
maxDate: new Date(date.getFullYear(), 12,31)
});
});
.ui-datepicker-year
{
display:none;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" id="datepicker">
you can use https://jqueryui.com/datepicker/ to find out more about jquery datepicker
When an existing entry for a process phase has a time like 13:53, opening the datetimepicker sets the time automatically to 13:00, so I could by accident change the time without realizing, just by opening the datetimepicker
Without open datetimepicker
With open datetimepicker
problem with datetimepicker
function createDateTimePicker(id, timePicker, lang) {
var displayTimepicker = (timePicker == true ||timePicker == 'true') ;
var dateTimePicker = $(id).datetimepicker({
showTimepicker : displayTimepicker,
controlType: 'select',
oneLine: true,
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm',
stepMinute: 5,
showOn: 'both',
buttonImage: '/assets/images/calendar.png',
buttonImageOnly: true
});
return dateTimePicker;
}
Is there a way or solution to have the same time as the textfield or the closest time within 5 minutes of the text field time in the datetimepicker?
$(function() {
$('#basic_example_1').datetimepicker();
});
var setDateTime = function() {
$('#basic_example_1').datetimepicker('setDate', (new Date()));
}
var clearDateTime = function() {
$('#basic_example_1').val('');
}
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
</head>
<body>
<p>Add a simple datetimepicker to jQuery UI's datepicker</p>
<div style="display:inline">
<input type="text" name="basic_example_1" id="basic_example_1" value="" />
<button onclick="clearDateTime()">clear</button>
<button onclick="setDateTime()">now</button>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
</body>
</html>
I have used jQuery datetimepicker plugin, hope it helps you!!!
First date picker
<div class="input-group date " data-provide="datepicker">
<input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
</div>
Second datepicker
<div class="input-group date" data-provide="datepicker">
<input type="text" name="date2" class="form-control datepicker2" placeholder="Select delivery date">
</div>
There are two date pickers. The value of the second date picker is based on the first one. If the user chooses today's date on first date picker then the date picker 2 will only allow choosing date starting from tomorrow.
$(document).ready(function(){
$('.datepicker1').datepicker( {
format: 'dd-mm-yyyy',
startDate:'+0d',
autoclose: true,
onSelect: function(date){
var date1 = $('.datepicker1').datepicker('getDate');
var date = new Date( Date.parse( date1 ) );
date.setDate( date.getDate() + 1 );
var newDate = date.toDateString();
newDate = new Date( Date.parse( newDate ) );
$('.datepicker2').datepicker("option","minDate",newDate);
}
});
$('.datepicker2').datepicker( {
format: 'dd-mm-yyyy',
autoclose: true,
minDate:0,
});
});
if the user chooses 10-04-2019 in the first date picker then the user should only able to choose from 11-04-2019 in the second date picker.
this is the requirement
Just set minDate option for the second datepicker input, so that user can't select that date or set date backwards.
Check my updated snippet of your code below:
$(document).ready(function(){
// Init first datepicker
$('.datepicker1').datepicker( {
format: 'dd-mm-yyyy',
startDate:'+0d',
autoclose: true,
onSelect: function(date){
// Select next day
var nextDay = new Date(date);
nextDay.setDate(nextDay.getDate() + 1);
$(".datepicker2").datepicker("option","minDate", nextDay);
}
});
// Init second datepicker
$('.datepicker2').datepicker( {
format: 'dd-mm-yyyy',
startDate:'+0d',
autoclose: true,
onSelect: function(date){
//validate date here
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicke</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>
</head>
<body>
first date picker
<div class="input-group date " data-provide="datepicker">
<input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
</div>
second datepicker
<div class="input-group date" data-provide="datepicker">
<input type="text" name="date2" class="form-control datepicker2" placeholder="Select delivery date">
</div>
</body>
</html>
My date picker is working but I want to add birthday text in the input box. please help
Here is my code:
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
<div class="inputField half">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="material-icons">date_range</i>
</span>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
If I understand what do you need, You could simply do something like this(just change the value of input):
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
}).datepicker('update', new Date());
$('#datepicker input').val('birthday: ' + $('#datepicker input').val());
});
then wrap updating input value in some update-callback if you need etc.
https://jsfiddle.net/re9zpu2g/
I have the following code in my view:
<input type="text" class="form-control" id="date-from" name="date-from" value="" placeholder="Van" data-class="datepicker" />
I would like to retrieve the value of this field via AJAX for filtering.
The default format for input is mm/dd/yyyy (which i can't change either...)
So I tried getting the results in the format yyyy-mm-dd as i want them.
The following are my lines in javascript, they all return the exact input (mm/dd/yyyy)
alert($('#date-from').datepicker({ format: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ format: 'yyyy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yyyy-mm-dd' }).val());
Here is an example of a datepicker that outputs in yyyy-mm-dd Does that help?
$(function() {
$('#datepicker').datepicker({
onSelect: function(date) {
alert(date);
},
dateFormat: 'yyyy-mm-dd',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="datepicker"></div>
Yo can use alt-format http://api.jqueryui.com/datepicker/#option-altFormat
. And then in your ajax call you can read value form hidden field that have date value in your desired format.
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#altdate',
altFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Field : <input id="datepicker" type="text" /><br />
Alt Hidden Field : <input id="altdate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />
Or you can use manually do that by splitting string on the basis of "-" and the reverse it
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
});
$("#datepicker").change(function () {
var currentDate = $("#datepicker").val();
console.log("Desired format : ",currentDate.split("-").reverse().join('-'));
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" type="text">