I have Bootstrap datepicker with default format mm/dd/yyyy, and I have select where I can change
format from mm/dd/yyyy to dd/mm/yyyy and reverse.
On select change I want to my datepicker change format.
I tried
find('#options-date_format').on('change', function(){
$("#picker").datepicker({format: formatDate})
});
but It's not working, and I can't find way of doing this.
Also tried to remove / destroy datepicker but I got javascript error.
I think the below approach is working,
1, Whenever changing the format, de-attach and then re-attach back to the element.
$("#dp3").datepicker(); // initialization
$('select').on('change', function () {
var d = $('select option:selected').text();
if (d == 2) {
$("#dp3").datepicker('remove'); //detach
$("#dp3").datepicker({ //re attach
format: "dd/mm/yyyy"
})
} else {
$("#dp3").datepicker('remove'); //detach
$("#dp3").datepicker({ //re attach
format: "mm/dd/yyyy"
})
}
});
JSFiddle
Ok I resolve this extending bootstra-datepicker.js
setFormat: function(format) {
this.format = DPGlobal.parseFormat(format);
}
And call that function
find('#options-date_format').on('change', function(){
$("#picker").datepicker('setFormat', newFormat);
});
When you have many date pickers, the you can use a class selector and reset all of them, and initialize using the class. Code sample below.
In the example, all the input elements will have the class date-picker
function resetDatePickers(){
$('.date-picker').each(function(index){
$(this).datepicker('remove');
});
$('.date-picker').datepicker({
format: "dd/mm/yyyy",
startView: 2,
orientation: "top auto"
});
}
resetDatePickers();
Related
The function card should return the card of a certain concert.
But only if the concert's date match the date selected with the datepicker's function. So if I choose the date 06/22/2018 I should see the concert card because the date is the same. But right now it doesn't work because the line:
if(document.getElementById("datepicker").value == this.date)
is picking the value of the input at the top, which is undefined, so it doesn't show anything. So I think I have first to call the function datepicker(),but I don't know how to do.
Here's the code I'm using:
<input type="text" id="datepicker"/></div>
<div id="corpo1"></div>
$(function()
{
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
buttonImage: "https://i.imgur.com/cvkNy5G.png"
});
});
function Concert(id, name, date, price)
{
this.id = id;
this.name = name;
this.date = date;
this.price = price;
this.card = function()
{
if(document.getElementById("datepicker").value == this.date)
return "<span class='concert'>"+this.name+" "+this.date+"</span>";
}
}
var concerti = [ new Concert(1,"The Fame Ball","06/22/2018",50) ];
function showcard(f)
{
var ris = "";
for(var i in concerti)
{
ris+=concerti[i].card();
}
document.getElementById('corpo1').innerHTML=ris;
}
Anyone who can help?
Try this solution: http://jsfiddle.net/6gub2smo/2/
The key change is the following:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
buttonImage: "https://i.imgur.com/cvkNy5G.png",
onSelect: showcard
});
jQuery UI recommends using the onSelect event. Documentation here.
Allows you to define your own event when the datepicker is selected.
The function receives the selected date as text and the datepicker
instance as parameters. this refers to the associated input field.
The problem I think you're having that your showcard code isn't being run, at least not at the right time. Adding the following to your Javascript should fix the issue.
$("#datepicker").change(showcard);
It will cause the showcard function to be run when the user selects a new date, when the text of the textbox is changed. The issue you might be having with "undefined" showing up if you don't select the date of the Concert is because the showcard function returns nothing (turned into "undefined") if the dates don't match. You can fix this by adding return ""; to the end of the function to force it to return an empty string and have nothing show up.
I am using bootstrap datepicker, I want to use in-built functions of datepicker.
How can I use this ?
$(document).ready(function() {
//var fromDate = $('#fromdatepicker').datepicker();
var toDate = $('#datepicker').datepicker(
).on('change', function(e) {
console.log(e);
});
// here i need current date and do some calculation and then set again.
console.log(toDate);
});
I use this https://bootstrap-datepicker.readthedocs.io/en/latest/index.html datepicker. Its works fine but I want to do some changes according to my need. I want to getCurrentDate and do some calculation and then set back again. How can I achieve this functionality using this datepicker.
Try it like this :
var toDate = $('#datepicker').datepicker(
).on('change', function(e) {
console.log(e);
});
// here i need current date and do some calculation and then set again.
toDate = $('#datepicker').datepicker('update',new Date());
console.log(toDate);
//if want to update again
toDate = $('#datepicker').datepicker('update','2016-08-16');
I have filter on the specific column in Kendo grid and i would like to modify this column like on the image below:
I tried to do by setting on the column config by this way:
// ADD DATE PICKER FOR COLUMNS CREATION TIME
if(value.filterable.cell.dataTextField == "creationTime") {
//preparedGridColumnItem.AllowFiltering = false,
preparedGridColumnItem.format = "{0:dd.MM.yyyy}";
preparedGridColumnItem.filterable = {
ui: function (element) {
element.kendoDatePicker({
format: "dd.MM.yyyy"
});
},
cell: {
operator: "eq",
showOperators: false, // HIDE FILTER MENU
template: function (arg) {
arg.element.kendoDatePicker({
format: "dd.MM.yyyy",
change: function (e){
console.log("Change :: " + kendo.toString(this.value(), 'd'));
var timestamp = moment(this.value()).unix();
console.log(timestamp);
}
});
}
}
}
}
But without luck.
I would like to have dropdown boxes not editable with predefined value to search.
How can i do it please?
I tried to find any working solution in documentation.
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
But without the luck.
Many thanks for any advice.
Edit:
Filter is looking like this:
Here you go:
filterMenuInit: function(e) {
if (e.field == "date") {
var sels = e.container.find("select");
var sel1 = $(sels[0]).data("kendoDropDownList");
var sel2 = $(sels[2]).data("kendoDropDownList");
sel1.select(3);
sel1.enable(false);
sel2.select(5);
sel2.enable(false);
}
}
Fiddle. This doc helped me.
e.container refers to the filter widget. With it you can play around freely. Note that the event is just called once, at the initialization of the filter widget, and not at each open/close.
Updated code for columnMenu:
Just change the filterMenuInit to columnMenuInit.
Fiddle.
Update 2:
I have added the following code to the columnMenuInit event:
var dates = $(e.container).find('[data-role="datepicker"]');
$(dates[0]).data("kendoDatePicker").unbind("change");
$(dates[1]).data("kendoDatePicker").unbind("change");
Fiddle. I just unbind the default change event of the datepickers, avoiding changing the dropdowns.
I'm using a custom JS library called datepicker, that you can find here.
I have it set up and working, but I need some extra functionality from it, and I have absolutely no idea how to get it done.
Here's what I have so far:
<h:panelGroup>
<h:panelGrid>
<input id="depatureDate" value="Departure date" class="datepicker dp1"></input>
<script>
$(".datepicker, dp1").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
<h:panelGrid id="returnDate">
<input value="Return date" class="datepicker dp2"></input>
<script>
$(".datepicker, dp2").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
</h:panelGroup>
What I need to do is the following:
If the first datepicker's input is clicked and a date is selected, that datepicker needs to close(it's already doing this, so that's fine) and the second datepicker needs to open, with the date that was selected in the first one marked on it. The user must then select another date on the second datepicker
If anyone has any idea how to do this, advice and pointers would be more than welcome!
Okay, i've done a small example here, working with the close event.
<input type="text" class="datepicker1" />
<br />
<input type="text" class="datepicker2" />
<script type="text/javascript">
// init second picker
var $input = $('.datepicker2').pickadate();
// init first picker
$('.datepicker1').pickadate({
// handle close event
onClose: function() {
var picker = $input.pickadate('picker');
// set unix timestamp to the second picker
// maybe theres a better solution for this...currenlty it works
picker.set('select', this.component.item.select.pick );
picker.open();
}
});
</script>
dont forget to load all pickadate libraries and jquery.....
i've defined 2 divs with classed datepicker1 and datepicker2. then i'm creating
the datepicker objects. the datepicker1 object handles the onClose event.
When the first datepicker is closed, the scripts opens the second and sets the value of datepicker1...
hope this helps
cheers
the datepicker provides an close event, maybe you can use this? Take a look at the API here
http://amsul.ca/pickadate.js/api.htm#method-on
some lines further down, you find
$('.datepicker').pickadate({
onOpen: function() {
console.log('Opened up!')
},
onClose: function() {
console.log('Closed now')
},
onRender: function() {
console.log('Just rendered anew')
},
onStart: function() {
console.log('Hello there :)')
},
onStop: function() {
console.log('See ya')
},
onSet: function(event) {
console.log('Set stuff:', event)
}
})
when entering the close event, open a new datepicker and set default value of the currently closed.
I have a jquery UI datepicker calendar in an event page(sharepoint page).
$('#datepicker').datepicker();
I need to get the date once user clicks on any date and get that date and pass it to the page url as mypage.aspx?dt=1/12/2012.I have this but not working.
$('.ui-datepicker td a').click(function(){
var url=$(location).attr('href');
var date = $(this.datepicker( "getDate" ));
if(date != 'null')
url += '&dt=' + date;
window.location.href=url;
});
Neither is this working..
$('.ui-datepicker td a').click(function() {
window.location.href = 'http://mysite/events/Pages/default.aspx?dt=' + $('#datepicker').datepicker().val();
});
can someone help?
try
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
window.location = 'http://mysite/events/Pages/default.aspx?dt=' + dateText;
}
});
uses the onSelect event (documented here)
Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.