I wanted to ask, how can i manipulate data in Javascript, to have data like this in datetime input:
From 2015.10.12
Not as default:
2015.10.12.
Here is my code, You will see format option for date formatting, but this is wrong idea:
$('#datetimepicker1').datetimepicker({
locale: 'en',
format: 'FROM' + 'YYYY-MM-DD',
});
I am building form with 2 inputs, From and To, and when user selects some date, i wanted to show him not just date, but also this info.
Thank You for help.
This code will allow for custom text.
format: '[AB] YYYY-MM-DD'.Needed to add brackets [].
Related
I'm using Jquery's datepicker with Jinja. I'm going to be passing dates from the Python side to the HTML & JS side to use with the datepicker, but there may not always be a date, so in the case that a date doesn't exist, can I have the datepicker default to the current date? Or not default to date at all?
$('#datepicker2').datepicker({
format: 'mm-dd-yyyy',
autoclose: true,
minDate: 0,
}).datepicker('setDate', 'now')
For example here is a datepicker I'm using. It defaults to the current date, but I want to be able to pass in a date to it to set the date, and if that date is None/Null, then I want it to default to 'now'. Is there some sort of conditional I can tie to it? Any help is appreciated! Thanks!
I've to use the bootstrap datetimepicker for a legacy project.
With "LT" format, I've an issue, even if I set a default date, it returns the current date. (today).
check it on
codepen
$(function () {
$('#datetimepicker3').datetimepicker( {
defaultDate: moment("15/05/1992","DD/MM/YYYY"),
format: 'LT'
});
$('#datetimepicker3').on('dp.change',function(){
console.log('-');
console.log($('#datetimepicker3').data('DateTimePicker').date());
console.log($('#datetimepicker3').data('DateTimePicker').date().format('DD/MM/YYYY HH:mm'));
console.log('-');
});
});
I need to receive the date I set by default in datetimepicker.
Thanks.
I think the problem is exactly because you are using 'LT'. LT is a format of TIME-ONLY, so the information about the date is lost. That way, when it transform the "only time" information to a date or moment object, it uses the current date.
The defaultDate is to set the initial date/time for the component and not to define the date that will be used when dealing with time-only information.
My suggestion: take the value from the component (as you did), extract the time and then set the desired date for that time.
I hope it helps.
I've a field and applying datepicker on it using jQuery.
it is currently getting time from system/browser.
I want it to get time from specific time zone e.g America/new_york.
The endDate param is the key to set the calendar, means user should not be able to select the date from future. Currently it is looking like this
The code snippet is :
jQuery('#convo_start_date').datepicker({
format: 'dd M yyyy',
endDate: '+0d',
autoclose: true,
showButtonPanel: true,
todayBtn: 'linked'
}).on('change', function () {
jQuery('.datepicker').hide();
jQuery('#convo_end_date').attr('value',jQuery('#convo_start_date').val());
});
Question: Is there any way to set the default specific timezone like America/new_york to do not allow the date from future (according to this specific timezone)?
Note: I've tried moment.js but it is conflicting with my current work in jQuery, Is there any params datepicker library providesvto set with timezone?
If you are using jquery ui datepicker plugin, you can set the maxDate option to current date so that user can't select date from future.
You will need to do the conversion to the specific timezone. You can change the targetTimeOffset variable as per your requirement.
var d = new Date();
var targetTimeOffset = -4*60; //desired time zone, taken as GMT-4
d.setMinutes(d.getMinutes() + d.getTimezoneOffset() + targetTimeOffset );
Check Fiddle: http://jsfiddle.net/mpsingh2003/8w8v9/3387/ if this is what you are looking for
You can use Joda-Time library to get your solution.
Check the classes they provide like org.joda.time.DateTimeZone.
You can get the DateTimeZone depending on the Canonical ID defined in the Joda Time.
Please check this link for API documentation.
Hope this will helpful for you. Thanks.
I'm using a 0:dd/MM/yyyy as format and textTemplate for the DatePicker object
$('#datePickerSelector')`.shieldDatePicker({
format: "{0:dd/MM/yyyy}",
textTemplate: "{0:dd/MM/yyyy}"
});
When the user select the date from the selector in the proper way the format is correct when I retrieve the value using:
$('#datePickerSelector').val();
But whenever the user manually type in the date in the text box (for example 1/5/2015, the value retrieved using the same sentence above is (05/01/2015).
How can I fix this?
You need to use the parseFormats option of the datepicker. It contains an array which contains list of date formats used to parse the value set with value() method or by direct typed user input. In your case you need to add dd/MM/yyyy in the array:
$('#datePickerSelector').shieldDatePicker({
format: "{0:dd/MM/yyyy}",
textTemplate: "{0:dd/MM/yyyy}",
parseFormats: ["dd/MM/yyyy"]
});
I'm using jquery-ui datepicker on a User DOB field in a Rails 3.2 app.
I'm trying to achieve the following:
restrict the range of dates that can be selected, max = today, min = 100 years ago.
initialize the datepicker with the date currently stored in the database (if any).
display the selected date in a particular format in the dob text field.
My form looks like this:
<%= form_for #user do |f| %>
<%= f.text_field :dob, :class=>'date-selector-dob', :value => (#user.dob.blank? ? '' : #user.dob.to_s(:long)) %>
<% end %>
where .to_s(:long) is the display format I'm after.
With the following javascript the datepicker works, the text field is properly formatted, but no max/ min date is set, and no initialization with the stored date occurs.
$(function (){ // enabledate picker
$('.date-selector-dob').datepicker();
});
I added to this functions that I though would set min/max range and initialize, as follows:
$(function (){ // enable date picker
$('.date-selector-dob').datepicker({minDate: new Date('-100Y'), maxDate: new Date('-1D')}); // enable datepicker and set range
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value'))); // initialize datepicker with stored value
});
This is initializing the date picker correctly, but is not setting a min/max range. Is my approach incorrect?
In addition, the extended function resets my formatting string, and data is not displayed according to .to_s(:long). Using the basic function above, this formatting string is properly applied. What would cause this?
I'm pulling my hair out with this! I'd really appreciate it if someone can help me see whatever is it I've missed, and understand what I'm doing wrong. Thanks!
JavaScript's Date doesn't know what -100Y or -1D mean so your minDate and maxDate settings aren't going to be anything that the datepicker will understand.
From the fine manual:
minDate
Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
So you want this:
$('.date-selector-dob').datepicker({
minDate: '-100y',
maxDate: '-1d'
});
Demo: http://jsfiddle.net/ambiguous/RQgCW/
If you want the datepicker to use a certain format for the date, use the dateFormat option:
The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.
Also, you should be able to skip this:
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value')))
and just set the <input>'s value attribute to the date (preferably in ISO 8601 format), then the datepicker should be able to take it from there on its own.
At the time of initialize datepicker object we need to pass all our conditions as a hash. In your example you datepicker initialized for second time, that's the problem for not getting date range.
$(function (){
$('.date-selector-dob').datepicker({
dateFormat: 'M dd, yyyy',
minDate: '-1y',
maxDate: '+1m',
});
});
You can set the date by following way, for this you need to specify correct date format(already specified in initializer param as 'dateFormat')
$('#popupDatepicker').val("Feb 13, 2012");