如何将UtcNow分配给DateTime选择器值属性?

时间:2016-07-13 13:34:08

标签: c# razor model-view-controller twitter-bootstrap-3 datetimepicker

我正在使用Bootstrap 3 DateTime选择器from here.在加载Razr表单时,我想将默认时间设置为当前的UtcNow时间戳。

我尝试了许多不同的DateTime格式来设置此默认值。但是控制似乎并不接受传入的格式。

尝试了一些格式:

//Format #1
DateTime.UtcNow.ToString("yyyyMMddHHmmtt");

//Format #2
string.Format("{0:g}", DateTime.UtcNow);

我知道选择时间时DateTime选择器使用的格式如下,07/13/2016 2:43 AM,所以我想如果我可以将UTC时间转换为这种格式,它将接受时间戳。

我确认我可以将此值分配给具有相同Razr语法的常规输入元素,以便排除值未被传递的问题。

问题:

如何将UtcNow分配给DateTime选择器默认值属性?

控制器:在控制器中,我将string.Format("{0:g}", DateTime.UtcNow);作为模型属性传递。

//Create a dynamic object to store list of different model types.
dynamic dynamicEscalationModel = new ExpandoObject();
dynamicEscalationModel.OutageStartTime = string.Format("{0:g}", DateTime.UtcNow);

查看:然后我使用@符号将此值分配给DateTime选择器:

<!-- Outage Start -->
<div class="form-group">
    <label class="col-md-9 control-label" style="text-align: left;" for="OutageStartDisplay">Outage Start (*UTC)</label>
    <div class="col-md-9">
        <div class='input-group date' id='OutageStartDisplay'>
            <input type='text' class="form-control" id="OutageStartDisplayInput" name="OutageStartDisplayInput" value="@Model.OutageStartTime" />
            <span class="input-group-addon" id="OutageStartDisplayCalendar">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

为了测试,我添加了第二个普通输入,并且模型属性被正确绑定:

<input type='text' class="form-control" id="" name="" value="@Model.OutageStartTime" />

我的脚本标记中的DateTimepicker init:

//Init the Outage Start date time picker
$(function () {
    $('#OutageStartDisplay').datetimepicker({
    });
});

2 个答案:

答案 0 :(得分:2)

由于您现在正在接收UTC,为什么不直接从客户端进行:

    <script type="text/javascript">
        $(function () {
            var t = new Date(); 
            t.setMinutes(t.getMinutes() + t.getTimezoneOffset());

            $('#OutageStartDisplay').datetimepicker({
                defaultDate: t,
            });
        });
    </script>

答案 1 :(得分:1)

将此添加到脚本标记您需要在那里进行初始化:

      $('#OutageStartDisplay').datetimepicker({
        format: 'm/d/Y H:i:s',
        theme: 'dark',
        startDate: '@Model.OutageStartTime'
    });