I want to have a JqueryUI date picker with both its input text area and the calendar opened.
I know the two following options:
Use an input element and then the calendar is opened after the input field is clicked.
Use a div element and then there is no input field at all.
How can I get option 1, but with the calendar opened by default?
jsfiddle
$(function() {
$("#inputDatepicker").datepicker();
$("#divDatepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<p>Date with input:
<input type="text" id="inputDatepicker">
</p>
<p>Date with div:
<div id="divDatepicker">
</p>
I can't show you with a fiddle (somehow, this feature does not work) but try to set the focus to the input-field.
Like this
$(document).ready(function() {
$(function() {
$("#inputDatepicker").datepicker();
$("#inputDatepicker").focus();
});
});
Cheers
R
You can use the altField to do it
$(function() {
$("#divDatepicker").datepicker({
altField: '#inputDatepicker'
});
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<input type="text" id="inputDatepicker">
<div id="divDatepicker"></div>
Using altField and onchange event:
http://jsfiddle.net/sexaw2po/
function inputDatepickerChanged(val) {
$("#divDatepicker").datepicker("setDate", new Date(val));
}
Related
I'm trying to use Timepicker of materializecss. I need to use the onSelect event but nothing happens.
This is the html :
<input type="text" name="time" class="timepicker">
This is the javascript :
$(document).ready(function(){
$('.timepicker').timepicker({
onSelect:function(hour,minute){
alert(hour+" "+minute);
}
});
});
The timepicker is working very well but when I select time and hour, nothing happens. No error in console and no alert shown...
I tried with the onCloseEnd event but nothing happens too.
I need help !
Seems the documentation is wrong. I checked the materialize.js and found that timepicker didn't bind any event such as onOpenStart, onSelect and onCloseEnd but datepicker did.
This snippet shows that the same event but only binding to datepicker.
$('.timepicker').timepicker({
onSelect: function(time) {
console.log(time)
}
});
$('.datepicker').datepicker({
onSelect: function(time){
console.log(time)
}
});
.timepicker-modal,
.datepicker-modal{
top: -5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>
<input type="text" name="time" class="timepicker">
<input type="text" class="datepicker">
Here's a demo, showing that none of the events mentioned in the documentation are triggered (They even didn't be registered cause there is no event options in timepicker.)
timepicker
datepicker
$('.timepicker').timepicker({
onOpenStart: function(){
console.log('onOpenStart')
},
onOpenEnd: function(){
console.log('onOpenEnd')
},
onCloseStart: function(){
console.log('onCloseStart')
},
onCloseEnd: function(){
console.log('onCloseEnd')
},
onSelect: function(){
console.log('onSelect')
},
});
$('.timepicker').on('change', function() {
console.log('change: ' + this.value)
})
.timepicker-modal{
top: -5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>
<input type="text" name="time" class="timepicker">
The only way success is using change() event.
I try this time picker with on change and doesn't work too
because the input value is equal ''.
I want a JQuery datepicker to show when I click on a specific label. I have a HTML like this:
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />
And some following JQueries like these:
$( function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
} );
$("#kezd_datum_label").click(function() {
$("#kezd_datum").datepicker("show");
});
And
$(document).ready(function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
$("#kezd_datum_label").click(function() {
$("#kezd_datum").focus();
});
});
I tried to copy the codes from here jQuery datepicker on click of icon, and it was accepted and everyone says it works, but it does not for some reason. However, if I make input visible, the datepicker appears as it should. Just not if I click on that label.
If a put in a window.alert("something"); into any of the click functions, they also run and appear.
Try to replace display: none to opacity: 0;width: 0 to show the input and use for to point to your input.
$(document).ready(function() {
$("#kezd_datum").datepicker();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<label for="kezd_datum" id="kezd_datum_label">Data</label><input style="opacity: 0; width: 0" id="kezd_datum" />
Well, I just want to clarify why your previous code was not working and how to make it work.
You're doing $("#kezd_datum").focus(); while you div is hidden. So you can't focus on a hidden element. And showing datapicker for that element again. As a result you got nothing.
You just need to show it first and then show the datapicker and this would work
Cheers!
$(document).ready(function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
});
$( function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
} );
$("#kezd_datum_label").click(function() {
$("#kezd_datum").show().focus();
setTimeout(()=>{
$("#kezd_datum").datepicker("show");
},20)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />
I want to change to year picker calendar only in a dynamic input fields.The calender should show only year values Can any one help me please.
Here is the javascript code.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
You can try this one. And see if it will help your problem.
HTML:
<select name="yearpicker" id="yearpicker"></select>
JS:
var startYear = 1800;
for (i = new Date().getFullYear(); i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
Here is a jsfiddle link
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker({
minViewMode: 2,
format: 'yyyy'
});
}
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" />
I assume it is bootstrap datepicker (Link)
I would not use a datepicker if you want to select a year only. Use a select for that. However, you can modifiy the datepicker (since you didn't mention which one you are using I assume jQuery UI) to only return the year.
Have a look at this fiddle:
$(function() {
$(".datepicker").datepicker({ dateFormat: 'yy' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<input type="text" class="datepicker"/>
I am using multiDatesPicker for calendar which works fine with default calendar options.
In my case I am appending an extra span tag to calendar dates so after appending the span tag, it is not selecting the dates on click.
here is how I am appending the span tag
$(function() {
$('#custom-date-format').multiDatesPicker({
dateFormat: "y-m-d"
});
$('.ui-state-default').prepend($('<span>A</span> <span>B</span>'));
});
Demo
You have element <a class="ui-state-default">NUMBER</a> where datepicker script gets the value of this tag, i.e. NUMBER. When you add span elements into a tag, the content becomes invalid number, that's why date selection doesn't work on click. As solution you can play with css for example:
.ui-state-default::before {
content: 'A B ';
}
You could avoid using prepend($('<span>A</span> <span>B</span>')). Another thing, why are you using <span> when you can pick multidates without using it.
$(function() {
$('#custom-date-format').multiDatesPicker({
dateFormat: "y-m-d"
});
$('.ui-state-default');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="page">
<div id="demos">
<ul id="demos-list">
<li class="demo">
<div id="custom-date-format" class="box"></div>
</li>
</ul>
</div>
</div>
i try to use selet2 jquery library (https://select2.github.io/) to get a Multiple select boxes but that is not working
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#js-example-basic-multiple").select2();
});
</script>
<g:select class="js-example-basic-multiple" id="js-example-basic-multiple" name="tags" from="${tags}" optionValue="name" optionKey="id" multiple="true"/>
i don't know if i have to download something ?
thx