Can anyone please help me with the date time picker and explain why it is not working?
http://jsfiddle.net/IrvinDominin/6FGgA/
$(function () {
$('input').datetimepicker(
{
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
Instead of datetimepicker you need to use datepicker:
$(function () {
$('input').datepicker(
{
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
Updated fiddle # http://jsfiddle.net/theoutlander/6FGgA/66/
EDIT: In case I misunderstood and you meant to use datetimepicker defined in the included library there, it seems that the site you've referenced doesn't allow cross-site requests for the scripts. I copied the contents of those scripts into the fiddle here (http://jsfiddle.net/theoutlander/6FGgA/69/) and you can now use your original code.
What is your need.datepicker or datetimepicker
if you want datepicker try this:
$(function () {
$('input').datepicker(
{
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
if you want datetimepicker check this link:
http://runnable.com/UgCgGBRfEwILAAEt/how-to-create-date-time-picker-using-jquery-ui
Related
This is the code I have but it's not working:
$(document).ready(function () {
$(function () {
$('#QuoteDate').datepicker({ dateFormat: 'yy-mm-dd' });
});
}
QuoteDate is id of datepicker.
if you are using bootstrap Datepicker then use following code.
$("#QuoteDate").datepicker({
format: 'dd-mm-yyyy',
});
The main page is an .aspx file. I'm trying to generate a popup. When user clicks the Send Email, a javascript on the page calls the openEmailPopup function, shown below.
function openEmailPopup(taskId, popupElementName, gridElementName) {
$("#" + popupElementName).dialog({
width: 1300,
height: 500,
draggable: false,
resizable: false,
modal: true,
open: function () {
$.get("/Resources/Sendmail", function (data) {
$('#masterPvlEmailGrid').html(data);
});
//more code here...
}
});
}
The problem is that the SendEmail.cshtml file depends on some javascript file.
<script language="javascript" src="../../Scripts/file1.js"></script>
<script language="javascript" src="../../Scripts/file2.js"></script>
<script language="javascript" src="../../Scripts/file3.js"></script>
<script language="javascript">
var sendEmailViewModel = new SendEmailViewModel();
var seUploadFilesViewModel = new UploadFilesViewModel();
$(function () {
sendEmailViewModel.Init();
});
</script>
When the response of the ajax call is returned, those above javascript don't execute. There are two solutions for that. Either I add javascript reference on the .aspx page. However, to do that, I also need to add a content placeholder element in the master page. The big problem with that is the actual aspx file has a master page that is nested 2 times deep in other master pages.
Many people relies on those master pages, I want to make sure that there are solutions to that before I touch them.
What about loading and executing those javascript file dynamically? I've done some researches but, I still don't understand how it work with jquery.
Any idea?
EDIT
This is how I'm calling those file.
$.getScript("/Scripts/file1.js", function () {
});
$.getScript("/Scripts/file2.js", function () {
});
$.getScript("/Scripts/file3.js", function () {
});
When I check google tools, I see that all the file being loaded.
You could use jQuery's getScript method, which allows you to load javascript over HTTP and then execute it:
http://api.jquery.com/jquery.getscript/
You might want to look at an AMD like RequireJS (http://requirejs.org/). RequireJS is designed to load JavaScript resources as needed, so you would not need to load them in the main page. In your example, all three files could be returned asynchronously for your popup form.
I am not sure if this will solve your problem because I cannot test it right now. Could you try this out?
function openEmailPopup(taskId, popupElementName, gridElementName) {
$("#" + popupElementName).dialog({
width: 1300,
height: 500,
draggable: false,
resizable: false,
modal: true,
open: function() {
var deferreds = [];
//Store a deferred into the array
function addDeferred(url) {
deferreds.push(
$.getScript(url)
.done(function() {
console.log("Module loaded: " + url);
})
.fail(function(ex) {
console.error(ex);
})
);
};
//Call the scripts
addDeferred("/Scripts/file1.js");
addDeferred("/Scripts/file2.js");
addDeferred("/Scripts/file3.js");
//When all the scripts has been loaded....
$.when.apply($, deferreds)
.done(function() {
$.get("/Resources/Sendmail", function(data) {
$('#masterPvlEmailGrid').html(data);
});
})
.fail(function(ex) {
console.log(ex);
});
//more code here...
}
});
}
I have an application with all the drop down boxes customized by select2 plugin, obviously like this:
$("select").select2();
However, the select element on a jquery datepicker is not customized. And I couldn't figure out where to initialize this in the jquery datepicker function. The following is what I want to achive. I want a function that can replace init that can get the datepicker dom element.
$(".datepickerInput").datepicker({
init : function(datepickerElement) {
datepickerElement.find("select").select2();
}
});
I appreciate your help. Thanks.
The issue you are facing is that Datepicker doesn't have a "after show" callback function. That is, there is no available method/option that can run code after the datepicker has been showned.
There is some discussion and some possible answers in jQuery Datepicker "After Update" Event or equivalent
So, for now, you can make that work by extending Datepicker, like this:
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function() {
// Code from the related question. Used the answer from #Markus
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
// Now that we have `afterShow`, we can initialize Select2.
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
afterShow: function() {
$(".ui-datepicker select").select2();
}
});
});
</script>
Can any one tell me how I could update a selection in a date picker to a full calendar ie When user selects date from DatePicker then FullCalendar loads events for given date.
Take a look at this : Issue 167: Mini Calender to control Main Calender.
Or make the combination with following example :
$(document).ready(function() {
$("#fullcalendar").fullCalendar({
// .....
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#fullcalendar').fullCalendar('gotoDate', d);
}
});
}
<div id="fullcalendar"></div>
<div id="datepicker"></div>
The "gotoDate (method)" would help you select a date programatically in fullcalendar. So let the user select a date using jquery date picker and register a onchange event on the text input that captures the date. When the onchange fires, use gotoDate to set the date in fullcalendar. Refer - http://arshaw.com/fullcalendar/docs/current_date
This might help anyone coming to this answer to add a gotoDate datepicker to fullcalendar as a custom button
customButtons: {
gotoDate: {
text: 'Go to date',
click: function () {
$(this).datepicker({
autoclose: true
});
$(this).datepicker().on('changeDate', function (e) {
$('#fullcalendar').fullCalendar('gotoDate', e.date);
});
$(this).datepicker('show');
}
},
},
footer: {
'center': 'gotoDate'
},
My jQuery datepicker only closes when picking a date, but I want it to close when the user clicks away from or on the close button. However, even with the showButtonPanel option set to true, the close button does not appear but the 'Today' button does.
I think it may have something to with having a custom onSelect action instead of the default but can't figure out how to close it myself. Tried using $.datepicker('hide') and ('destroy') but no difference.
$(document).ready(function() {
$.datepicker.setDefaults({firstDay: 1, dateFormat: 'dd/mm/yy', showAnim: 'fade'});
});
$(document).delegate('.editEndDate', 'click', function() {
$('.formattedEndDate').datepicker({
defaultDate: $('.formattedEndDate').attr('id'),
onSelect: function(dateText, inst) {
var date = dateText;
var data = 'project=' + projectId + '&date=' + date + '&dateToChange=end';
$.ajax({
type: 'POST',
url: 'helpers/change-project-date.php',
data: data + '&ajax=1',
success: function(response){
getNotification(response);
$('.formattedEndDate').fadeOut(function() {
$(this).load(location.href+ ' .formattedEndDate', function() {
$(this).fadeIn('slow');
});
});
},
error: function(response){
getNotification(response);
},
complete: function(response){
$('.formattedEndDate').datepicker('hide');
}
});
}
});
return false;
});
It may be something simple but I just can't see it. Thanks in advance.
I may have found a solution to my own problem...
$('.ui-datepicker').live('mouseleave', function() {
$('.ui-datepicker').fadeOut(function() {
$('.formattedStartDate').attr('class', 'formattedStartDate');
$(this).remove();
});
});
This works for me, hopefully it'll work for others too.
Everything blew up when I tried to use live. So I had to use on. I also added in input focus hide. So if you happen to focus on a different field the calendar isn't just hanging around. I also just did hide, but you should be able to switch it for fade if that is what you are wanting.
$('.bootstrap-datetimepicker-widget').on('mouseleave', function () {
$(this).hide();
})
$('input').on('focus', function () {
$('.bootstrap-datetimepicker-widget').hide();
});