ui.bootstrap.timepicker not binding with angularjs ng-model - javascript

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.

Related

Format date to correct date format in React

I am currently working with a React Kendo Grid which is filled with data by an API. On of the columns is Date and the data filling it comes in a format like:
2022-02-11T15:50:51.000+00:00
I tried to format the Kendo Grid column like this:
<GridColumn
field="snDate"
filter="date"
format="{0:yyyy-MM-dd'T'HH:mm:ss.SSS'Z'}"
width="200px"
title="Date"
/>
but when I filter it with Kendo datapicker filter, it returns no rows. What am I doing wrong?
You need to make a custom column compoenet and play with the date over there:
const DateCell = ({ myDate }) => {
const [year, month, day] = myDate.split('T')[0].split('-');
const time_part = myDate.split('T')[1];
return (
<td>
{`${year}/${month}/${day} ${time_part}`}
</td>
)
}
//export default DateCell //this is if you want to put it in separate component
<GridColumn
field="snDate"
filter="date"
width="200px"
title="Date"
cell={DateCell}
/>
My result is -> 2022/06/19 10:35:13.197
And when you filter it React Kendo Grid knows that the value of each cell is in the first format that you mentioned, I mean to the 2022-02-11T15:50:51.000+00:00 and the filter will work.
It's worked for me.
Good luck

angularjs format date not working

I am trying to 2015-04-17 12:44:38.0 to dd/MM/yyyy format in angularjs
<td ng-bind="item.MON_FE_DUEDATE | date:'dd-MM-yyyy'"></td>
But still showing 2015-04-17 12:44:38.0 only.Please suggested to me where is my mistake?
Because you are trying to format it on a string.
Please see working fiddle.
https://jsfiddle.net/p7gz0opm/
Converted string to Date.
function MyCtrl($scope) {
$scope.date = new Date('2015-04-17 12:44:38.0 ');
}
Template:
<div ng-app ng-controller="MyCtrl">
{{date | date:'dd-MM-yyyy'}}<br />
{{date}}
</div>
Edit :
In your case you will have to pass through a function.
Please see another fiddle.
https://jsfiddle.net/qjs1uj37/
$scope.parth=function(str){
return new Date(str);
}

How to extract only the months from the datepicker widget in Kendo UI to an alertbox?

I am currently working on an ASP.NET MVC 4 project, in my view I am using Kendo UI. I want to display only the month and year from the Datepicker widget(Example: JANUARY 2016) into the alertbox, but instead I am getting the following:IMAGE
My view code is as follows:
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
.Format("MMMM yyyy")
.Value(DateTime.Today)
.HtmlAttributes(new { style = " width: 95.5%;})
.Events(e => e.Change("monthpicker_change"))
)
<script>
// monthpicker_change function
function monthpicker_change() {
var month = $("#datepicker").data("kendoDatePicker");
alert(month.value());
}
</script>
Please suggest me what changes I need to do in my script, in order to display only the selected Month and Year in an Alert box.
PS: I have formatted the datepicker to display only the MONTHS and YEAR, not the standard dates
kendoDatePicker.value method always return javascript Date.
You should use Date methods to extract month and year from date object:
var date = $("#datepicker").data("kendoDatePicker").value();
alert((date.getMonth()+1) + '.' + date.getFullYear());
Beware: getMonth() return values from 0 to 11; 0 is january.
Here is full reference of Date functions: http://www.w3schools.com/jsref/jsref_obj_date.asp

Daterangepicker input field is not 24-hours-format

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/]

Timepiker value is not going to php database (Datatype : datetime) variable?

I take time piker to take time from my web page.
This is my front end code.
<input type="text" class="form-control timepicker" id="event_start_timepicker" placeholder="select time" name="startAt">
I use Laravel 5 frame work . so I access this data in my controller class. I want to sent this value in my phpMyAdmin database datetime varable.
This is my controller class code.
public function store(Request $request) {
//
$event = Request::all();
//dd($event['startAt']); out put : "02:45 PM" //data is comming correctly
//try to format data
$s_time = date_create($event['startAt'])->format('Y-m-d h:i:s A');
$e_time = date_create($event['endAt'])->format('Y-m-d h:i:s A');
//reassigning format data
$event['startAt']=$s_time;
$event['endAt'] =$e_time;
Event::create($event);
return redirect('event');
}
first time I run without formate , I check database and I see datetime variable value is 0000-00-00 00:00:00 . so , I formate but still same result other all details passed correctly. expect some answer. please help me.
this is script.
//Timepicker
$("#event_start_timepicker").timepicker({
showInputs: false,
format:"yyyy-mm-dd h:i:s A"
});
$("#event_end_timepicker").timepicker({
showInputs: false,
format:"yyyy-mm-dd h:i:s A"
});

Categories