I have one input field for time entry , need to enter hour and minute (HH:mm Format) .So how can input values automatically formatting . Eg: input values automatically formatting with HH:mm format (11:30).Any help would be appreciated.
You can use uib-timepicker directive for this purpose.It is easy to use and lot more customizable like you can switch between 12/24H etc. The doc explains it pretty clearly.
<div uib-timepicker ng-model="mytime" ng-change="changed()"
hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
</div>
you just write{{"HH:mm"}} in $scope
value = {{a.value | date: "HH:mm"}}
Related
I am working on a project where user request for appointment. I am using v-calendar which uses the datepicker.
I am facing a issue where user can request for appointment any time/ 24 hours which I need to set only for 9am - 5pm. I can see that we can limit date in date picker by using something like :max-date="value" but could not found how to limit the time.
Here is the working fiddle
some code from the project
name="appointment-date"
v-model="appointment_date"
mode="dateTime"
:is24hr="false"
:min-date="currentDate"
:model-config="dateTimePickerConfig"
:popover="{
visibility: 'click',
placement: 'auto',
}"
:masks="{ inputDateTime: 'MM/DD/YYYY h:mmA'}">
<template v-slot="{ inputValue, inputEvents }">
<div class="form-icon ">
<input-component
:value="inputValue"
v-on="inputEvents"
placeholder="MM-DD-YYYY h:mmA"
/>
<Icon name="date-time"/>
</div>
</template>
</date-picker>
Your help to solve the problem will be higly appreciated.
Thank you.
If I understood you well, you want to restrict picking specific hours. This is possible with v-calendar with the following property:
<v-date-picker v-model="date" :valid-hours="[0,3,4,5,8,16,20]" is24hr />
Please note the :valid-hours attribute. You can provide which hours should be available for the user to pick. If you want to allow them to pick minutes in specific 'intervals' you can use following as well:
<v-date-picker v-model="date" mode="dateTime" :minute-increment="15" />
Note :minute-increment property. This will allow user to pick between '15 minutes. So available numbers will be 00, 15, 30, 45. You can play with it.
Unfortunately, there is no way to disable minutes, which makes me sad. As if someone books appointment at 9:15 AM you would rather want to 'disable' 9:15 AM for next users. You could disable whole hour (9 AM) but not specifically 9:15, so that 9:00, 9:30 and 9:45 would still be available. At least I don't know any easy way.
Hope this helps anyone.
================ UPDATE =================
Note that v-calendar added those additional properties in specific v-calendar version. I've been using it with v2.4., seems like v2.3. does not have it yet.
I have a form with datetime_local html5 datetime input so that mobile users can use their native datetime picker instead of a jquery substitute which is generally clunkier.
I want the user to be able to select multiple dates.
So far I'm using the onchange trigger to capture the selected datetime and add it to an array. I then try and paste the array into the datetime input so it can be sent with the form.
With one date, it pastes fine, with more than one the input goes blank.
var datearray = [];
$(document).on('change','#mobile_gig_date',function(){
var date = $("#mobile_gig_date").val();
datearray.push(date);
console.log(datearray.join('; '))
$("#mobile_gig_date").val(datearray);
});
The HTML element is;
<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">
Is there a way to add an array to a datetime input, and if so, in what format?
Since your input has the type datetime-local you can't put inside something that is not of that type.
Note that you also tried to put array inside an input - and you can't do this (what you can do is convert your array to string using JSON.stringify and use that value).
I added another hidden input and used it to save the data of your array.
var datearray = [];
$(document).on('change','#mobile_gig_date',function(){
var date = $("#mobile_gig_date").val();
datearray.push(date);
console.log(datearray.join('; '))
$("#mobile_gig_date_temp").val(JSON.stringify(datearray));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">
<input type="hidden" value="" name="gig[date_temp]" id="mobile_gig_date_temp" />
I am trying to use datepicker by http://foundation-datepicker.peterbeno.com/example.html to get the user to select a date.
The datepicker has a really nice year-picker and month-picker format instead of using the arrows, it has a nice selector.
year-picker
the only way to access the year picker I can tell is to click on the year at the top, however I want this to show first on default. once the user selects the year, then allow them to select the month using the month-picker
[month-picker][2] - 2: i.stack.imgur.com/CiIgU.png (i am unable to post more than 2 links currently as I am new to stackoverflow but here is the intended screenshot - same as below...)
I want them to first select the year, then the month, then day. However all the examples I see I don't see how to set all three beginning with year.
then finally the default day picker
[day-picker][3] - 3: i.stack.imgur.com/p3re2.png
Alternatively if the above is not possible could allow the user to select 3 separate times with 3 different datepickers - one for year, month, and day. I can get the month-picker only working with the following (but not the year picker):
<div class="row collapse date" id="dpMonths" data-date-format="mm/yyyy" data-start-view="year" data-min-view="year" style="max-width:200px;">
<div class="small-2 columns">
<span class="prefix"><i class="fa fa-calendar"></i></span>
</div>
<div class="small-10 columns">
<input size="16" type="text" value="02/2012" readonly>
</div>
<script>
$(function(){
$('#dpMonths').fdatepicker();
});
</script>
Is this possible?
There is tons of examples on this page, but if i try modify any of them it either breaks or doesnt do what I need it to do...
Kind regards,
Dave
The examples on the website above are not correct. I have managed to find the answer in one of the commits after much searching. Hopefully this answer may assist someone else.
$('.monthpicker').fdatepicker({
format : 'mm/yyyy',
startView : 1,
minView : 1
});
The views are numbered go up so 4 = year etc.
To select date going through year -> month -> day:
$('.monthpicker').fdatepicker({
format : 'mm/yyyy',
startView : 4,
minView : 2
});
I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?
I have following input which displays datetime
<div ng-repeat="item in items">
<input type="text" ng-model="item.name" />
<input ng-model="item.time" />
</div>
The issue i have is that time is in following format.
"2002-11-28T14:00:00Z"
I want to just display the time portion. For which I would have to apply filter
date: 'hh:mm a'
I tried
ng-model="labor.start_time | date: 'hh:mm a'"
How can I show only time portion in input box showin time only? I can't use span tag as the time a user can change so have to show in input tag.
As above Gaul said, you can use watcher for it.
<div ng-controller="MyCtrl">
<input ng-model="currentDate">
</div>
function MyCtrl($scope, $filter) {
$scope.currentDate = new Date();
$scope.$watch('currentDate', function(date){
$scope.currentDate = $filter('date')(date, 'shortTime');
});
}
This is working JSFiddle with your example.
item.time is being overwritten with whatever you type in that input. so when you change the inputs content to a time value only, item.time will also only contain the time portion. You'll need a extra variable to hold the time portion and update the datetime value if the time value changes. You can use a $watch for that
$scope.$watch('item.time_portion', function(newValue, oldValue) {
// update the hours and minutes of $scope.item.time here
});