I use daterangepicker 2.1.17.
When i use 24-hours format, it changes only the time picker in the selection pop-up menu but in the input field it is still not in AM/PM format (the only difference is AM/PM is not visible)
my html:
<input class="date-ranger-label" id="drp" name="daterange-filter-date-f"/>
js :
$(drp).daterangepicker({
locale : {
format : 'YYYY-MM-DD hh:mm',
"separator" : " > "
},
"singleDatePicker" : true,
"showDropdowns" : true,
"showWeekNumbers" : true,
"timePicker" : true,
"drops": "up",
"timePicker24Hour" : true,
"autoApply" : true,
}, function (a, b, c) {
cbFunction(a, b, c);
});
For example, if i select 14.25 and click on okay, i see 02.25 in the input field. How can that be translated to 24-hours format?
I can't believe it was so simple and tricky.
locale : {
format : 'YYYY-MM-DD HH/MM'
}
So, just hours and date string in upper case.
By the way, i'm wondering why such a thing is not contained in documentation or tutorials.
locale.format = 'YYYY-MM-DD HH:mm'.
Daterangepickerjs used momentjs, refer to [http://momentjs.com/docs/#/parsing/string-format/]
Related
I am using Bootstrap DatePicker v1.8.0
Need to select range in a single bootstrap and I need the input value to be arranged in ascending order (example below).
On changing the date, the date array is appended with the new date. Get the dates and parse it in changeDate event listener and set it again.
$('#date').datepicker({
format: "M yyyy",
startView: 1,
minViewMode: 1,
maxViewMode: 2,
multidate: true,
multidateSeparator: "-",
autoClose:true,
}).on("changeDate",function(event){
var dates = event.dates, elem=$('#date');
if(elem.data("selecteddates")==dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime()-new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates',dates);
});
function getDates()
{
console.log($("#date").datepicker("getDates"));
console.log($("#date").datepicker("getUTCDates"));
console.log($("#date").data('datepicker').getFormattedDate('yyyy/mm'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" id="date"><button onclick="getDates()">Get Dates</button>
To get the dates,
$("#date").datepicker("getDates") - Returns an array of selected start and end dates in local time.
$("#date").datepicker("getUTCDates") - Returns an array of selected start and end dates in UTC time.
$("#date").data('datepicker').getFormattedDate('yyyy/mm') - Returns the concatenation of start and end dates as strings formatted to the given format and joined by the multidateSeparator.
I using jquery datepickers in my project and need to have local language on it.
I need to pass language from back end via gon.locale(rails stuff)
So here is my ts code
const search_legs_1_datepicker = $("#search_legs_1_datepicker");
var leg_1_datepicker = $("#search_legs_1_datepicker").datepicker({
language: gon.locale,
classes: 'inline-picker',
altField: '#search_legs_1_date',
defaultDate: new Date(search_legs_1_datepicker.attr("data-defaultDate")),
minDate: new Date(search_legs_1_datepicker.attr('data-mindate')),
maxDate: new Date(search_legs_1_datepicker.attr('data-maxdate')),
altFormat: 'yy-mm-dd',
onSelect: (formattedDate, date, inst) => {
if ($("#search_legs_1_hotel_date").length > 0) {
$('#search_legs_0_hotel_date').datepicker().data('datepicker').update('maxDate', date);
$('#search_legs_1_hotel_date').datepicker().data('datepicker').update('maxDate', date);
$('#search_legs_1_hotel_date').datepicker().data('datepicker').datepicker("setDate", date);
}
}
})
I checked gon.locale with console and get sv-SE so it's pass language.
Also I try to do it like this
language:"sv-SE"
It not works too.
But for some reasons I have en at my datepickers.
Where is my problem?
Check that you have the language file.
Datepicker provides support for localizing its content to cater for
different languages and date formats. Each localization is contained
within its own file with the language code appended to the name, e.g.,
jquery.ui.datepicker-fr.js for French. The desired localization file
should be included after the main datepicker code. Each localization
file adds its options to the set of available localizations and
automatically applies them as defaults for all instances.
http://api.jqueryui.com/datepicker/
Localization files can be found there : https://github.com/jquery/jquery-ui/tree/master/ui/i18n
You need to include language file and then set the default language as "sv".
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
Date Picker on input field: <input type="text" id="search_legs_1_datepicker" name="date1"/>
const search_legs_1_datepicker = $("#search_legs_1_datepicker");
var leg_1_datepicker = $("#search_legs_1_datepicker").datepicker({
//language: gon.locale,
classes: 'inline-picker',
altField: '#search_legs_1_date',
defaultDate: new Date(search_legs_1_datepicker.attr("data-defaultDate")),
minDate: new Date(search_legs_1_datepicker.attr('data-mindate')),
maxDate: new Date(search_legs_1_datepicker.attr('data-maxdate')),
altFormat: 'yy-mm-dd',
onSelect: (formattedDate, date, inst) => {
if ($("#search_legs_1_hotel_date").length > 0) {
$('#search_legs_0_hotel_date').datepicker().data('datepicker').update('maxDate', date);
$('#search_legs_1_hotel_date').datepicker().data('datepicker').update('maxDate', date);
$('#search_legs_1_hotel_date').datepicker().data('datepicker').datepicker("setDate", date);
}
}
})
$.datepicker.setDefaults($.datepicker.regional['sv']);
This file supports all languages - "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"
If you want to include specific file then get the specific langauge file from here https://github.com/jquery/jquery-ui/tree/master/ui/i18n.
I have a datepicker from which I want to extract the date and display in a label. Currently the date is getting displayed in the format MM/DD/YYYY but I want it in the format MMM dd, yyyy (Nov 17, 2017). Below is the code :
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
date.setText(screenDate);
XML :
<HBox alignItems="Center" renderType="Bare">
<Label text="Date of Screening" width="50%"/>
<DatePicker class="sapUiLargeMarginBegin" width="50%" id="screeningDate"/>
</HBox>
In addition to Naveen's answer here's the solution with your existing code:
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
// Make date object out of screenDate
var dateObject = new Date(screenDate);
// SAPUI5 date formatter
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "MMM dd,YYYY" });
// Format the date
var dateFormatted = dateFormat.format(dateObject);
date.setText(dateFormatted);
FYI, By getting view controls and updating the property in it is not good. It will be good if you have a model.
Solution for your problem is below,
<Label text="{
path: '/date',
type: 'sap.ui.model.type.Date',
formatOptions: {
style: 'medium',
pattern: 'MMM dd, yyyy'
}}"/>
<DatePicker dateValue="{/date}"/>
And in the controller I have a JSONModel as below,
onInit : function() {
this.model = new JSONModel({
date : new Date(0)
});
this.getView().setModel(this.model);
}
I Am Using ui.bootstrap.timepicker for creating and updating data via user Interaction.
The Timepicker is working well for creating data but it's not binding to the ng-model.
Here is a sample JSON array of the data passed to the Timepicker:
{
"sort":1,
"name":"Store Timings",
"_id":"55b78a8658d3060e004fe9f2",
"delivery":[
{
"open":"10:30",
"close":"20:00",
"leadTime":"45",
"interval":"15",
"message":"Accepting delivery orders",
"_id":"55b78a8658d3060e004fe9f3",
"isOpen":true
}
],
"pickup":[
{
"open":"09:30",
"close":"20:30",
"leadTime":"30",
"interval":"15",
"message":"Accepting takeot orders",
"_id":"55b78a8658d3060e004fe9f4",
"isOpen":true
}
],
"store":[
{
"open":"9:30 AM",
"close":"10:30 PM",
"message":"We are Open!",
"_id":"55b78a8658d3060e004fe9f5",
"isOpen":true
}
],
"isOnlineOrderOpen":true
}
As per the Above code I tried to render ng-value in to the Timepicker
Here is the HTML code:
<timepicker ng-model="sunday.store[0].open" hour-step="1" minute-step="15" show-meridian="true" ></timepicker>
<timepicker ng-model="sunday.store[0].close" hour-step="1" minute-step="15" show-meridian="true" ></timepicker>
This is showing that the Timepicker as Blank (I was expecting the values):-
The Timepicker is expecting you to pass in a Date object, not a string.
From the Timepicker documentation
ng-model: The Date object that provides the time state.
I'm using MomentJS to format my date from a string to a Date object.
See the MomentJS parse documentation
You can transform your times back to a string if required using the same library.
I have problem with input Date validation on Meteor, AutoForm and Simple-schema .
If its turn on Chrome auto date picker , validation can't recognize Date format or type like is in schema (type: Date) or from input (type="date") "08/19/2014"
If its turn off Chrome date picker, and when i use bootstrap3-datepicker and with moment js set format to "2014-08-19" like they wrote, I have same Date validation problem.
What kind date format can be correct validated in schema with type: Date ?
Which date picker is best to give me correct date format and type and can you please give me an example because in meteor-autoform-example i saw same problem.
Example:
.js
schema: {
'orderDate': {
type: Date,
label: "OrderDate",
optional: true
}
.html
{{>afQuickField name="orderDate" type="date" }}
or with {{#autoForm}}
<div class="form-group {{#if afFieldIsInvalid name='orderDate'}}has-error{{/if}}">
{{> afFieldLabel name='orderDate'}}
<span class="help-block">*Requered</span>
{{> afFieldInput name='orderDate' id="OrderDate"}}
{{#if afFieldIsInvalid name='orderDate'}}
<span class="help-block">{{{afFieldMessage name='orderDate'}}}</span>
{{/if}}
</div>
or with bootstrap3-datepicker
<input type="date" id="orderPickerDate" class="form-control" />
Thank you.
The date format is a combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.
You can specify this format on data-date-format, but a better place to add format is in the schema:
some_date: {
type: Date,
autoform: {
type: "bootstrap-datepicker",
datePickerOptions: {
autoclose: true,
format: 'dd M yyyy'
}
}
},
For example, dd M yyyy give you 27 Apr 2017.
I found the documentation at http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
Just looking at the documentation for the original bootstrap-datepicker that I think aldeed's package just wraps, I think you'd want something like:
{{> afQuickField name='orderDate' type="bootstrap-datepicker" data-date-format="dd MM yyyy"}}
or
{{> afFieldInput name='orderDate' type="bootstrap-datepicker" data-date-format="dd MM yyyy"}}
Specify the date format you want with the data-date-format attribute.