I have a couple of bootstrap datetime pickers and am trying to set the textbox and selected date and time from server, using data read from DB. It keeps setting it to today's date at 12:00 AM.
This is my .aspx and .aaspx.cs file content for the above:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
function EndRequestHandler(sender, args) {
$('#tpStartDate').datetimepicker({
sideBySide: true,
ignoreReadonly:true,
daysOfWeekDisabled:[0,6]
});
$('#tpEndDate').datetimepicker({
sideBySide: true,
ignoreReadonly:true,
daysOfWeekDisabled:[0,6]
});
}
});
<div class="col-sm-3 col-md-3">
<div class="form-group">
<label for="title">Start Date</label>
<div class="input-group date" id="tpStartDate">
<input runat="server" id="tbStartDateTime" type="text" class="form-control" readonly="readonly" style="cursor:pointer" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" style="cursor:pointer"></span>
</span>
</div>
</div>
</div>
.cs:
tbStartDateTime.Value = dtClassList.Rows[0]["StartDateTime"].ToString();
tbEndDateTime.Value = dtClassList.Rows[0]["EndDateTime"].ToString();
when I put a breakpoint above, I see start datetime is "8/23/2017 1:30:00 PM" and end datetime is "8/23/2017 3:00:00 PM", but on the page they are both displayed as "10/17/2017 12:00 AM" (today's date)
For this you must set as option useCurrent: false as by default useCurrent is true.
If you don't set it will always start the picker on the page with the current date and time.
but on the page they are both displayed as "10/17/2017 12:00 AM"
(today's date)
This is an old bug: https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1311
This was solved on latest version I advise you to use V 4.17.47
Related
I'm trying to use moment.js library to convert a datetime string into a local UTC. How do I do that?
html:
<div style="float:left; margin-right: 5em;">
<label id="startDateTimeLabel">Start DateTime</label>
<div class="input-group input-append date" id="startDateTime" style="width:300px;">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<input id="ButtonConnect" class="btn btn-primary" type="button" value="Connect" onclick="ButtonGetSelectedDate();" />
<script>
const startPicker = new tempusDominus.TempusDominus(document.getElementById('startDateTime'));
var tStartDatetime = startPicker.dates.picked;
//the below line seems to be a javascript datetime;
console.log('tStartDatetime : ' + tStartDatetime ); //this is the format: Sat May 15 2021 12:30:00 GMT-0400 (Eastern Daylight Time)
var tStart = moment(tStartDatetime ).valueOf();
console.log('tStart : ' + tStart ); //this prints Nan on the console
</script>
this is what I did and it seems to work ok.
tStart = moment(new Date(tStartDatetime)).valueOf();
I can set the value of a datetime form field with Behat/Mink in Selenium Standalone Chrome, but not the Dmore Behat Chrome Extension.
I have defined a step like this:
And I assign the date "yesterday" with timezone "Asia/Tokyo" for "edit-field-datetime-MYFIELD-0-value"
In FeatureContext.php, this is my code:
/**
* #Then I assign the date :date with timezone :timezone for :field
*
* Assign the specified date to the element with the given CSS.
*/
public function assertEnterDateForField($field, $timezone, $date_string) {
$date_field = $field . '-date';
$time_field = $field . '-time';
// Drupal stores timezones as UTC so we need the base time in UTC.
$datetime = new DateTime($date_string, timezone_open('UTC'));
// We need to convert the UTC time to the user's timezone.
// This is because when saving the entity,
// Drupal will convert the value to UTC.
$datetime->setTimezone(timezone_open($timezone));
$date_output_string = $datetime->format('mdY');
$time_output_string = $datetime->format('hisA');
$datetime_debug_string = $datetime->format('Y-m-d\TH:i:sO');
$this->fillfield($time_field, $time_output_string);
$this->fillField($date_field, $date_output_string);
echo "Datetime $datetime_debug_string
Field set to
date: $date_output_string
time: $time_output_string";
}
On my local environment (lando, running the Standalone Chrome container), this code works as expected; the date/time is set correctly for the field.
However, on my test server (Pantheon/CircleCI, running the Behat Chrome Extension, it doesn't work. The debug information output by the code on the test server is correct; for example:
│ Datetime 2020-08-13T09:00:00+0900
│ Field set to
│ date: 08132020
│ time: 090000AM
However, the date/time is not actually filled in. This is a screenshot of the step after running my code:
Here's the HTML from Drupal for the field:
<div id="edit-field-datetime-review-target-0-value">
<div class="field js-form-item form-item js-form-type-date form-item-field-datetime-review-target-0-value-date js-form-item-field-datetime-review-target-0-value-date form-no-label">
<label class="label control-label visually-hidden" for="edit-field-datetime-review-target-0-value-date">
Date
</label>
<div class="control">
<input id="edit-field-datetime-review-target-0-value-date" class="form-date is-link input" title="Date (e.g. 2020-08-22)" max="2050-12-31" min="1900-01-01" name="field_datetime_review_target[0][value][date]" size="12" type="date" value="2020-08-22" data-drupal-selector="edit-field-datetime-review-target-0-value-date" data-drupal-date-format="Y-m-d" />
</div>
</div>
<div class="field js-form-item form-item js-form-type-date form-item-field-datetime-review-target-0-value-time js-form-item-field-datetime-review-target-0-value-time form-no-label">
<label class="label control-label visually-hidden" for="edit-field-datetime-review-target-0-value-time">
Time
</label>
<div class="control">
<input id="edit-field-datetime-review-target-0-value-time" class="form-time is-link input" title="Time (e.g. 15:19:19)" name="field_datetime_review_target[0][value][time]" size="12" step="1" type="time" value="15:19:04" data-drupal-selector="edit-field-datetime-review-target-0-value-time" />
</div>
</div>
</div>
So, how can I set the value of a datetime field with Dmore/Behat-chrome-extension?
I write a simple project in ASP.NET Core. I want a user to only pick Date and Hour without minutes part in datetime in view. I tried, but minute part is always shown and pickable! Any solution to not show minute part or disable it is acceptable.
This is what I wrote in the view model:
[DisplayFormat(ApplyFormatInEditMode = true,ConvertEmptyStringToNull =false,
DataFormatString = "{0:yyyy-MM-dd HH}")]
public DateTime StartDate { get; set; }
View is a get:
<input type="datetime-local" asp-for="StartDate" name="StartDate" id="StartDate" data-date-format="{0:yyyy-MM-dd HH}" asp-format="{0:yyyy-MM-dd HH}" class="form-control" />
Any solution to not show minute part or disable it is acceptable.
If you are using browser default datepicker widget as the screenshot you shared, which seems not enable us to customize and disable minute picker part within that default datepicker widget.
If possible, you can try to use some jQuery datepicker widget to achieving the requirement, like below.
<div class="input-append date form_datetime">
<input type="text" asp-for="StartDate" id="StartDate" class="form-control" readonly />
<span class="add-on"><i class="icon-th"></i></span>
</div>
Required references and js code
<link rel="stylesheet" href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$(".form_datetime").datetimepicker({
format: "yyyy-MM-dd HH:00",
minView:1,
autoclose:true
});
})
</script>
Test Result
I use $scope.dt= moment().format("YYYY-MM-DD") to init datapicker module.
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
this is plnkr test code..
why this can not show value on input?
Moment returns the date as a string, rather than a date object, which is what the datepicker requires, so you need to convert it to a date.
Ex:
$scope.today = function() {
$scope.dt = moment().toDate();
};
$scope.today();
You'll then need to format that if you want it to display properly outside of the datepicker, which you can do when you call it in your view:
{{dt | date: "yyyy-MM-dd" }}
Why moment format value can not init module?
the old version support this.
On my HTML5 page I have this code excerpt.
<body>
<script type="text/javascript" >
$(document).ready(function () {
$('#timepicker4').timepicker({
format: 'HH:mm'
});
</script>
// start of page
<div class="header">
<label th:for="timepicker4" th:value="${hourIntervalStart}">Hour Interval Start: </label>
</div>
<div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input name="hourIntervalStart" th:field="*{hourIntervalStart}" id="timepicker4" class="form-control tp_interval1"></input>
</div>
</div>
// rest of page
</body>
The problem is that, though the javascript is correctly displaying the time, the controller prints out (for testing purposes) a null value to the hourIntervalStart attribute.
The appropriate javascript library is correctly loaded and accessible from the browser.
How to correctly pass the the selected value to the controller?