如何使用带有jquery数据表的Bootstrap日期时间选择器

时间:2015-12-23 12:59:22

标签: jquery twitter-bootstrap

我是数据表中的新手。在这里,我使用Jquery datepicker开发了使用日历视图显示日期的代码,但是在这里我需要使用Jedit表库在数据表中显示时间小部件和日历视图。

如果单击该列中的任何行,日期选择器窗口小部件打开,我可以显示带有日期值的列。您可以告诉我如何使用日历窗口小部件显示时间窗口小部件。

先谢谢。

以下是代码:

.makeEditable({“aoColumns”:[null,null,{placeholder:'',indicator:'Saving ...',type:“datetimepicker”,tooltip:'Click to change ticket due date',onblur: '取消',提交:'确定',oUpdateParameters:{ticket_id:function(){return ticketID;}

 <script src="<?=base_url()?>public/admin/js/jquery.dataTables.editable.js" type="text/javascript"></script>

<script src="<?=base_url()?>public/admin/js/jquery.datetimepicker.min.js" type="text/javascript"></script>
.makeEditable({
                                                                                               "aoColumns": [null,null,
                                                                                                       {placeholder : ' ',indicator: 'Saving...',
                                                                                                       type:"datetimepicker",
                                                                                                       tooltip: 'Click to change ticket due date',onblur: 'cancel',submit: 'Ok',
                                              


 <link href="<?=base_url()?>public/css/jquery.ui.datepicker.css" rel="stylesheet">
 <link href="<?=base_url()?>public/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

1 个答案:

答案 0 :(得分:0)

您需要在数据表中添加行后创建日期选择器。

<Controls:MetroWindow x:Class="NFCAgent.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                  Title="NFC-Agent"
                  Height="55"
                  Width="250"
                  ResizeMode="NoResize"
                  GlowBrush="{DynamicResource AccentColorBrush}"
                  WindowStartupLocation="Manual"
                  Topmost="True"
                  ShowIconOnTitleBar="True">
<Controls:MetroWindow.LeftWindowCommands>
    <Controls:WindowCommands>
        <Button IsEnabled="False" >
            <StackPanel Orientation="Horizontal">
                <Rectangle x:Name="headerLogo" Width="20" Height="20"
               Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill"
                     Visual="{DynamicResource appbar_cupcake}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </StackPanel>
        </Button>
    </Controls:WindowCommands>
</Controls:MetroWindow.LeftWindowCommands>
<Grid>
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="25" Height="25" Margin="4 0">
            <Rectangle.Fill>
                <VisualBrush Visual="{DynamicRessource appbar_add}" />
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock x:Name="txtStatus" Text="Statusinfo" VerticalAlignment="Center"></TextBlock>
    </StackPanel>
</Grid>

这是一个例子

jsFiddler datatables with datepicker.