I'm using pickmeup datePicker in my Angular project, and it works good and stable but I faced a problem. When I'm trying to set a particular date, picker breaks and/or disappears. I used the method set_date from the documentation but I think I'm missing something.
I use the following code
showDate(timestamp: number) {
const timeString = timestamp.toString();
this.pickerInstance.set_date(new Date(timeString));
}
I have a stackblitz code template here.
So the idea is, I want to have a button when I'm pressing on it, it passes timestamp value to showDate function and after that datePicker shows my date.
I don't want to use jquery here, I believe this could be done without it. But maybe I'm wrong.
Any ideas, comments, help is welcome? thank you.
The constructor of Date needs a number not a a string.
You need to call this.pickerInstance.update() after the update
public showDate(timestamp: number) {
this.pickerInstance.set_date(new Date(timestamp));
this.pickerInstance.update();
}
Related
Don't work the clear method in DatePicker when inputted invalid value.
I found mention of this bug in several articles https://github.com/vaadin/flow-components/issues/1696, but I can't find any solutions.
I thought call "onClearButtonClick" function from js in java code. This function called when click in the clear button inside DatePicker.
https://github.com/vaadin/flow-components/issues/2176 mentions two potential workarounds also there is new comment in the original ticket suggesting to call
datePicker.getElement().executeJs("this.inputElement.value = ''")
from the Java code to forcefully clear the DatePicker.
In Vaadin 14 you can execute js to set the value to null but don't forget to dispatch the change event.
document.getElementById('yourdatepicker').value = null;
document.getElementById('yourdatepicker').dispatchEvent(new Event('change'));
In Ext.picker.Date or datePicker we can set this as shown in below code.
var dateField=new Ext.form.DateField({
startDay: 1
});
But i am unable to do the same in dateMenu.Can anyone help me out with this.
did you try picker property?
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.menu.DateMenu (under property)
It works fine for me, see the fiddle.
To quote the documentation:
Notes:
Although not listed here, the constructor for this class accepts all of the configuration options of Ext.picker.Date.
After much too much googling and searching stackoverflow for my answer, I have been unsuccessful. So I am sorry if this is a duplicate.
I have a datepicker that displays only time. I wish to toggle between military and standard time on a dropdown onchange event.
My attempts have been something of this:
function militarytoggle(element)
{
timetype = $("#military").val();
if(timetype == "military")
{
$('.time').datetimepicker({
timeOnly: true,
timeFormat: 'HH:mm'
});
}
else if(timetype == "standard"){
$('.time').datetimepicker({
timeOnly: true,
timeFormat: 'hh:mm TT'
});
}
}
EDIT: The datetime method I am using (that is currently working) is rendered on document ready:
$('.time').datetimepicker({
timeOnly: true,
dateFormat: '',
timeFormat: 'hh:mm TT'
});
I only wish to change timeFormat on an event.
One would think this would work, redundancy aside. What on Earth am I doing wrong??
Thanks in advance everyone!
One of your if statements is written as
if($(timetype == "military")
the other as
else if(timetype == "standard")
First of all, the former of those has unclosed parenthesis. But also, one uses $ and the other doesn't. Only one of these can be the correct syntax (I'm thinking the later).
Similarly, you use
$('.time').datepicker
in one place and
$('.time').datetimepicker
in the other. Again, only one of these is probably the right method to use.
Edit: added from comments below:
If the datetimepicker method is a constructor, calling it again after the page has been created may not actually change the format of an existing control.
Further:
You should check the documentation (or the source code if there is no good documentation) of the datetime picker widget to see if there is a method for changing the display format of an existing control (or if the format is a public property you might be able to assign it directly). If there is not, then having two versions initialized and hiding one is probably the best way to do it, although you could also do a post back to the server, and have some server side code that uses a passed parameter to render a page with the datetimepicker set to the desired format.
I have solved this problem by adding a military and standard time field for each form. I then toggle the disabled property as well as the display CSS instead of trying to change the datetimepicker.
Then I just bind datetime picker to all fields on document ready.
function militarytoggle(element)
{
timetype = $("#military").val();
if(timetype == "military")
{
$(".standard").prop("disabled",true).css("display","none");
$(".military").prop("disabled",false).css("display","block");
}else if(timetype == "standard"){
$(".standard").prop("disabled",false).css("display","block");
$(".military").prop("disabled",true).css("display","none");
}
}
This seems hacky, if anyone else has a cleaner solution I will accept it as an answer.
I'm new to javascript and I've got this problem of showing dates.
I would like to display a readable date formatted like MM-DD-YYYY, but everytime I try to load the page, I always get an ASP format date.
Someone gave this code and I tried to use it on my project, yet, I still get the wrong format of date with this kind of error Uncaught TypeError: Cannot call method 'formatDate' of undefined.
What's wrong with this code?
$(document).ready(function () {
var date = $.datepicker.formatDate('yy-mm-dd', new Date($("#dateOfBirth").val()));
$("#dateOfBirth").val(date);
});
I'm using C# MVC.
Might give this a try (assuming you're using jQuery... If I'm way off, I apologize):
// You might not need the next two lines...
// And if not, just delete them as well as the last line
jQuery.noConflict();
jQuery(function($) {
$(document).ready(function() {
$("#dateOfBirth").datepicker();
$("#dateOfBirth").datepicker("dateFormat", "yy-mm-dd");
});
});
The question is; there are 2 fields in my application, one is date (Field1) and second is a label (Field2). So, I want that when user selects a date in field 1, then field 2 should be automatically populated (current date - date from field 1).
Can anyone help on how to implement it.
I'm using jQuery to display date:
// This displays the date dialog when user clicks on Field1
$('#Field1').click(function () {
$('#Field1').simpleDatepicker();
});
// Tried following code but it didn't worked
$('#Field1').click(function () {
$('#Field1').simpleDatepicker({
onSelect: function () {
$('#Field2').value(calculateDays($('#Field1').toString))
}
});
});
function calculateDays(dateString) {
var today = new Date();
var inputDate = new Date(dateString);
var days = today - inputDate;
return days;
};
This may look like pathetic code to some folks but I'm just a beginner, so any suggestions/comments are welcome.
Also please tell me if this can be done using html only and no need to go to jQuery. It is my understanding that the calculating days (difference between dates) code will go in jQuery since this needs to be fired after selecting date ('onSelect' event). Please correct if wrong.
I'm assuming that you're trying to use Karl Seguin's jquery.simpleDatePicker (it came top when searching for "simpledatepicker" on Google).
As Jimbo remarks in the comments, it's hard to advise on an MVC approach here — you say you want to do this purely with HTML, but HTML alone can't dictate behaviour (I'd say that's extremely un-MVC). HTML5 forms do allow some limited behavioural control (validation etc), and they also offer <input type="date"/>, but none of these help your situation.
So for this answer I'm just going to fix the mistakes in your code:
The plugin is initialised with the simpleDatePicker jQuery method — you forgot to capitalise the 'P';
The plugin itself caters for the click event. You should initialise it directly without waiting for user input;
There was no onSelect initialisation option in the source code: I chose to use a change event listener on the input to capture this;
You use the jQuery method value — that's native DOM Javascript — you should be using val instead;
toString won't work on DOM elements or jQuery objects — again, use the val method;
The native Date object can't parse dates in arbitrary formats — nor would your code produce a number of days if it did (it would just produce the difference in milliseconds). For this kind of functionality you should use a good date library: I've opted for Moment.
Resulting code (as demonstrated here):
$('#Field1')
.simpleDatePicker()
.on('change', function passValue(){
$('#Field2').val(calculateDaysFromNow($('#Field1').val()))
});
function calculateDaysFromNow(dateString){
return moment.duration(moment(dateString,'MMM DD YYYY').diff()).days();
}
A bit of elaboration on how I've used moment:
First of all, we want to parse #Field1's formatted date for an actual quantifiable date object:
moment(dateString,'MMM DD YYYY')
Next, we want to differentiate that from now. Like Date, moment assumes now if we pass no argument:
moment(dateString,'MMM DD YYYY').diff()
We don't want this as a date, but as a duration, so we'll pass it to moment's duration method:
moment.duration(moment(dateString,'MMM DD YYYY').diff())
…and finally, we want this expressed in days:
moment.duration(moment(dateString,'MMM DD YYYY').diff()).days()
I'm not sure but this:
$('#Field2').value(calculateDays($('#Field1').toString)) should be like this:
$('#Field2').value(calculateDays($('#Field1').val())) or $('#Field2').value(calculateDays($('#Field1').text()))
Here is solution for setting same date in second field.
Link:jquery: using two datepicker with two fields ( field 1 , field2 + 1 day ) like booking.com
Change the format according to your need.