jQuery Datepicker won't change value of input - javascript

I use the datepicker function from jquery. Now I have integrated a inline calendar. It should be possible to click on one day in the shown month and then submit a form or change the url. I need the new date added to the url so i can jump to this date.
But my code won't change the value of the input - and i don't know why.
Here my code:
In the head area:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.de.js"></script>
The HTML:
<form method="get" action="index.php">
<div class="form-group">
<div class="minicalendar"></div>
<input class="form-control" type="text" name="submitDate" id="submitDate" />
</div>
</form>
The JS:
$('.minicalendar').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Do you know why? I was searching for a time now but I wasn't able to find a solution that works ...
Thanks.

You are binding the datepicker to adiv instead of aninput.
<input id="datepicker" />
$('#datepicker').datepicker({
//...
});
You also don't need to change the input text with the onSelect event. The widget will do thix automatically.

$('#submitDate').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Use this. Datepicker won't bind to a <div> it has to be an <input> element. Check this link for more examples.

Here is the code from JQuery UI DatePicker :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
The input id has to be the same that the element selected in JQuery.

Related

Pick date in jquery calendar with cypress

I have the following code snippet of jquery calendar plugin used in my app and the cypress code snipped to select the date 1990-10-11.
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd"
});
});
<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>
<p>Date: <input type="text" id="datepicker"></p>
cy.get("#datepicker").click();
cy.get(".ui-datepicker-month").select("10");
cy.get(".ui-datepicker-year").select("1990");
cy.get("table.ui-datepicker-calendar").then(() => {
cy.contains('11').click();
});
With the code I can change the year and month but cannot select the day.
How can I set the date to 1990-10-11 via cypress.
Try like below to click on date 11.
cy.get("a.ui-state-default:contains(11)").click();
#Karan's answer looks good, but I would be more specific in the select (since ui-state-default looks a little too generic).
cy.get('[data-handler="selectDay"] a:contains("11")').click()

minDate() and maxDate() property of jquery datepicker plugin not working

I have tried so many means I've seen on how to use the minDate() and maxDate() property of jquery datepicker plugin to restrict a user from picking a range of date values but none ever worked. Even the sample code that was working on the jQuery UI plugin official page on how to do it, I tried it but it didn't work. Please need assistance on how to achieve this if there is another plugin to link before it works or...
$(document).ready(function () {
$("#enrolldateprim").datepicker({
minDate: new Date(2009, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd'
});
})
I will appreciate any help. Thanks a lot. Wisdom
Check example below:
$(document).ready(function () {
$("#enrolldateprim").datepicker({
minDate: new Date(2017, 5-1 , 5), // months count starts from 0
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
showOn: "both"
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<input id="enrolldateprim">
You can find library sources in a code snippet.
You can download the dependencies from: http://jqueryui.com/download/
And JQuery itself from: https://jquery.com/download/
Just go to the first link and scroll down until you see download button. Select your preferred theme and press download. Unzip the zip file and look (within my code) at the links (href) and the scripts (src) to see what to include to make it work.
Of course you don't need to include the styling (CSS) but it comes with the zip file if you wish to use it.
The Code:
<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="jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.css">
<script src="jquery-3.1.1.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$( function() {
$("#datepicker").datepicker(
{
minDate: new Date(2009, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
showOn: "both"
});
} );
</script>
</head>
<body>
<h3>My DateTimePicker</h3>
<p>Pick date:
<input type="text" id="datepicker">
</p>
</body>
</html>
PS:
$(function() {
// Handler for .ready() called. (This is shorter)
});
Does the same as:
$( document ).ready(function() {
// Handler for .ready() called. (This is longer)
});
If you are using the jquery-ui datepicker widget, then take a look at the code below.
By the way, buttonText should be used in conjunction with the showOn option set to "button" or "both", so I add the showOn option.
$(function(){
$( "#datepicker" ).datepicker({
minDate: new Date(2016, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat : 'yy-mm-dd',
showOn: "both"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>

Load date to input field after selecting from Bootstrap datetimepicker

What I am trying to do is, after selecting a date on Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({inline: true});
});
I need to use it for all inputs, or in other words, closest input field.
You called so many unwanted libraries. Just try this bootstrap datepicker. Hope this work for you.
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
demo
Here is solution you want: jsfiddle
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
See reference here
Further more, I noticed that you want use moment.js
You can use something like this, using custom format:
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});
You need to apply class 'datetimepickerinline' on your input field.
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
Try this fiddle : - https://jsfiddle.net/ekm0on2a/11/
you need to add datepicker class in your input field.
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div id="container">
<div class="my-example">
<input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
<div class="dropdown">
<div class="datetimepickerinline">
</div>
</div>
</div>
</div>
//script
$(function () {
$('#datepicker').datetimepicker({inline: true});
});

Set minDate for Bootstrap DateTimePicker from another

Currently, I'm using Bootstrap 3 Datepicker from this source
I have 2 datetimepicker on my system. (startTime, endTime).
I tried but don't know how to set minDate for endTime from startTime value whenever startTime value changed. Even it don't jump on change event.
Please point me what am I missing.
Here is my code
Many thanks.
You need to use the change event and minDate() function like
$('#txtStartTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true,
maxDate: moment()
}).on('dp.change', function(e) {
$('#txtEndTime').data("DateTimePicker").minDate(e.date)
});
$('#txtEndTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">.</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtStartTime" type='text' />
</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtEndTime" type='text' />
</div>

Language translation in jquery date picker

How can I include both language translation and changeMonth and changeYear options together in jquery date picker. For that I used the below code
For Language translation
$(this).datepicker($.datepicker.regional['fr']);
For ChangeYear
$( this ).datepicker({
changeMonth: true,
changeYear: true
});
I want to run these two in a single datepicker box.Please help
Looking at the source the regional is an object with options so this should work:
$(this).datepicker($.extend({}, $.datepicker.regional['fr'], {
changeMonth: true,
changeYear: true
}));
Here's a simple way (see this JFiddle: http://jsfiddle.net/Kp8Nq/).
You can change the localization option instead of creating a new datepicker:
$(function () {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("#datepicker").datepicker("option",
$.datepicker.regional["fr"]);
$("#locale").change(function () {
$("#datepicker").datepicker("option",
$.datepicker.regional[$(this).val()]);
});
});
I personally would let the user decide, if you have a multi-national website:
See: http://jqueryui.com/datepicker/#localization
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Localize calendar</title>
<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>
<script src="jquery.ui.datepicker-ar.js"></script>
<script src="jquery.ui.datepicker-fr.js"></script>
<script src="jquery.ui.datepicker-he.js"></script>
<script src="jquery.ui.datepicker-zh-TW.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" />
<select id="locale">
<option value="ar">Arabic (‫(العربية</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value="">English</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="he">Hebrew (‫(עברית</option>
</select></p>
</body>
</html>

Categories