Angular6 project.
I am using this https://ng-bootstrap.github.io/#/components/timepicker/examples
The output of ngb-timepicker using NgbTimeStruct which is formatted like so
{hour: 13, minute: 30};
How do I display this as 01:30 PM? I was looking at Pipe Date from angular, but this requires use Javascript Date object... but I do not need Date just the time.
This is my code
html
<ngb-timepicker [formControl]="startCtrl" [meridian]="meridian" [minuteStep]="minuteStep"></ngb-timepicker>
<button class="btn btn-success" (click)="update()">Update Time</button>
<div>{{ startTime }}</div>
component
startCtrl = new FormControl();
update(){
this.starter = this.startCtrl.value;
}
I don't need the date just the time
They have updated their documentation You can find it here.
https://valor-software.com/ngx-bootstrap/#/timepicker#api-reference
Its simple you just have to use the new Date object given by angular and you will be up and running.
Related
I'm looking for a way to translate the placeholder for a date picker in the input as soon as the user changes the language.
For example, the default (EN) format is dd/mm/yyyy, but if the user changes the language to french, this should be changed to jj/mm/aaaa. Currently I'm using the momentJS library but unfortunately, this doesn't support date translation, only the correct local format.
Is there a library/other way suitable for this?
Thank you
Using the default <input type="date">, the browser UI element is rendered. This is not something that you can directly control. You can add a helper for the browser to display a specific lang, eg <input type="date" lang="en-GB">, as this is a global attribute. That being said, the browsers will implement this differently, and I believe that as it currently stands, most browsers ignore this attribute and instead use the locale currently set by on the browser eg, Intl.DateTimeFormat().resolvedOptions().locale.
Eg:
<label for="datepicker">Select Date:</label>
<input type="date" id="datepicker" lang="fr-CA">
For me (using Chrome), this stays as my current locale (en-GB).
What can I do?
You cannot override your browser locale my javascript, it must be set through the browser config (eg, chrome://settings/languages) or through browser launch settings.
The easiest way to do this effectively would be to use a non browser UI date picker, eg, something like jQuery datepicker:
$(function() {
$("#datepicker").attr('placeholder', $.datepicker.regional["fr"].dateFormat)
$("#datepicker").datepicker($.datepicker.regional["fr"]);
$("#locale").on("change", function() {
const locale = $.datepicker.regional[$(this).val()]
$("#datepicker").attr('placeholder', locale.dateFormat)
$("#datepicker").datepicker("option", locale);
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-ar.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-fr.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-he.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-zh-TW.js"></script>
<p>Date: <input type="text" id="datepicker">
<select id="locale">
<option value="ar">Arabic ((العربية</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value>English</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="he">Hebrew ((עברית</option>
</select>
</p>
But even this is not perfect. I'm sure that are a lot better date pickers out there.
I'm having the exact same problem as you (see How do I get the localized date format for a given locale?).
I have yet to find a library that features date placeholder mappings as part of their locale data. As of now, I need to maintain a mapping for the languages I support in my application.
const datePlaceholderLocaleData = {
fr: { year: 'a', month: 'm', day: 'j' },
en: { year: 'y', month: 'm', day: 'd' }
}
I'll keep you informed if I find a better solution.
Try this Javascript snippet I left the part of language code change but I am pretty sure it will help however you set the langCode. I tried several langCode all of them worked.
const langcodes = ["es", "ca", "en" ,"nl", "fr", "de"];
Use this Array and map over if to generate langCode for testing purposes.
const myDate = new Date();
const langCode = document.documentElement.lang || navigator.language;
console.log(langCode)
const formatter = new Intl.DateTimeFormat(langCode);
console.log(formatter.format(myDate))
The toLocaleDateString() method returns a string with a language-sensitive representation of the date portion of the specified date in the user agent's timezone.
I'm trying to achieve a countdown timer, where the value it counts down from is populated from a Advanced Custom Field date time picker. Ideally I'd like to use http://countdownjs.org/ , or similar to power the timer.
I can simply output the time date value on the page template by calling the ACF field like so.
<p>Event starts: <?php the_field('featured_event_date','options'); ?></p>
However, in order to use a JS/jQuery countdown I need to be able to use to value from ACF inside JS, not PHP? Does this sound correct as a methodology so far? Something like the example below.
var countdown = new Countdown({
selector: '#timer',
msgBefore: 'Will start at Christmas!',
msgAfter: 'Happy new year folks!',
msgPattern:
'{days} days, {hours} hours and {minutes} minutes before new year!',
dateStart: new Date('2013/12/25 12:00'),
dateEnd: new Date('Jan 1, 2014 12:00'),
onStart: function() {
console.log('Merry Christmas!')
},
onEnd: function() {
console.log('Happy New Year!')
}
})
It's pushing my knowledge out of the comfort zone, so advice, experience or examples or this would be much appreciated and help me on my way. Thanks in advance!
I am using a bootstrap datepicker in my site. And I want to get start date and end date from a calendar view.
For example :
As shown in above figure I want to get start date (25/09/2016) and end date (05/11/2016). And similarly for next month. For this I a am trying below code :
function available ()
{
....
}
jQuery('#date_field').datepicker({ autoclose: true,beforeShowMonth: available });
But it is not working.
How to to that?
I have created an event post type in Wordpress. For that I have put starting date and ending date from ACF datepicker.
I want admin can select Ending date greater than Starting Date.
Is there any way for restricting Starting Date and Ending Date?
For example, if Admin choose 1st Jan 2016 as starting date, then he can only select the ending date 1st Jan or greater then the selected date.
I think we can do it with java script and use this code to set the limit of the end date :
$( ".selector" ).datepicker({
minDate: new Date( )
});
I think there is no possibilities for date restriction in acf in admin area.
I may be done in acf's newer version.
You can request from here...
http://support.advancedcustomfields.com/forums/forum/feature-requests/
I had similar problem with regular date fields, Hope this JS code (with the moment JS library) with some adjustments will help you.
$(document).ready(function() {
$("input[name='Arrival']").change(function() {
var date_picked = $("input[name='Arrival']").val();
var SpecialTo = moment(date_picked, "YYYY-MM-DD");
var today = new Date();
today.setDate(today.getDate() - 240);
var selectedDate = new Date(date_picked);
if (today <= selectedDate) {
//alert('Date is today or in future');
} else {
alert('Date is in the past');
$("input[name='Arrival']").val('');
}
});
})
If you could post the source HTML of the date input with a value, I could change it probably to what you looking for.
This works just fine. Just get the name fields with inspect element. Add this code in the functions.php file.
add_action('acf/validate_save_post', 'my_acf_validate_save_post', 10, 0);
/**
* #throws Exception
*/
function my_acf_validate_save_post() {
$start = $_POST['acf']['field_61a7519a57d99'];
$end = $_POST['acf']['field_61a751d957d9a'];
// check custom $_POST data
if ($start > $end) {
acf_add_validation_error('acf[field_61a751d957d9a]', 'End date should be greater than or equal to start date.');
}
}
When you open inspect element the input field should look like this:
<div class="acf-date-picker acf-input-wrap" data-date_format="dd. MM yy" data-first_day="1">
<input type="hidden" id="acf-field_61a751d957d9a" name="acf[field_61a751d957d9a]" value="20211201">
<input type="text" class="input hasDatepicker" value="16. January 2022" id="dp1638477022818">
</div>
More information you can find here:
https://www.advancedcustomfields.com/resources/acf-validate_save_post/
I would like to integrate a date picker in a form. So I created a custom DateTimePickerView like this :
App.DateTimePickerView = Em.View.extend
templateName: 'datetimepicker'
didInsertElement: ->
self = this
onChangeDate = (ev) ->
self.set "value", moment.utc(ev.date).format("dd/MM/yyyy hh:mm")
#$('.datetimepicker').datetimepicker(language: 'fr', format: 'dd/mm/yyyy hh:ii').on "changeDate", onChangeDate
Here is the template :
<script type="text/x-handlebars" data-template-name="datetimepicker" >
<input type="text" class="datetimepicker" readonly>
</script>
In my form I want to bind this component to an attribute of my model (I am using the RestAdapter) :
<script type="text/x-handlebars" id="post/_edit">
<p>{{view Ember.TextField valueBinding='title'}}</p>
<p>{{view App.DateTimePickerView valueBinding='date'}}</p>
</script>
Everything works fine in apparence : the DateTimePicker is well displayed and the value is set inside the input.
But there is a problem in the effective binding : when I send the form, the post param "date" (corresponding to the attribute) is null.
When I look inside the generated html code I can see the following :
<p>
<input id="ember393" class="ember-view ember-text-field" type="text" value="Event 1">
</p>
<div id="ember403" class="ember-view">
<input type="text" class="datetimepicker" readonly="">
</div>
I am not an expert in the global ember structure, but I guess that the id element is important for the binding. In that case, for my component, the ember id is put to the container of my component and not to the input containing the value. So I guess the problem is here.
So what could be the correct way to make it work ?
I just created a working jsfiddle here ; we can see that the modifications in the title field are taken into account but not the modifications in the DateTimePickerView component.
I guess the problem lies in the fact that you where trying to listen on an event fired from the datetimepicker which is not captured, and thus the model value not set.
To make things more solid you should get the datetimepicker current date value in your doneEditing function, just before saving the model back to the store.
Let me show in code what I mean:
window.App.EventController = Ember.ObjectController.extend(
...
doneEditing: ->
// relevant code line
#get("model").set("date_begin", $('.datetimepicker').data('date'))
#set "isEditing", false
#get("store").commit()
...
)
And here your (working) jsfiddle.
Hope it helps
Edit
After reading your comment I've modified the input field inside your datetimepicker template. Please see here an updated jsfiddle that also initializes the input field of the datetimepicker on edit begin when calling edit.
...
edit: ->
#set "isEditing", true
startDate = #get("model").get("date_begin")
#$(".datetimepicker").data({date: startDate}).datetimepicker("update")
...
You are now safe to remove the onDateChange function and do init and save inside your edit and doneEditing respectively, applying format or whatever.
Edit 2
Reading your last comment, this is how you register customEvents for example in your App.DateTimePickerView:
...
customEvents: {
changedate: "changeDate"
}
...
this way Ember will be aware of your custom events. You can register whatever events you want but notice that the keyname is lowercased and the value must have the event name to listen to camelcased. For more infos on custom events see here.
Please see here for another update jsfiddle with the changeDate custom event registered.
I have finally resolved this problem making some controls when using the moment.js library.
Everything was working fine with the binding process of the custom datetimepickerview.
Here is a working jsfiddle : here
The relevant code is here :
window.App.DateTimePickerView = Ember.View.extend(
templateName: 'datetimepicker'
didInsertElement: ->
#this test is important and was the problem
if #.get 'value'
#$('input').val moment.utc(#.get 'value').format('LLL')
onChangeDate = (ev) =>
date = moment.utc(ev.date).format('LLL')
#.set "value", date
#$('.datetimepicker').datetimepicker(format: 'dd/MM/yyyy', pickTime: false).on "changeDate", onChangeDate
)